# States
# Pseudo classes
<div class="hover:c-red"></div>
To add any pseudo class to your style, just write it before the class
<div class="focus:active:bg-blue"></div>
You can combine several pseudo classes
foo:flex = .foo\:flex:foo {...}
In fact, everything you write will appear after the selector
h:fs-24 = .h\:fs-24:hover
f:bc-cyan = .f\:bc-cyan:focus
c:bold = .c\:bold:checked
But you must admit that writing hover or focus every time takes up a lot of space, so you can use the abbreviation
These abbreviations can be found in blick.states
# Dark mode
To make a certain style work only with a dark theme, you can add dark before the class
<div class="dark:c-white"></div>
It turns into
.dark .dark\:c-white {...}
That is, somewhere above, usually in the <body> or <html> , you need to add class="dark" for this to work
Or you can use autoTheme to have this class automatically added
*works only with cdn version
autoTheme: true
Add this line to your configuration
# Own keywords
You can also change the keyword dark , or the abbreviation for pseudo class to something else, for this you need to set the previous value to null in configuration and add a new one, the new value must be a function that returns a string
blick.config({
states: {
foo: ":hover"
dark: null,
dk: (selector) => ".dk " + selector
}
})