Giter VIP home page Giter VIP logo

yin-and-yang-theme's Introduction

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


yin-and-yang-theme's People

Contributors

chetachiezikeuzor avatar mcndt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yin-and-yang-theme's Issues

Which plugins are you using the 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!

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)

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!

Bug: Scrolling page in preview mode

Hi! First of all the theme is beautifull. Recently I was using the Ying and Yang theme and I realized that it has a rather annoying bug, and that is that when you link a panel in preview mode with another in edit mode it automatically returns.

Here is an example:

2021-07-23.01-03-11.mp4

Thank You for the theme

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!

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

Bug: Horizontal Pane Resizing

Hi Chetatchi,

Updated Yin & Yang to it’s latest version and have lost the ability to resize horizontal/top&bottom panes (there’s nothing to grab to re-adjust). Vertical/side-by-side panes are fine, there’s still a place to grab to resize.

This is happening on Windows and Mobile.

Ty for the good work!

Can’t hide the title bar using plugin “Hider”

The left part of the title bar can't be transparent when enabling "MacOS-Like Transparent Window" using the plugin "Style Setting" and enabling"Hide title bar (frameless mode)" using the plugin "Hider".
截屏2021-08-30 下午3 58 14

Formatting Request

Screenshot if the indentation lines
One thing I was wondering about was whether it was possible to change how far down the lines next to indented lines go (the ones I marked with arrows). They are barely visible, I know, and that is my small issue. In Yin and Yang they cover one line only when you reach the most indented line, but I would prefer if they covered it all the way down until it reaches a less indented line as that makes the overview easier I feel like. Maybe I am the only one who prefers it this way, so I am not advocating for a general implementation but it would be amazing if it was changeable in the Style Settings plugin. Also, it would be great to be able to change the lines' color and maybe also their thickness. Thank you very much for your work!

[Feature] Add support for specific kanban card color.

After the newest update of Kanban #181, now we are allowed to modify specific card with specific tag by using css.

like:

.kanban-plugin .has-tag-A .kanban-plugin__item-title-wrapper  {
  background: #fee9f4 !important; 
}

.kanban-plugin .has-tag-A .kanban-plugin__item-content-wrapper {
  padding: .3em .3em .3em .3em !important;
  border-radius: .025em !important;
  background: #fee9f4 !important; 
}

.kanban-plugin__item .has-tag-A {
  background: #fee9f4 !important; 
}

to change a card's color by using tag A .

So don't know if it is possible to add support to modify the css easily in style setting. If it is doable, please consider add this support.

v1.1.0: Lists in Preview Mode are Left-aligned

Found a bug where only in preview mode lists would be completely left-aligned with the bullets / numbers/ checklist box would be in the gutter. They should instead look indented like in editor mode.

Preview Mode

image
image

Editor Mode

image
image

I found the same behaviour whether Outliner plugin or Style Settings plugin were on or off.

Obsidian Version: v0.12.12
Theme Version: 1.1.0 (no snippets)

Codeblock language not always rendered at the bottom of the screen

First of all thank you for the amazing theme!

I noticed an issue with codeblocks, which happens both in notes and previews.

When a note with a codeblock is opened, hovering over the block shows the block language in the bottom-right corner.
When scrolling down, I would expect this text to stay in the same corner, however it appears to be fixed in place.

'language-python' displayed correctly in the bottom-right corner:
image

The name scrolls up with the page:
image

Thank you!

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

Scroll to top problem

I don't really know why, but on long notes everytime I switch back and forth edit/preview, the document scroll to top. Must be related to the "Relationship lines" because when I removed this portion, it works just fine...

Ir9wpvit52.mp4

Add math symbol support for the editor mode

This is an enhancement request. It would be nice if the editor mode can also render math symbols using mathjax. Right now a math symbol like $S_\nu$ just renders as S in the editor mode while the preview mode renders it correctly.

Mobile bugs plus 1 request

As requested from reddit listing mobile bugs that I’ve encountered with the theme. Mostly just looking for a fix for the fold headings bug - the others are bonus.

  • Primarily the inability to fold headings in preview mode as the text butts right up against the edge leaving no room for the collapse arrow.

Not certain if the bugs below are theme issues or more the Style Settings plugin that your theme works with:

  • In editor mode, all headings remain the same size (similar size to normal text), regardless of whether the Style Settings plugin feature is used (in Specific mode heading changes > heading size > change heading size toggle — this has no impact on heading sizes in editor mode).
    WYSIWYG plugins for mobile appear to be unstable currently so the two settings in Style Settings > Typography are not working properly.
  • Using the Style Settings plugin again, WYSIWYG Headings in Editor does not work at all;
  • Enhanced editor typography toggle does partially work, however, activating it causes text to behave strangely. Enter key will put a bullet on a new line, but text will remain on the same line.

If i could make one request, it would be the option to change the text size of the file explorer. Again, not sure if this is.

Thank you for your efforts :)

Remove !important on .HyperMD-codeblock-bg

If possible, please remove the !important declarations on code blocks. I'm working on a syntax highlighting plugin for code blocks and I'd like to avoid having to place my own !important declarations to override Yin&Yang.

.HyperMD-codeblock-bg {
background-color: var(--pre-code) !important;
}

Emojis treated as images

Just noticed the issue with width:100% was solved for emojis (on community version of the theme), however it seems emojis are treated as blocks and trigger a line return after them.

Here it is in editor :
image

Here it is in preview :
image

Maybe emojis should be treated as simple text?

Conflict with Typewriter Scroll Plugin

So I looove this theme, and I can never use Obsidian without it. But there's just one problem. When I use this theme, the Typewriter Scroll plugin doesn't work. When I switch to a different theme, the plugin works, so I think the problem lies with the Yin and Yang theme.

I really don't want to have to switch themes whenever I'm in focus mode (i.e. using the Typewriter plugin), so I really hope this issue can be fixed..

Edit: The Zen mode in the plugin works... but the typewriter scrolling effect doesn't

Problem with mouse support - cannot click cursor or text select on some notes in edit view

Great theme!
After installing the theme I cannot click the cursor on the note. I tested it on the help vault with all plugin disabled.
I could click cursor in different places on some notes, but for example on the 'Start here' note from obsidian Help Vault, it doesnt work and could move cursor only by arrow keys and I cannot do text selection in edit mode there.

EDIT: Here was description of unrelated problem

I am on Obsidian 0.12.3 on Linux OS.

[Bug] [WYSIWYG] Issue with link

I have a templater note with things between [ ].
When enabling WYSIWYG for the theme (with the style settings), all become transparent/invisible.

No WYSIWYG :
image

With WYSIWYG :
image

Monochrome emojis

I make heavy use of emojis for my folders (and some files), and I noticed that with the theme active they are appearing as white (or black depending on the theme) monochrome images instead of the colorful emoji (at least in the file explorer and in the suggester).

Example:

image

Here the various emojis before the folder names should be the regular, colorful ones.

Would it be possible to add an option for the theme to disable this emojis override and keep the colorful ones?

Cheers!

[Feature Request] Toggle visibility of left ribbon icons with style settings

If it's possible to hide individual icons in the left ribbon I think that'd be very convenient to access from the style settings menu for the Y&Y theme! I don't know how to target the individual icons with css but if its possible and you figure out the way I'd be happy to create css snippets for each icon to share with the obsidian community

Why not the accent color cannot be changed?

image
as can be see above, i have change the accent color. however, in the context, i still got the pink color as original setting. i have restarted the app and the computer. confused...

Suggestion: Show ribbon on hover

Thanks so much for making this theme, I really enjoy using it! One thing I'd love to see is an option to show the left side ribbon when hovering the cursor over the left side / the lower left corner of the window, similar to how the California Coast theme works. I use the Hider plugin to hide and show the ribbon frequently, and while it isn't much trouble for me to hit a keyboard shortcut and show the ribbon when I need it, it would be cool to have the option to just hover and see it momentarily.

Edit: Also, what is the font being used in the README images? It looks neat :)

Display Problem with Obsidian Tags

The theme is not displaying some nested tags correctly in edit mode. They do display correctly in preview mode. If I had to guess, I think it may be related to the length of the tags.

Here is a screenshot of the display problem in edit mode:
Edit Mode Screen Shot with Display Problem
Here is a screen shot of the tags displaying correctly:
Preview mode displaying correctly

Two Customization Requests and a Bug

Hi,

Thanks for the great theme, really liking all the customization options. There's two more that I'd like to see added personally:

  • toggle to see the vault title/obsidian version at the top of the screen
  • toggle on/off the code block language popup that's in the bottom right hand corner

This is just how I'd like my vault to look but since others may want to keep it like it is, I suggest a toggle to turn them on and off as needed.

For the bug, when rendering a code block in preview, the first line is not aligned properly.

Aligned example from vanilla Obsidian (i.e. no plugins or other themes):
image

and with the theme:

image

Arrow points to the misaligned first line.

It's harder to see but the bug is also visible in #20.

Thanks!

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

Fenced Code Block on PDF

First of all thank you for your amazing Theme, i'm fall in love.

Just a little detail, when I used a code block, and export from dark mode to pdf , the font is unreadable.

eg.

here we can write code.  
or **strong** test

Screen Shot 2021-07-20 at 19 15 52

thank you.

Weird spacing and render with highlights in edit mode

I noticed there is some weird spacing (or is it intended?) in edit mode when dealing with highlights (==) - see picture below:

immagine

Moreover, text modifiers (e.g. bold, italics, etc.) are not rendered completely correctly (apart from the spacing problem):

immagine
immagine

I Also noticed that the spacing issue causes the highlighter to be "disconnected" in edit mode (more visible in dark mode):

immagine

Is this some kind of font-ligature stuff? How can I dsiable that?

Empty left ribbon

Hi,
When the them is activated, the left ribbon appears empty (see attached image).
It's both the case on Mac and iPad.
Capture d’écran 2021-08-12 à 12 43 11

Many thanks for the theme and hope you can fix this.
Fred

How do I put the top title bar on the left?

Hey, thank you for creating such a great theme. It's really beautiful beyond imagination. I try my best to imitate the style in your drawing. Now I encounter a problem. Put the top title bar on one side. I can't do what it looks like in your effect drawing. Does it no longer support this style? Thanks again. ❤️

Text colours aren't formatted when exporting to pdf from dark mode

First of all, thanks for making this beautiful theme. I really appreciate the effort being put into this project and hope to contribute in this small way.

I tried exporting a pdf and found out that the colors of the various elements aren't formatted before being sent for PDF export. Attached a copy of the same file as exported from both light mode and dark mode. Wrt light mode, the various text elements adopt the same colors as within the editor (expected behaviour). But for dark mode, this shouldn't be the case as it would lead to contrast issues and an unreadable document. I suppose we would have to add and assign a separate set of colors for this specific purpose.

Link to the above-mentioned pdf files

Scroll performance issues with this theme

This theme is really wonderful, but I seem to have some scroll performance issues with it.

There is weird scroll behaviour (on desktop, macos). It's a bit like lag, after you scroll the view will jump ahead slightly of wherever you scroll to. It doesn't matter if its a short document. And when you scroll, its as if it takes a second for the scroll bar to move, like its waiting. It feels as if there were some script that is updating the scroll position independently of your own scrolling, and it is always slightly out of sync.
This doesn't happen when i switch to another theme, so I believe it to be this one.

We were trying to figure it out in the discord: https://discord.com/channels/686053708261228577/702656734631821413/884074199382110238

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.