Inconsistent coloring of reset buttons on `variable-themed-color`

[zamsyt]

Light theme	Dark theme

I take it the intention is probably to distinguish the dark and light buttons. But the execution seems poor. By default:

• Dark button in light theme has poor contrast.
• There's no distinction between the buttons in dark theme.

Editing the styles gets confusing due to use of the class names theme-light and theme-dark, which are normally only used on body, resulting in strange interactions. E.g. for .theme-dark .themed-color-wrapper button, some[^1] variables have their light theme values for half the buttons.

[^1]: only the ones declared on .theme-dark/.theme-light - but not ones referring to them from body

It gets even more confusing if you try to modify --interactive-normal or --text-normal with style settings:

https://github.com/mgmeyers/obsidian-style-settings/assets/102934832/48ce7c19-06f6-404a-8457-b6ff6218723b

Snippet used in the screen recording:

/* @settings
name: Test theme
id: test-theme
collapsed: false
settings:
-
  id: interactive-normal
  title: "interactive-normal"
  type: variable-themed-color
  format: hex
  default-dark: '#363636'
  default-light: '#ffffff'
-
  id: text-normal
  title: "text-normal"
  type: variable-themed-color
  format: hex
  default-dark: '#dadada'
  default-light: '#222222'
*/

Solution

I think the theme-dark and theme-light classes on the elements under .themed-color-wrapper should be changed to different ones that don't conflict with their regular use.

If we want to enable independent styling of the dark/light buttons in a generalizable way (that other plugins could adopt), I think this should be done by having classes on the button elements directly (e.g. .mod-dark/.mod-light - similar to the existing .mod-cta and .mod-warning). Styling could be left to themes if they want to, but if you want to style the buttons by default, you could ship css such as this with the plugin:

.theme-dark {
  --button-light-background: var(--color-base-100);
  --button-dark-background: var(--color-base-30);
  --button-light-color: var(--color-base-00);
  --button-dark-color: var(--color-base-100);
}

.theme-light {
  --button-light-background: var(--color-base-00);
  --button-dark-background: var(--color-base-70);
  --button-light-color: var(--color-base-100);
  --button-dark-color: var(--color-base-00);
}

button.mod-light {
  background: var(--button-light-background);
  color: var(--button-light-color);
}

button.mod-dark {
  background: var(--button-dark-background);
  color: var(--button-dark-color);
}