Defining variables within dictionary CSS doesn't work well

[Casheeew]

Currently defining something such as:

:root {
    --red: #C00000;
    --light-red: #D96666;
    --gray: #888;
    --hinshi-mark: #444;
    --kakomi-border: #999;
    --metadata-background: #999;
    --example-katsuyou-mark: #666;
    --mark-border: #660;
    --gogi-panel-header: #F9E6E6;
    --ruigo-panel-background: #444;
    --ruigo-panel-border: #AAA;
    --appendix-title-background: #633;
    --gendai-mark: #888;
}

or font-family only seems to work in the Yomitan Popup CSS and not Dictionary CSS.

This may be due to the dictionary CSS having to be scoped to the dictionary.

[Kuuuube]

Dictionaries intentionally dont have access to :root to disallow modifying yomitan's css.

Not sure what a good solution here would be.

[kiwakiwaa]

would it be possible for you to add two classes like '.light-mode' and '.dark-mode' that you could access within the dictionary styling?

[Kuuuube]

When I said "dont have access" I really meant "cant change". You can access Yomitan's css variables and document data attributes. Which includes the light and dark mode that are set for the entire page.

Though I'd be wary of using the css attributes since those can change or even be removed at any time.

For light and dark mode you should also be careful since when exporting to Anki, that data will not be included.