Thomasorus wiki

Moyō 模様

Moyō 模様 (pattern) is a collection of patterns in CSS I use for my websites. Most of them were created as the months passed and I tweaked them for my time tracker tool.

About the currentColor keyword

You will often see the currentColor value used in SVG patterns. currentColor is a not very known keyword that acts as a variable. It takes the color value of the current element and if it doesn't exist, the parent element.

It's important if you use themes for your website. For example on this website, I use two variables for the light and dark themes and the prefers-color-scheme mediaquery to activate the theme based on the user operating system preference.

By default text is black and background is white:

:root {
 --text: black;
 --background: white;

And the opposite for dark theme:

@media (prefers-color-scheme: dark) {
:root {
 --text: white;
 --background: black;

So in the first case, currentColor will be white and in the second case it will be black.

Using currentColor instead of directly reusing the var(--myValue) syntax allows the SVG patterns to be portable and agnostic. It's the same for the transparent keyword, as it allows a part of the pattern to use the color used in the background.

Demo using SVG


CSS Demo

Due to their base64 encoding, these patterns cannot change colors.