Theme

Theme allows you to add or replace default values for colors, breakpoints, animations and more.

The theme is created using the theme object inside uno.config.js.

import { defineConfig, presetWind3 } from "unocss";

export default defineConfig({
  presets: [presetWind3()],
  theme: {
    colors: {
      "very-cool": "#0000ff", // class="text-very-cool"
    },
  },
});

Colors can be an object if you want something that works like bg-blue-500 for example:

colors: {
      'very-cool': {
        50: '#0000ff',
        100: '#3333ff',
        // and so on
      }
    }

Breakpoints can be defined if you want to change the defaults or add new devices.

In the next lessons we’ll look at theme and colors, breakpoints and animations.