hi_mayank, 30 days ago

now that light-dark is in all three browsers, i should write about it 🤔

basic setup:

html {  
 color-scheme: light dark;  
 &[data-theme=light] { color-scheme: light; }  
 &[data-theme=dark] { color-scheme: dark; }

 background-color: var(--theme-bg, Canvas);  
 color: var(--theme-fg, CanvasText);  
 …  
}  

tokens:

:scope {  
--theme-bg: light-dark(white, black);  
--theme-fg: light-dark(black, white);  
 …  
}  

components:

.button {  
 border-color: var(--theme-fg);  
 …  
}