Yin and Yang
Welcome to the Yin and Yang Obsidian theme! This theme was created with both dark mode and light mode in mind. Hopefully, you too will enjoy the stark contrast in colors.
Plugins to Use
- Style Settings: I've added a ton of customizable features with the theme, including the ability to change base hue and saturation
🥳 . - Hider: This will allow you to hide various elements of the Obsidian UI for a cleaner and more minimal workspace
🤗 .
Showcase
yin-and-yang-base.mp4
Dark Mode | Light Mode |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
How To Install
You can find Yin and Yang Obsidian's community themes browser under Settings
> Appearance
> Themes
.
Alternatively, download Yin and Yang.css to .obsidian/themes in your Vault folder and activate it under Settings
> Appearance
. (For older versions of Obsidian that do not support themes yet, rename Yin and Yang.css to obsidian.css and place it in the root of your Vault.)
Feedback
If you have any issues and/or suggestions, please submit an issue or raise a PR. I will try my best to answer as quickly as possible! <3
Credits
I owe a huge thanks to @mgmeyers and the California Coast Obsidian Theme for inspiration!
Support
If you like this Plugin and are considering donating to support continued development, use the button below!
Created with
Sidebar Icons Missing
I'm obsessed with your theme, but for some reason mine looks sightly different than yours. All my sidebar icons are missing. I'll post a screenshot. I don't have any snippets activated either. And it doesn't seem that any plugin has done that.
Compatibility with the Banners plugin
Hi there! I maintain the Banners plugin, basically a plugin that adds banner images to notes. I got an issue over on my repo where this theme is incompatible with it, and I thought I'd give it a look.
There are a couple of styling rules that override the banner wrapper for my plugin, specifically these ones:
https://github.com/chetachiezikeuzor/Yin-and-Yang-Theme/blob/5a5564033e0cbf72fb119598b24fe52cc18a6b81/obsidian.css#L3778-L3788
Messing around with the theme a tad, this can be resolved by either excluding those rules for
.obsidian-banner-wrapper
, with something like:not()
, or adding a few extra rules into the theme that I tested with a snippet:I'm not sure which you prefer to implement, since both have their pros and cons, but yeah, if you can add compatibility to the plugin using either method, that'd be neat!
Which plugins are used in your demos?
Hey, really cool theme.
I was curious which plugins you are using in the pics? I recognize
cMenu
and thealternative file menu
, but what are you using for:Thanks in advance!
Enhancement : Add style settings for background color
Hey ! I saw you use HSL for the background, and I think it can be cool to add some style settings support to change it a little. I think the variable number slider (or variable number) can be useful for that. Also, it will be good to add specific color for each background primary and secondary or adding a variable for the last
+ x%
. Something like :--background-secondary:hsl(var(--base-h), var(--base-s), calc(var(--base-d) + var(--base-secondary))
And same for primary and tertiary.I think it can be a good improvement and addition to the other customization!
Can you add other payment channels?
I really want to support you through payment, because I have used this theme for several months. When I was paying, I found that buymeacoffee did not support some Chinese bank accounts. I think I'm not the only one who has such an idea, but I was rejected by buymeacoffee. 🥲🥲🥲
Single line breaks not showing in preview mode
I have the "Strict Line Breaks" option in Obsidian turned off in order to make single line breaks visible. However, the Yin yang theme doesn't respect the setting and still does not show line breaks.
Line breaks in default Obsidian theme:
No line breaks in Yin Yang theme:
Bullets erratic on mobile app
I have attached two videos. One with the theme turned on. It shows the bullets do random things (it's different each time) with end result is that I can't use them. This issue resolved when I turn the theme off (other video). https://user-images.githubusercontent.com/78266798/126027035-5a0751e7-0ab7-4e44-b18a-0a7409d619ec.MOV https://user-images.githubusercontent.com/78266798/126027023-bc722cf9-b3ff-4ca2-a398-be83ee54be42.MOV
Quick Selection Icon is hidden When Viewing a Document
I noticed that in the Obsidian Mobile App, the Quick Selection icon is hidden when a document is displayed. The Quick Selection can only be opened again after I have switched to another view (e.g. to the Graph View).
I use the last (catalyst) version of Obsidian Module and the Yin and Yang theme.
The quick selection icon is hidden by the document header:
Format Tables with code font & Create adjustable code blocks in Style Settings
Hey thank you for making this theme, I've been enjoying it and what you were able to do with the style settings. Great stuff.
I was wondering if you'd be able to fix how the markdown tables align. Right now, they are rendered with the normal text font, but it would be more aligned in editor mode if it renders in a code font instead.
Another aspect I'd like for you to have a way to adjust is adjusting code font size and a way to toggle remove the code block borders. The font is too large and looks jarring (to me) in editor mode when it sits in between text:
Thanks!
In Style Settings: both WYSWIG settings are on (Headings in Editor & Enhanced Editor Typography) Obsidian Version: v0.12.4 Theme Version: 377df43 (commit hash)
Side bar issue (toggle on/off button)
The option give a lot of space, so, the name is complety cut with little sidenav.
Also, the information for file (PDF, XLSL) have some problem, as you can see on my screenshot
Not compatible with checklist plugin anymore
Checklist plugin V1.2.3
Checklist plugin V1.2.2
Checklist's developer said they did not find what causes this on their end. Maybe you can help. (https://github.com/delashum/obsidian-checklist-plugin/issues/79#issuecomment-898498169)
Adapt to Obsidian 1.x
I have been using Yin and Yang for its minimalism and tasteful appearance for more than a year. However, Obsidian v1.0 with massive changes to the UI setting was released on October 13, 2022, which caused disorder in various old themes, including Yin and Yang. This fork aims at adapting this widely loved Obsidian theme to the current version. If you agree with the following adjustments, please consider accepting this pull request 🤝😄
Change List
Major changes are listed below:
Example Issues & Fixes
Issues:
Fix:
Issues:
Fix:
Inconsistencies between the Reading and Edit modes, and Broken "Style Setting" options
The heading sizes change between modes; large in reading mode, and base font size in the edit preview. This happens despite set to the default font size values for both, which should be the same. Further, attempting to change these in any way from the defaults using the Style Settings plugin seems to have no effect, even with the "Change Heading Sizes" toggled on.
Text that is both bolded and italicized will give priority to the bolded text color in the Edit preview, while giving priority to the italicized text color in Reading mode.
Plans to maintain for 0.16?
The new Obsidian 0.16 update comes with a large UI overhaul, breaking many themes.
Are you planning to update the theme for this UI overhaul? If not, are you open to adding a maintainer or allowing a fork to continue the theme?
Yin and Yang has really become my default look for Obsidian, and I would love to keep using it after the UI overhaul of 0.16.
Inconsistencies between Preview Mode and Exporting a PDF
Small indent in preview for highlighted code block
Hi!
I noticed a similar issue with the Obsidianite Theme a while back, but I couldn't figure out how to fix it in this theme with a snippet, could you have a look?
Thank you so much!
A huge fan, Cobbi
Edit Mode
Preview Mode [Small, 2-3 space indent in first line]