Color (ctx-c)

Basic Usage

Define a CSS variable in the element's class using the format ctx-c-${name}_${color}. This creates a CSS variable named ctx-c-${name} with the value ${color}. Subsequent class entries within this element can then use ctx-c-${name} as a color value.

loading

Opacity

The method of controlling opacity in unocss is also applicable in ctx-c. You can append the opacity value to the preset name when defining or using it.

Additionally, you can modify the opacity of properties using ctx-op-${name}-${num} for elements that use ctx-c-${name}, with a lower priority compared to directly appending a suffix to the property.

loading

Brightness

You can control the brightness of colors by adding a suffix -${num} after properties using ctx-c-${name}. The brightness is based on 500, where smaller values make the color brighter and larger values make it darker.

Additionally, you can modify the brightness of properties using ctx-deg-${name}-${num} for elements that use ctx-c-${name}, with a lower priority compared to directly appending a suffix to the property.

Note

The actual range of adjusted color brightness will be limited between 15% and 95%.

loading

Reverse Brightness

When using the ctx method to control color brightness, you can use ctx-r-y to invert the brightness, making the color brighter with larger values and darker with smaller values. Using ctx-r-${name}-y allows you to specify the inversion of brightness for a particular color name only.

If you use ctx-r-n, it indicates that the inversion should be canceled.

loading

Multiple Assignment

Color variables allow you to assign values using other color variables, which makes your colors more flexible, but also more complex.

loading

Obtaining Raw CSS Color Variables

The preset provides the resolveCtxColor method, which can directly retrieve the value of variables generated by ctx-c-${name}_${color}. This might assist you in defining global color variables.

The prefix ctx-c- is optional. If color is a theme color, you must pass unocss's theme as the second parameter.

import { defineConfig, presetUno } from 'unocss';
import { presetCtx, resolveCtxColor } from 'unocss-preset-ctx';

export default defineConfig({
  presets: [presetUno(), presetCtx()],
  preflights: [
    {
      getCSS: ({ theme }) => {
        const ctxColor = resolveCtxColor('tt_primary', theme);
        if (ctxColor) {
          return `
            :root {
              ${Object.entries(ctxColor).map(([k, v]) => `${k}: ${v};`).join('\n')}
            }
          `;
        }
      },
    },
  ],
});