Since macOS 10.14 Mojave different visual modes like dark and light are available for the desktop. Native app developers can use named system colors to get the best fit for both semantic colors (like “window background”, “secondary label”) or plain colors (like “red”, “green”).
To adopt these colors for web development it is useful to get access to their color values for use in CSS. That’s what my new project DesertColor at GitHub is providing.
dessertcolor.css contains these extracted colors. With <html data-mode="dark"> the dark variant is used, otherwise the light one. The colors can be accessed by their name:
body {
color: var(--label-color);
background: var(--control-background-color);
}But be aware, that Dark Mode in Mojave is not only about plain colors and that there is more like “Desktop Tinting” or “Translucency”.
Source Code
Published on September 25, 2018