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

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

Open
holroy opened this issue Apr 12, 2024 · 2 comments
Open

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

holroy opened this issue Apr 12, 2024 · 2 comments

Comments

@holroy
Copy link

holroy commented Apr 12, 2024

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
Copy link

chrisgurney commented Apr 12, 2024

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
Copy link
Author

holroy commented Apr 12, 2024

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.

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

2 participants