Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Created a fun contrast for the side bar #173

Open
saltnpixels opened this issue Jan 10, 2025 · 0 comments
Open

Created a fun contrast for the side bar #173

saltnpixels opened this issue Jan 10, 2025 · 0 comments

Comments

@saltnpixels
Copy link

saltnpixels commented Jan 10, 2025

I discovered obsidian recently and of course I have been tinkering and completely stopped actually writing notes lol.
This is a great theme!! Well done. the font sizes are properly done. Some other themes don't seem to get the font sizing well.
Anyways I was bored and wanted it to match Things a bit more. I cleaned up the left side into a way that I like :)

I made a contrasting look and removed the lines at the top by the tabs so the window control buttons are seamless with the sidebar.
I also gave breathing room to the H2 when it has a line beneath it. Otherwise the text is too close to that line.
Feel free to use.

For css snippets:


.markdown-source-view.mod-cm6 .cm-content > .HyperMD-header-2 {
	margin-bottom: 8px !important;
}

body  :is(.mod-left-split, .side-dock-ribbon):not(.is-collapsed){
	--dark-background: #181C20 ;
	--titlebar-background-focused: var(--dark-background);
	--titlebar-background: var(--dark-background);
	--icon-color: rgba(255, 255, 255, 0.775);
	--icon-color-focused: white;
	--ribbon-background: var(--dark-background);
	--tab-text-color-focused: white;
	--icon-color-hover: white;
	--divider-color: var(--dark-background);
	--tab-outline-color: var(--dark-background);
	--background-modifier-hover: rgba(255, 255, 255, 0.075);
	--tab-text-color-focused-active-current: white;
	--background-secondary: var(--dark-background);
	--nav-item-color: rgba(255, 255, 255, 0.75);
	--nav-item-background-hover: transparent;
	--nav-item-color-hover: rgba(255, 255, 255, 0.75);
	--nav-item-color-active: white;
	--nav-item-background-active: var(--color-accent);
	--divider-color: rgba(255, 255, 255, 0.1);
	--vault-profile-color: rgba(255, 255, 255, 0.75);
	--vault-profile-color-hover: white;
	--background-modifier-color: rgba(255, 255, 255, 0.075);
	--background-modifier-border-focus:  color-mix(in srgb, var(--color-accent) 70%, transparent)
}

.side-dock-ribbon.mod-left:before {
	transition: background .5s;
}

The result

Screenshot 2025-01-09 at 11 38 41 PM
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant