Tokenise your styles with variable layers. Eg: put a class on your body tag for each theme, eg: dark-mode, high-contrast

Then define your components by abstract style variables, eg: button-color, heading-weight,

Then define the style variables for each theme:

body { –button-color: green; }

body.dark-mode { –button-color: blue; }

button { backgroud: var(–button-color); }

Then all you need to do is a simple JS function to set the appropriate theme class on your document body!

This way your components are compliant to your style guide, without needing to know the implementation details of your themeing Very SRP, much Demeter, such OCP

Apologies for psudocode, LMK if you have any furthers :)