Hi everyone!!
I decided to combine all of my own CSS snippets in to an obsidian theme and share it with the community, I’m trying to create a very clean theme by default that has some cool customization options using the style setting plugin.
I’m currently adding new color schemes for the properties, here are some of the schemes I have created, I’m not sure what others to add.
Ocean + Space-blue + Outline (My default)
Chromium + Industrial-orange + Mono-space font + Dashed separator
Emerald + Outline
Industrial-orange + Ocean + Dashed separator
Feedback is appreciated! If you have any idea for other good color-schemes to use, please let me know.
1 Like
Here is the standalone code to use in a css snippet:
.theme-dark {
--property-label-color: var(--text-normal);
--darker-property-color: var(--text-muted);
--metadata-label-text-color: var(--property-label-color);
/* change this bellow */
--property-h: 201;
--property-s: 54%;
--property-l: 74%;
--darker-property-color: hsl(211, 57%, 57%);
--property-input-color: hsl(40, 84%, 75%);
--property-hsl: var(--property-h), var(--property-s), var(--property-l);
--property-label-color: hsl(var(--property-hsl));
--property-input-color: var(--text-accent);
--metadata-input-text-color: var(--property-input-color);
--checkbox-color: var(--property-input-color);
.metadata-container {
--link-color: var(--property-input-color);
--link-external-color: var(--property-input-color);
}
/* sidepanel icon color change */
[data-type="file-properties"].is-active .workspace-tab-header-inner,
[data-type="all-properties"].is-active .workspace-tab-header-inner {
background-color: hsla(var(--property-hsl), 0.15);
}
.mod-left-split .workspace-tab-header[data-type="all-properties"] .workspace-tab-header-inner-icon {
color: var(--property-label-color);
}
}
.theme-dark {
.metadata-property .metadata-input-text,
.metadata-property .metadata-input-number,
.metadata-property .multi-select-container {
color: var(--metadata-input-text-color);
}
.metadata-property-key .metadata-property-icon {
--icon-color: var(--darker-property-color);
}
}
.metadata-add-button {
color: var(--darker-property-color);
cursor: pointer;
}
.metadata-add-button:hover {
color: var(--property-label-color);
}
New
March 20, 2024, 9:15am
3
Love the idea of making the properties an integral part of the note! I didn’t even think of that and I usually close the properties. But in certain use cases this is great. Thanks for sharing!
1 Like
