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 queries
    • Expressed as if the value was replacing * in @media * { }
  • Root class media queries
    • Expressed as if the value was replacing * in <html class="*">

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:

css()
<style lang="ts">
css({
  html: {
    color: '{color.gray.900}'
    padding: '{space.4}'
    '@dark': {
      color: '{color.gray.100}'
    }
    '@md': {
      padding: '{space.8}'
    }
  }
})
</style>
.postcss
html {
  color: $dt('color.gray.900');
  padding: $dt('space.4');
  @dark {
    color: $dt('color.gray.100');
  }
  @md {
    padding: $dt('space.8');
  }
}
.css
html {
  color: $dt('color.gray.900');
  padding: $dt('space.4');
}
@dark {
  html {
    color: $dt('color.gray.100');
  }
}
@md {
  html {
    padding: $dt('space.8');
  }
}

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})
  • class mode supports :root.{dark|light}.
Pinceau supports @nuxtjs/color-mode out of the box using 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.

Edit this page on GitHub
Table of Contents