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


Initially published: December 12th, 2020
Generated: February 4th, 2022
Statistics for: Moyo Time spent
Time spent
10 hours total
week 50 of 2020
Last update
week 9 of 2021
All times entries for this page