![jgrasp dark mode jgrasp dark mode](https://aws1.discourse-cdn.com/standard17/uploads/threejs/optimized/2X/3/34ffa90b7c20d98add47eab832432720a9896d89_2_500x1000.png)
The state of CSS these days is pretty dope, and CSS custom properties are one such example of aforementioned dopeness. This might normally be a huge pain, but with CSS custom properties, I realized I could adapt the paint worklet’s rendering logic to a user’s preferred color scheme with relative ease! Setting up the custom properties for the paint worklet It was then that I realized that the paint worklet wasn’t adapting to these preferences.
![jgrasp dark mode jgrasp dark mode](https://i.pinimg.com/736x/9f/0d/d0/9f0dd0f5ab4e0bfc39b20f079adf0618.jpg)
It could use a bit more dressing up-and that’s certainly on the agenda-but this here is a damn good start!Īfter I finished the paint worklet, I went on to work on other parts of the website, such as a theme switcher for light and dark modes. My first order of business was to make a paint worklet that was a randomly generated Final Fantasy-style landscape I named overworld.js: A randomly generated 8-bit style landscape, made possible by the CSS Paint API! I’ve been overdue for a website overhaul, and I decided to go with a Final Fantasy II theme. Recently, I found out that I can combine both of these really cool things with CSS custom properties in such a way that a paint worklet’s appearance can be tailored to fit the user’s preferred color scheme! Setting the stage The other cool thing is the prefers-color-scheme media query and how you can use it to adapt to a user’s preference for light or dark modes. I did a talk on it, and made a little gallery of my own paint worklets. One of the coolest things I’ve been messing with in the last couple years is the CSS Paint API.