#1

primary-heroimg|100%
primary-heroimg|100%1920×1013 149 KB

Hey folks! My theme Primary has recently been merged into the Community Themes!

It’s a warm, playful but productive theme for Obsidian. I really enjoyed making this theme and I hope you’ll enjoy using it too!

I made Primary because I wanted to: get instant visual context on words with emphasis; make my PKM/Obsidian more fun and playful; and remind myself that my PKM is not going to be perfect (through using fonts and icons that conveyed that feeling).

For more info and a short note on my creative process, check out Primary’s GitHub Repo! Feel free to submit issues and customization/plugin compatibility requests too :wink:

A combination of Bauhaus, Scandinavian and yellowing magazine pages as palette inspiration—Primary is a theme for people looking for a certain nostalgic warmness.

It is toppled with functional pop of red blue yellow colors. The perfect mix of loud and reserved.

Playful, reminiscing, productive.

Available in both :white_circle:Light and :black_circle:Dark modes for both Mobile and Desktop.

:yellow_circle: Features

  • Different colors for each emphasis element, for readability and instant visual context. Also applied for code blocks, the graph view and in secret places! :wink:
  • Custom UI Icons and Fonts fitting for the feel of the theme!
  • Playful, and coherent visual experience for your PKM :wink:
  • Lower contrast in areas with “lower needed focus”.
  • Mobile Compatibility
  • Style Settings (IN PROGRESS)

:exclamation: There are a couple of issues especially for Mobile and the theme isn’t customizable yet as I rushed to finish this for Obsidian October, but they will be fixed in the coming days!!

:red_circle: Plugins Supported

More plugins will be supported in the coming weeks! For now, I’ve checked the theme for these:

:white_check_mark: Calendar
:white_check_mark: Dataview
:white_check_mark: Outliner
:white_check_mark: Sliding Panes
:white_check_mark: Recent Files
:white_check_mark: Smart Typography (Recommended)
:white_check_mark: Contextual Typography (Recommended)
:white_check_mark: Advanced Tables
:white_check_mark: All Obsidian Features as of v.0.12.19 like Copy Code Button etc.

:large_blue_circle: TODOs

  • Mobile Compatibility (DONE!)
  • Customization through Style Settings (IN PROGRESS)
  • Admonition
  • Kanban
  • Checklist
  • Excalidraw
  • File Tree Alternative
  • Day Planner
  • Spaced Repetition
  • Gallery
  • Mind Map
  • Optimizing/Minifying the Theme
  • Tag Wrangler

and more coming up! (feel free to request plugin/customization support)

:white_circle: Light Mode

Primary-Light-01 Preview Mode|100%
Primary-Light-01 Preview Mode|100%1920×1080 273 KB

Primary-Light-02 Edit Mode|100%
Primary-Light-02 Edit Mode|100%1920×1080 283 KB

Primary-Light-03 Modal|100%
Primary-Light-03 Modal|100%1920×1080 270 KB

Primary-Light-04 Command Palette|100%
Primary-Light-04 Command Palette|100%1920×1080 216 KB

Primary-Light-05 Graph View 1|100%
Primary-Light-05 Graph View 1|100%1920×1080 281 KB

Primary-Light-06 Graph View 2|100%
Primary-Light-06 Graph View 2|100%1920×1080 425 KB

Primary-Light-07 Formatting|100%
Primary-Light-07 Formatting|100%1920×1080 241 KB

:black_circle: Dark Mode

Primary-Dark-01 Preview Mode|100%
Primary-Dark-01 Preview Mode|100%1920×1080 286 KB

Primary-Dark-02 Edit Mode|100%
Primary-Dark-02 Edit Mode|100%1920×1080 287 KB

Primary-Dark-03 Modal|100%
Primary-Dark-03 Modal|100%1920×1080 326 KB

Primary-Dark-04 Command Palette|100%
Primary-Dark-04 Command Palette|100%1920×1080 202 KB

Primary-Dark-05 Graph View 1|100%
Primary-Dark-05 Graph View 1|100%1920×1080 243 KB

Primary-Dark-06 Graph View 2|100%
Primary-Dark-06 Graph View 2|100%1920×1080 371 KB

Primary-Dark-07 Formatting|100%
Primary-Dark-07 Formatting|100%1920×1080 243 KB

Check it out in Obsidian’s Community Themes!

Enjoying the Primary Experience?

Consider supporting my work, future updates and developments!

ko-fi

19 Likes
#2

v.0.1.1 has been released! :tada:

Changelog

  • Typo in Color Variables
  • Made scrollbar-thumb in Dark Mode more visible when :active
  • Removed some !important's.
  • Fixed #2 — %%Comments%% and $...$ Low Contrast Issue in Dark Mode is now readable!
  • Fixed #4 — Buttons are now the same for when they are :hovered and :focused
  • Hotfixed #5 — Checkboxes are now properly visible. I added height and width, but the checkboxes wouldn’t show up unless !important was added.
  • Fixed #6 — Buttons outside of Modals are now coherent and styled!
  • Added --interactive-accent-rgb so plugins using this feature should see a theme-fitting color (instead of the original Obsidian purple)
  • Standardized .view-content padding. Removed unnecessary padding for other containers.
  • Styled document search input and document search button!
  • Tags in Edit Mode are now Tag Pills like in Preview Mode!

Thanks to @SkepticMystic and @OfficerHalf for flagging the issues in this release :pray::yellow_heart::heart::blue_heart:

If issues posted above are still popping up, please let me know, and I’ll see what I can do about it :face_with_monocle:

NEXT UP: Mobile Compatibility and other minor fixes

3 Likes
#3

This is a beutiful theme! I made my own not to disimilar in feel and colour but yours is on another planet to mine. Brilliant

1 Like
#4

Very nice. Love the warm tone, reminds me a little of Gruvbox in that regard. Cheers. :slight_smile:

1 Like
#5

@KaneDodgson - Thank you so so much for the kind words!! I’m so glad you’re enjoying it!! More updates to come :wink:

@looper - I noticed many have said so (about Gruvbox)!! Thank you for the kind words as well!

1 Like
#6

Yes I love it. I have made the headings slightly smaller to fit my taste and modified the accent colour. I am really enjoying your theme

1 Like
#7

@Cecilia_May: Very nice work. Thanks for sharing.

@KaneDodgson: The headings are way to big for my taste too, especially in edit mode. How did you make them smaller?

2 Likes
#8

I am having issues clicking on notes / tags on local graph. Are you aware of any such issue wit your theme? @Cecilia_May

2 Likes
#9

I edited the H1, H2 etc CSS changed the size parameter to px in my case 27px, 24px, 21px (I only use H1, H2 & h3 headers)

1 Like
#10

@yalcin - Thanks for letting me know! I just tried it out. It does seem to be having some issues, specifically when the graph view is on the sidebar as a tab. It seems to work fine when the graph view is in the “active note” area though. I’ll check to see what I can do and I’ll update ASAP as this is a usability issue. Thank you again for spotting this issue :pray:

EDIT: I just fixed it! Update your theme and let me know how it goes!

CSS Snippet to adjust Primary’s Headings

For @SamAdams - here’s a CSS Snippet you can use! Just drop it in the CSS Snippets folder, refresh the list, toggle it on and it should be working! I’ve already tested it out :grinning_face_with_smiling_eyes: Just change the px’s as preferred. I’ve used @KaneDodgson 's measurements as a placeholder :grinning_face_with_smiling_eyes: You can change the line-height as well!

primary-theme-heading.css (1.1 KB)

Just a general PSA - Style Settings will be coming right after the mobile update! You’ll be able to edit header sizing through the plugin by then. But definitely feel free to tinker around with the code, or in this case add the given snippet above!!

6 Likes
#11

@KaneDodgson and @Cecilia_May: Thanks a lot for your reply. Looking forward to the further development.

2 Likes
#12

Hey guys! I’ve just added Mobile Compatibility for Primary!:tada::sparkles::carousel_horse:

It’s complete with beautiful styling, each for Phone and Tablet. I’ve also fixed header sizing issues on mobile edit mode.

Read the release here: Release v.0.2.0

NEXT UP: Customization through Style Settings and other minor fixes

7 Likes
#13

@Cecilia_May - I’m really digging this theme, it’s made its way into my daily use. Thanks so much.

I’m noticing a slight issue with unordered lists. The second level turns into an ordered list, even when it isn’t specified. If it’s on purpose, I apologize. It really throws me off when I outline, though.

Edit on left, preview on right:

image
image1283×300 31.6 KB

I’m sure I can eventually sleuth the problem, but thought you might like to know.
Thanks for the awesome theme!

Edit
So, I opened up on another system, and everything looks fine - Somehow this resolved itself. Please ignore for now, and sorry for the false alarm. I’ll report back if I see it again.

1 Like
#14

Glad to know it was some mix up internally - I’m a heavy-user of unordered lists (Outliner FTW) so it shocked me that it turned out that way (I definitely didn’t intend it to look like that!!) :laughing: Definitely let me know if this comes up again!! Thank you so much for allowing it to stay on your daily use!! :pray:

1 Like
#15

@Cecilia_May - Since my main rig still showed the issue, I dug into your stylesheet. You might want to check out line 2420:

image

I’m guessing it’s a typo - I don’t think “ccirlc” is a valid type for this element. I could be wrong - I’m definitely no programmer.

I wish I knew why it showed differently on my two main systems - both run Win 10. Anyhow, it’s easy enough to fix myself but if this is unintentional, perhaps others will benefit.

Thanks again for the great theme, and for the interaction!

2 Likes
#16

AHAHA! Thank you so much for reporting this typo!! This is really funny to me because I really rushed (like, literally typed as fast as I can) to make this theme to submit in time for Obsidian October. My hands were getting tired and cold because of it and this typo “ccirclc” is just the a living proof of it :laughing: HAHAHA.

I just pushed an update! It should be fixed now :grinning_face_with_smiling_eyes: Thank you so so much for reporting this - especially in digging into the code itself despite not being a programmer (you’re definitely one in this case :wink:)!! :pray:

3 Likes
#17

Well, it looks very polished and usable, even if hastily done. I normally have a few hundred lines of code to tweak a theme to my personal preferences, but on yours I think I’m under 150, and it’s like 95% header changes.

Oh, I program, I’m just not a (capital P) Programmer. I know just enough to accomplish one of two things: deconstruct and build things to what I want, or break them beyond repair.

Congrats on the theme, and the accomplishment. Well done.

1 Like
#18

Hey - I really think you should make a theme like this for VSCode. I think it might be a harder task but it should still be possible. I love this theme so much and would love for it to be in VSCode.

One thing though - if you do plan to make a theme like this for VSCode make sure it supports all of the commonly used languages, and some uncommonly used languages, syntax highlighting.

P.S. I would also prefer if the color of new variables weren’t just black or white so if you do make the theme in VSCode, try finding a good color for variables!

5 Likes
#19

Wonderful theme! This and the Minimal theme are the best Obsidian themes nowadays. Thank you so much!

1 Like
#20

Hello @Whippingdot ! I really appreciate your comments. I have thought about it greatly and decided that I will turn this idea into a reality! I actually have thought about it, but now that the demand has increased, I will surely create this project sooner than later!! This is my current “must-support” list of languages:

  • HTML
  • CSS
  • JavaScript
  • Python
  • C++
  • C#
  • Swift
  • PHP
  • Terminal Apps:
    • zsh (I’m on Windows and am not familiar with Mac terminal apps, maybe you have a suggestion?)

What do you think of this list?

Again, thank you so much for voicing your suggestion!!! :yellow_heart::heart::blue_heart:

2 Likes