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
Generated: February 4th, 2022