I want feedback on the theme I'm creating, currently working on customization options for properties (metadata-container)

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);

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