Exposing theme colors so my own elements can use them in both light & dark mode

[metamec]

Thanks for this great theme. I think it's the best Hugo one there is.

Let's say I write a shortcode which inserts a new page element: A div which contains more product information.

I can duplicate values from theme.scss so that this is styled the same as the base theme, but how do I make it work with dark mode too?

[metamec]

Figured it out (scss) partly I guess.

Redefine the required colors:

$text-color: #222;
$text-color-dark:  darken(invert(#222), 20);

Use nesting to handle dark mode:

.product-box .item-name {
    color: $text-color;
    transition: all 0.2s ease-in-out;

    .dark-mode & {
        color: $text-color-dark;
    }
}

I figured I'd post in case it helps anyone else. I'm gonna see if I can find the transition effect and replicate it exactly.

Edit: I realised that transition: all 0.2s ease-in-out; is all that's required for transition uniformity. Sorry, I should have really spent longer figuring this out before posting so I'll close this. Hopefully someone else will find the info useful anyway.