With proper Theming support landing in SilverBullet core, a few pointers for those who “hacked” it in the past.
--root-background-color and the accent but not, say, the top bar or the pickers, those now follow your colors instead of the old defaults. That usually looks better; check that it does for you. Theming/Variables gives each variable’s default, with the base variables it uses.html { … } rules now apply in dark themes too. Before, the built-in dark mode rules out-ranked a plain html rule, so a variable that the dark palette also set only changed in light mode. Now any rule beats the built-in defaults. If a rule was meant for light mode only, wrap it in html[data-sb-scheme="light"] { … }. Rules under html[data-theme="dark"] keep working as before.Library/, tagged meta/theme with a scheme, as described in Theming/Creating a Theme. It then shows up in the theme picker, applies only while it’s picked, and doesn’t stack on top of other themes. If you had light and dark variants, make two themes and link them with counterpart.!important, html:root and doubled [data-theme] selectors still work, but SilverBullet’s defaults no longer need to be out-ranked. Plain html { … } is enough.data-theme to data-sb-scheme. html[data-sb-scheme="dark"] and html[data-sb-scheme="light"] are the way to target dark or light themes now. data-theme has the same value and still works for now, but is deprecated.These are gone, mostly because nothing used them any more: --action-button-active-color, --editor-command-button-background-color, --editor-command-button-border-color, --editor-command-button-color, --editor-command-button-hover-background-color, --editor-command-button-meta-color, --editor-panels-bottom-button-active-background-image, --editor-panels-bottom-button-background-image (the find bar's buttons now look like every other button), --editor-wiki-link-color, --modal-hint-inactive-background-color, --modal-hint-inactive-color and --notifications-background-color. Setting them does nothing.
editor.setUiOption("darkMode", value) still works but is deprecated, and logs a warning. When the active theme’s scheme doesn’t match, it picks a theme for this device: the active theme’s counterpart, or SilverBullet Light or Dark. Use the theme API instead, for example theme.setDeviceTheme("Library/Std/Themes/SilverBullet Dark").editor.getUiOption("darkMode") still returns whether the active theme is dark.data-sb-scheme on html (data-theme is a deprecated alias). Don’t set either: SilverBullet sets them from the active theme..client/components.css themselves, without the customStyles UI option, now get only data-sb-scheme, data-theme and color-scheme, not the dark colors. Build their stylesheet with panelStyles() from @silverbulletmd/silverbullet/ui, which includes a <div id="sb-theme" hidden> that the panel fills with the theme, and refills when the theme changes.