Integration with UnoCSS

Here is guide how to integrate Vuestic UI colors and breakpoints into UnoCSS configuration.


Before we start with integration, please ensure you have both UnoCSS and Vuestic UI installed. If that's not the case - here are installation guide for the Vuestic UI and for the UnoCSS.

Also you need to install unocss-preset-theme preset.

npm i -D unocss-preset-theme


Configure configuration file for the UnoCSS as shown below.

// unocss.config.*
import { defineConfig, presetUno } from 'unocss'
import presetTheme from 'unocss-preset-theme'
import { colorsPreset, thresholdsPreset } from 'vuestic-ui'

const convertNumbersToCssUnits = (obj, unit = 'px') =>
  Object.entries(obj).reduce((acc, [key, value]) => ({
    [key]: `${value}${unit}`,
  }), {})

export default defineConfig({
  theme: {
    colors: colorsPreset.light,
    breakpoints: convertNumbersToCssUnits(thresholdsPreset),
  presets: [
      dark: 'media',
      theme: {
        dark: {
          colors: colorsPreset.dark,