Media queries
Pinceau makes it a breeze to declare your Media queries in your configuration and use them in your components and CSS files.
The media key in any tokens.config file is always reserved for them.
It also always comes with @dark and @light support.
Defining you media queries usually looks like this in your configuration:
defineTheme({
media: {
// @tablet
tablet: '(min-width: 768px)',
// @desktop
desktop: '(min-width: 1024px)',
// @sepia
sepia: ':root.sepia'
},
})
In this example you can see:
-
Regular media queriesExpressed as if the value was replacing * in@media * { }
-
Root class media queries
- Expressed as if the value was replacing * in
<html class="*">
- Expressed as if the value was replacing * in
Using your queries
These media queries will then be usable through all your app and reused across all Pinceau features.
The syntax between these is very similar:
<style lang="ts">
css({
html: {
color: '{color.gray.900}'
padding: '{space.4}'
'@dark': {
color: '{color.gray.100}'
}
'@md': {
padding: '{space.8}'
}
}
})
</style>
Color scheme mode
Pinceau supports two different modes for color scheme handling.
Toggle it using colorSchemeMode in your plugin options, it supports native or class.
- Will use
@media (prefers-color-scheme: {dark|light}) classmode supports:root.{dark|light}.
pinceau/nuxt module.
Compatibility
This @query syntax is also used by other toolings.
You can disable it using mediaQueries: false in your options to give the priority to other tooling.
This might be useful to give precedence over another tooling and use Pinceau as a theming provider only.