Primary Theme

She is working hard at a rework.

2 Likes

To Primary Users :sparkles::carousel_horse:

Since its launch, Primary has gotten requests for its development even outside Obsidian. Logseq support will come, VSCode, etc. You can view the general roadmap on the link below.

Of course, the main meat is the Primary for Obsidian Roadmap! Here you’ll catch all the bugs, features, and updates I’m working on with Primary!! It also includes features I’ve been eyeing on for a while, but will be implementing in the future. It’s also open for comments so I’m more than happy to see your thoughts on them!

:sparkles::pushpin:Primary Public Board



BTW - Transfer to Sass will be done by Wed/Fri of this week This will make updating the theme easier and faster (which means more frequent updates). I also received credits and will be using it to get Insider —this should help me get access to builds and will be able to potentially roll out updates in advance :3


@patrick_ambrosso - Check out the board linked above! I think you’d be happy to find out the extent of how the customizations will go :smile: They will come soon!

7 Likes

Woah, seems a lot of amazing stuff coming!

2 Likes

Awesome update.
Thanks for your work.

1 Like

To Primary Users! :sparkles::carousel_horse: v.1.0 is out now!

Comes with tons of bug fixes, support for Obsidian v.0.13+, improved UI design, and ready for more updates!

Currently broken: Aside/Sidenotes (due to v.0.13 update. it’s harder to fix since I stopped using this. [Help wanted!])

Also, I’m brewing something up.

I’m an absolute color nerd. I studied colors a lot back in high school when I was learning to paint! It looks like the hard work has been transferred to other mediums as well, and ever since I published Primary, many have asked me for help in colors or has commented how beautiful Primary’s palette is (thank you so much). I wanted to share all the practical knowledge I’ve picked up and taught myself over the years to others. If you’re looking to improve your coloring skills, come join us to become a Color Connoisseur! :art: (At the bottom, you get to tell me the color you hate and why :yum:)


New :gift:

  • Full WYSIWYG Support! #13 , #14 , #33 , #46
  • Full support of syntax highlighting for Codeblocks (does not preempt Primary’s syntax highlighting for other apps) #7
  • Search Current File now has a new look #40

Changes :paintbrush:

  • Active Line on Preview removes background focus color from gutter. It only highlights text now. Source view still highlights the gutter. #8
  • Code moved to using Sass
  • Made the headers h1 to h6 slightly smaller
  • Improved UI :gem:
    v1primaryupdateui

Fixes :hammer_and_wrench:

  • Reduced height of link suggestions on Mobile #22
  • Cursor now appears when in an empty line #25
  • Paragraph breaks now work within a quote block #28
  • Collapsing arrows should now be bug free and properly aligned #26
  • Images should now be resizable #29
  • Status bar now doesn’t interfere with Workspace tab contents #34

Community Contributions :people_hugging:

Next Steps :telescope:

  • [for real now] Style Settings starting with size adjustments, then some feature toggles, then color customizations :sparkles:
  • Better language support through fonts :eyes:

As always, thank you to all those who submitted issues and PRs! Thank you to all those who supported me on ko-fi too, especially to my 2 monthly supporters: @dsent and @ScottKillen :rainbow::sob::sparkling_heart:

Consider supporting its development here:

5 Likes

@Cecilia_May : I use sidenotes quite a lot, but only the hide version. If it is of any help, below is the code that I use for Primary. I left rules that I outcommented in for completeness sake.

I had to adjust @SlRvb’s original code a bit to make it work. You can find the code for the other types of sidenote on that page too.

/* Original Live Preview-amended snippet here : https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/S%20-%20Aside.css */

.is-live-preview .aside-hide { margin-right: 0; }

.aside-hide {
    text-decoration: unset;
    text-align: justify;
    color: transparent;
    font-weight: unset;
    float: right;
    position: relative;
    /*margin: .5em;*/
    margin-right: -4em !important;
    padding-bottom: 2em !important;
    width: 1.5em;
    height: 1.5em;
    /*clear: right;*/
    overflow: hidden;
    /*background-color: var(--background-primary);*/
    color: transparent;
}

.aside-hide:before {
    display: block;
    content: "ℹ️ "; /* was 🗨 */
    color: red; /* PB changed from "none"; not clear why "red" shows true color */
    /*text-shadow: 0 0 0 var(--interactive-accent);
    font-size: 1.3rem;*/ /* PB changed from 12px */
    /*padding-top: .1em;
    padding-left: .3em;*/
    font-size: 1.3rem;
    margin-left: -.8rem;
}

.aside-hide:hover:before {
    border-bottom: 2px solid var(--background-modifier-border);
}

.aside-hide:hover {
    white-space: normal;
    text-overflow: unset;
    color: unset;
    width: 400px; /* leave @ 400 otherwise hovering vibrates */
    height: unset;
    /*background-color: var(--background-primary-alt);*/
    padding: 1em;
    padding-top: .5em;
    z-index: 3;
    /*box-shadow: .5em .5em var(--outer-bar);*/
    border-right: 3px solid var(--interactive-accent) !important;
    border-bottom: 3px solid var(--interactive-accent) !important; /* PB added this */
    font-size: 14.5px; /* PB added this */
    border-radius: 4px; /* PB added this */
    /*margin-right: 2rem;*/
}

.theme-light aside, .aside-hide {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

:root {
    --aside-header: "💭 Info";
}
2 Likes

Thank you so much @Klaas !! I’ll add this note to the Roadmap!!

1 Like

Hi! Love the theme, but I have a question. Since I started using it, I noticed that images and other embeds are left aligned on my notes instead of centered. I’ve dug around the theme’s css file but admittedly I’m a noob at this so I couldn’t get it to work. Is there any way to center all images/embeds by default?

Thank you so much!! I’d love to give you the right snippet for this! But I need a little bit more context!

  1. Could you kind of show me what’s going on there for both images and embeds?
  2. What kind of embeds are you pertaining to – markdown embeds or file embeds like audio etc?
  3. Do you have a previous theme where you found this an essential feature?

Let me know soon!!

Sure! For example, this is an image embedded onto a note with the Primary theme. It is aligned to the left instead of the center.

This is the same page but with the Horizon theme which I previously used. The images are centered in the page instead.

The only other embed I’ve tried this with is with Excalidraw drawings, which has the same behavior.

1 Like

Hello again @synaut! Here’s a snippet I’ve tested with Primary. This should center images both in Live Preview and Preview. Let me if this works!

center-images.css (253 Bytes)

It does work! Thank you very much! (both for the snippet and for the awesome theme once again)

1 Like

stylesettings-round1-compressed

Hey there Primary Users! I just released v.1.2.0! This is the start of the Style Settings update :partying_face:

The update allows you to:

  • Change font families either from the dropdown preset that comes with the theme, or with your own fonts using the custom fields
    • For the presets, you can choose from: Karla, Inter (alternate version), Lora, Roboto Slab, Quicksand
  • Change header sizes and colors either from the dropdown presets or with your own sizes and colors
    • For preset header sizes, you can choose from: Original, Medium, and Small
    • For preset header colors, you can choose form: Text Normal, Primary Colors, Rainbow Colors
  • Fully customize the graph view colors (including arrows, lines)
  • 3 different scrollbar styles: Thin, Mac, Hidden
  • Toggle to gray out markdown formatting styles (makes them more subtle in Edit View)
  • Toggle to hide vault titles
  • Toggle to use tabular numbers across Obsidian.

Click here to read more about the update.

More settings and updates to come~! Please stay tuned!

If you wanna help continue Primary’s development, consider donating coffees here :yellow_heart:

4 Likes

Hey again Primary Users! I just released v.1.3.0 with tons of fixes and more options with Style Settings as well as Alternative Checkboxes!

:label: v.1.3.0

New :gift:

:gem: Style Settings now comes with:

  • Options to customize the Tab Header including option for picking a style, size, and toggle for multi-row tabs, turn on/off tab animations, choose the flow of colors for the tabs #68 , #75
  • Toggle between Inter’s original font settings, or to Inter’s alternative font settings (recommended)
  • Embeded Note style options. You can choose between Original, Minimal, and Clean. You can also pick a preferred background color, if you want to.
  • Toggle between: Scrollable, fixed height Embeded Note OR Non-scrollable, full view Embedded Note
  • Option to center all embeds (especially images)
  • Toggle between underlined or no underline links.

update1-3-0

:gem: Alternative Checkboxes are now available in Primary! #35
I had so much fun doing this. I started with the first 6 and ended up with 16. Lol. Let me know what you think!

Syntax are as follows:

- [ ] Unchecked
- [x] Checked
- [>] Rescheduled
- [<] Scheduled
- [!] Important
- [-] Cancelled
- [/] In Progress
- [?] Question
- [*] Star
- [n] Note
- [l] Location
- [i] Information  
- [S] Amount
- ["] Quote
- [I] Idea
- [b] Pro
- [p] Con
- [v] Bookmark

Changes :paintbrush:

  • Standardized the Command Palette and Quick Switches style change for other Prompts
  • Added border to modals
  • Changed the theme store styling (a bit)

Fixes :hammer_and_pick:

  • Outline plugin now has appropriate indentation #72
  • Headings are now at the expected size, even without Style Settings #78
  • Font of heading and body will change as expected and without issues #80

:label: v.1.2.1 and v.1.2.2

  • Fixed Dataview line-wrapping issue #71
  • Fixed v.0.13.25 (Insider Build) widgetBuffer issue #77
  • Fixed Sliding Panes Rotated Header file title alignment #76
  • Added borders to modals and prompts
  • Changed styling for input container of the Command Palette and Quick Switcher:

As always, thank you to all those who sent issues and suggestions!! :partying_face::tada:

7 Likes

Thanks for developing this theme! I use it primarily because on how embeds (![[]]) work.

If you were to develop a premium palette with a brighter white note background then that is something I’d be interested in paying for.

1 Like

Thanks for the suggestion @Gnopps! Just added it to the list for the Premium Palettes release! Thank you so much for the kind words too :sparkling_heart:

Thanks for making this theme! I use obsidian for my study notes. Found your theme best suited.

Since I stare at the screen a lot, I would really appreciate if you can create settings for customizing the background color to reduce the glare.

1 Like

It’s update time again! I just released v.1.4.0 which features stylized Callouts and Multicolored Highlights!

New :gift:

:gem: Added beautiful support for Obsidian’s Callouts (aka sherlocked Admonitions)!

Full support of Obsidian’s standard callout syntax, and added a couple of my own, including a very special “celebrate” or “success” callouts (they’re moving gradients, perfect for a little party in your vault)!

Custom Callouts

> [!idea] for Ideas
> [!morning] for Morning Reflections/Meditations
> [!pro] for Pros
> [!con] for Cons
> [!celebrate] for your Vault Parties

:gem: Added option for Multicolored Highlights! This can be toggled through Style Settings. You can also change the colors to your liking. :smile:

image

:orange_circle::green_circle::purple_circle: Added Secondary Colored Headers option through Style Settings. This will enable heading to cycle through Orange, Green, Violet colors from h1 through h6.

image

Fixes :hammer_and_pick:

  • Fixed callout padding issue while improving callouts #94
  • Fixed highlighting text selection issue while improving highlights #66
  • Fixed Find/Find-Replace search input padding
  • Fixed position of search input clear x button
  • Fixed alternate checkboxes Cancelled - text not being muted in color

Changes :paintbrush:

  • Changed highlight colors to be more translucent
  • Changed some Callout icons and colors better fit with Primary
  • Moved Edit Codeblock button from the right to the left side to avoid interfering with Callouts
  • Changed syntax for Alternative Checkboxes for (I decided to go with the syntax most other themes were using and instead make a snippet for my preferences hehe):
- [p] Pros (before it was b)
- [c] Cons (before it was p)
- [b] Bookmark (before it was v)

Thank you to those who have contributed to this release!! :herb::sparkling_heart:

If you like this update, consider supporting the development of Primary here. :yellow_heart:

If you wanna know what’s next for Primary, check out its development roadmap here. :dart:


@Cruzer - Thank you so so much for the kind words! I’m glad you’re enjoying it!! I’m slowly fine-tuning the code so that the theme’s colors become customizable! As these updates roll out that include new additions to colors (like the highlights above), the color codebase also gets fine-tuned. The color customizations update will come soon!

3 Likes

Thank you very much for such a wonderful theme. I just started using it and I love it.
I have one small issue for callouts. If there any other symbol or letter is present between the square brackets, I am seeing strikethrough. I have attached the image.

2022-03-25_14-45-10

Thank you again for the theme and help with this issue.

Best,
Sai

Cecilia, you did an amazing job!

I’ve found one thing, when searching in a note with CMD-F, there is nothing visual that shows where the string is found. I hope it can be resolved!