:root { /* this has to be set to switch between light or dark */ color-scheme: light dark; --light-bg: white; --light-color: black; --light-link-color: red; --light-code: red; --dark-bg: black; --dark-color: white; --dark-link-color: red; --dark-code: red; } * { background-color: light-dark(var(--light-bg), var(--dark-bg)); color: light-dark(var(--light-color), var(--dark-color)); } code { color: light-dark(var(--light-code), var(--dark-code)); } .light { /* forces light color-scheme */ color-scheme: light; } .dark { /* forces dark color-scheme */ color-scheme: dark; } .hidden { display: none; } /* * Assumes "dark" is a class added to your or tag * when dark mode is active. */ .dark .dark\:hidden { display: none; } .dark .dark\:block { display: block; }