mgmeyers / obsidian-style-settings

A dynamic user interface for adjusting theme, plugin, and snippet CSS variables within Obsidian
GNU General Public License v3.0
1.01k stars 94 forks source link

How to use `var(--some-color)` as `default` setting for a color #159

Open holroy opened 1 month ago

holroy commented 1 month ago

As part of my settings for a plugin I've tried using:

  -
    id: ht21-line
    title: Line width and color
    type: heading
    level: 3
  -
    id: ht21-border-width
    title: Line width
    description: Width of line between rows
    type: variable-number
    default: 1
    format: px
  -
    id: ht21-border-color
    title: Line color
    description: Color of line between rows
    type: variable-color
    format: hex
    opacity: false
    default: var(--color-base-30)
  -

And with a corresponding setting for :root:

    --ht21-border-width: 1px;
    --ht21-border-color: var(--color-base-30);

However, when I view this in Obsidian it only shows as:

image


So I'm wondering whether my syntax is wrong, or what's happening since this doesn't work. In #62 its like it should be working, unless there is something trivial I'm missing out on. Can you help explain why I can't see the default color selector for those based upon variables? Or how should I write for this to be mostly compliant with using variables, which would follow a theme, in my default settings?

chrisgurney commented 1 month ago

I'm in the middle of adding support to my plugin as well, and I'm wondering the same thing.

Started a thread about this (before I saw this issue) on the Obsidian Discord here: https://discord.com/channels/686053708261228577/702656734631821413/1228351103486394429

I first attempted to set an empty default (it only accepts '#') but the user can't reset to it.

Then I tried using Obsidian's variables:

default-light: var(--background-primary) or default-light: var(--color-base-00)

...but I am getting this error in the console:

Error: Toolbar background missing default light value, or value is not in a valid color format

If variables can't be supported, as mentioned in the Discord thread, if the user had some way of unsetting the color in the Settings UI, and we could put in empty defaults, that might achieve the same result too... and put less work on developers to figure out those default variable values should be.

holroy commented 1 month ago

If variables can't be supported, as mentioned in the Discord thread, if the user had some way of unsetting the color in the Settings UI, and we could put in empty defaults, that might achieve the same result too... and put less work on developers to figure out those default variable values should be.

I found that if I actually set the CSS variables using the var(--some-color) syntax, and then "hardcode" the color in the settings for Style settings, it'll actually be able to use the variable until you set the color with style settings, and if you reset to default settings it restore the usage of the variables. The only bad thing with this workaround, is that the color shown within style settings is not correct if you change the variable by changing theme or similar, as it's still being "hardcoded".

So I would still love for var(--some-color) to be understood as a default value.