An Obsidian.md theme with a stark contrast between dark mode and light mode, much like the Yin and Yang symbol ☯️.

  • By Chetachi Ezikeuzor
  • Last update: Dec 27, 2022
  • Comments: 16

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 ❤️ by Chetachi


Github

https://github.com/chetachiezikeuzor/Yin-and-Yang-Theme

Comments(16)

  • 1

    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. Screen Shot 2021-09-26 at 7 25 45 PM

  • 2

    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:

    .is-readable-line-width .markdown-preview-section > .obsidian-banner-wrapper {
      margin-top: calc(var(--banner-height) + 10px);
    }
    
    .markdown-embed .markdown-preview-section > .obsidian-banner-wrapper,
    .is-readable-line-width .markdown-embed .markdown-preview-section > .obsidian-banner-wrapper {
    	margin-top: calc(var(--banner-embed-height) + 10px);
    }
    

    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!

  • 3

    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 the alternative file menu, but what are you using for:

    1. Highlighting on a PDF
    2. Are the buttons for Menu, typo and color here, from a plugin? image

    Thanks in advance!

  • 4

    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!

  • 5

    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. 🥲🥲🥲

  • 6

    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: image

    No line breaks in Yin Yang theme: image

  • 7

    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

  • 8

    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: IMG_0223

    IMG_0224

  • 9

    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. image

    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: image

    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)

  • 10

    Side bar issue (toggle on/off button)

    image image

    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

  • 11

    Not compatible with checklist plugin anymore

  • 12

    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:

    • Note tabs related
      • Revise the note tab style to simple rounded rectangle.
      • Align the top-lines of the note tab and the sidebars.
    • Element style related
      • Remove the underline of external links.
      • Adjust the font size in the theme selection drop-down manual.
      • Remove relationship lines in file explorer.
      • Remove relationship lines in outline pane.
      • Remove the highlight background of the active day in the calendar plugin.
      • Remove the annoying white rectangle in the embedded box.
    • Borderlines related
      • Remove the right border of the left sidebar.
      • Remove the tab panel's bottom border.
      • Align the left-sidebar bottom in full-screen mode.
      • Search input related
        • Solve breaks of the focus prompt-input border.
        • Solve over-enlarged prompt-input.
        • Adjust prompt-input padding.
        • Aligned search icon in "search installed plugins".
        • Remove duplicate search input clear button.
    • PDF export related
      • Revise external links' colour in pdf exporting.
      • Revise block quote colour and border in pdf exporting.
      • Revise heading 1~6 sizes in pdf exporting.
    • Mobile app related
      • Adjust mobile workspace padding.
      • Adjust embedded box content padding.
      • Remove strange icon in view header bar.
      • Solve breaks of the focus prompt-input border.

    Example Issues & Fixes

    Issues: i1

    Fix: f1

    Issues: i2

    Fix: f2

  • 13

    Inconsistencies between the Reading and Edit modes, and Broken "Style Setting" options

    1. 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.

    2. 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.

  • 14

    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.

  • 15

    Inconsistencies between Preview Mode and Exporting a PDF

    image Left window has a page in Obsidian, Preview Mode. Right window has the exported PDF version of the page.

    • Exporting a PDF doesn't reflect customized bold & italic text colors (colors in PDF are the default colors that come with the Yin and Yang theme).
    • Headings do not feature the sizes shown in Preview Mode.
  • 16

    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 Screen Shot 2022-08-01 at 12 53 54 AM

    Preview Mode [Small, 2-3 space indent in first line] Screen Shot 2022-08-01 at 12 54 02 AM