How to configure a custom.css for dark theme?

[ArvindRSingh]

I can override the default colors of a light theme by modifying assets\css\custom.css with

:root {
    /* --hbs-navbar: #38B2AC ; */
    /* --hbs-navbar-text: var(--color-primary-text) */
    --hbs-background: #b0b3b0;
    --hbs-surface: #bbc3c4;
    --hbs-primary: #1a5a57;
    --color-eureka: #630d0d;
    --color-primary: #112396!important;
    --color-secondary: rgba(28,28,30,1.00)!important;
    --color-tertiary: rgb(0, 0, 131)!important;
    --color-primary-text: rgba(143, 74, 74, 0.85);
    --color-secondary-text: rgba(0, 255, 85, 0.7)!important;
    --color-tertiary-text: rgba(255,255,255,0.55);
    --hbs-primary-text-on-background: rgb(138, 0, 108)!important;
}

But how to specify similar overrides for a dark theme?
I have tried

.dark {
--hbs-primary-text-on-navbar: #18300f;

and

--hbs-primary-text-on-navbar-dark: #ff0000;

but doesn't make any difference in the dark theme.

[ArvindRSingh]

Referring to #189, ".mode-dark" isn't working either.
Specify ".mode-light" or ".mode-dark" as a style block and the colors are up to your creativity.

.mode-light {
    /* --hbs-navbar: #38B2AC ; */
    /* --hbs-navbar-text: var(--color-primary-text) */
    --hbs-background: #b0b3b0;
    --hbs-surface: #bbc3c4;
    --hbs-primary: #1a5a57;
    --color-eureka: #630d0d;
    --color-primary: #112396!important;
    --color-secondary: rgba(28,28,30,1.00)!important;
    --color-tertiary: rgb(0, 0, 131)!important;
    --color-primary-text: rgba(143, 74, 74, 0.85);
    --color-secondary-text: rgba(0, 255, 85, 0.7)!important;
    --color-tertiary-text: rgba(255,255,255,0.55);
    --hbs-primary-text-on-background: rgb(138, 0, 108)!important;
}

.mode-dark {
    --hbs-background-dark: #1acc1a;
    --hbs-primary-text-on-navbar-dark: #ff0000;
    --hbs-surface-dark: #cddf31!important;
    --hbs-primary: #1a5a57;
    --color-eureka: #630d0d;
    --color-primary: #112396!important;
    --color-secondary: rgba(28,28,30,1.00)!important;
    --color-tertiary: rgb(0, 0, 131)!important;
    --color-primary-text: rgba(143, 74, 74, 0.85);
    --color-secondary-text: rgba(0, 255, 85, 0.7)!important;
    --color-tertiary-text: rgba(255,255,255,0.55);
    --hbs-primary-text-on-background: rgb(155, 156, 80)!important;
}

[razonyang]

@ArvindRSingh Sorry for the late reply.

Yep, the answer of #189 won't work, since the theme use data attribute instead of class.

[data-mode=light] {
    --hbs-background: red;
}

[data-mode=dark] {
    --hbs-background: green;
}