The interface is built on Bootstrap CSS. With a ton of custom utility like classes. On heavy custom pages, such as the sitemap index page, we put CSS definitions in the page. This is to reduce the overall CSS size and reduce the bleeding impact on other pages. We know this is not ideal, but it ships.
Cliperado's front end uses the prefers-color-scheme media, to auto set the color scheme. Because we don't want our website visitor to have to choose their preferred color.
For the app interface, we want to give the user the option to choose between dark or light mode, independent of their prefers-color-scheme. We want this because the users' help or marketing pages might not support dark mode. And they need to be able to check if the clips and markup look good in both color schemes, without leaving Cliperado.
We've switched to Tailwind CSS. Tailwind has great support for dark mode out of the box.
We started with plain Tailwind, and only copied over the absolute minimum number of classes from our old setup. Our own utilities are replaced with Tailwind native utilities, as much as possible.
We've replaced all our own layout utilities with Tailwind. In the process, we moved away from floats in favor of flexbox.
CSS icons need special attention. Glyphicons are replaced with inline Heroicons. Custom icons are cleanup to allow the use of the "currentColor" for the fill and stroke.
Cliperado is not a single Page App. It uses old school server reloads that render HTML and push it to the client. On interaction heavy pages, such as the Actions Editor, we use Vue. On most other pages, we use plain old jQuery. To clean this up, and more easily distinguish between style class and selector classes, we started to prepend selector classes with "js-".
Actually implement dark mode for the app side.
Our interface consists of 3 parts, the background color, the foreground color and separator/ border colors.
We'll start with implementing the color scheme switcher. Once we have this, it is super easy to test if the dark and light mode look good.
We'll create a test page, with all the different background and foreground color combinations, including all the icons. This will probably result in 5 to 10 general color combinations. We'll either implement these with a global find and replace to inline the dark:mode color options, or we'll create some color utility classes.