functional theme configuration

[JasKang]

Can the theme property be provided in a function form to achieve configuration inheritance?

// preset -> theme
type ThemeConfig<T> = T | ({ extend }: ThemeCtx) => T

const theme: ThemeConfig = {
  colors,
  accentColor: ({ extend }) => ({
    // Supports function form
    ...extend('colors'),
    auto: 'auto',
  }),
}

Why

When a preset has a large number of themes that need to be configured, some of these configurations are mutually inherited by default. In such cases, users need to write a lot of repetitive configurations.

For example, in the following example, there is a preset with a colors configuration, and accentColor, borderColor, and fill all inherit from the colors configuration.

// preset -> theme
const colors = {
  black: '#000',
  white: '#fff',
  ....
}

const theme = {
  colors: colors,
  accentColor: {
    ...colors,
    auto: 'auto',
  },
  borderColor:{
    ...colors,
    DEFAULT: colors.gray.200,
  },
  fill: {
    ...colors,
    none: 'none',
  }
}

When a user uses this preset and needs to customize the configuration, they need to write each color-related configuration (accentColor, borderColor, fill) separately.

For example:

// unocss.config.ts
export default defineConfig({
  theme: {
    colors: {
      color1: 'color1'
      color2: 'color2'
    },
    accentColor: {
      color1: 'color1'
      color2: 'color2',
      auto: 'auto',
    },
    borderColor:{
      color1: 'color1'
      color2: 'color2',
      DEFAULT: colors.gray.200,
    },
    fill: {
      color1: 'color1'
      color2: 'color2',
      none: 'none',
    }
  },
  presets: [
    myPreset(),
  ],
})

Features

In theory, a preset should be able to achieve the following: developers only need to configure colors to achieve synchronized changes in accentColor, borderColor, and fill. It should also be possible to override these configurations.

For example:

// preset -> theme
const theme = {
  colors,
  accentColor: ({ extend }) => ({
    // Supports function form
    ...extend('colors'),
    auto: 'auto',
  }),
  borderColor: ({ extend }) => ({
    // Supports function form
    ...extend('colors'),
    DEFAULT: colors.gray.200,
  }),
}

// unocss.config.ts
const theme = {
  colors: {
    color1: 'color1',
    color2: 'color2',
  },
  borderColor: ({ extend }) => ({
    ...extend('colors'),
    DEFAULT: 'transparent',
  }),
}

[zyyv]

We have this configration key.

unocss/packages/core/src/types.ts

Lines 415 to 420 in 7f3f1d8

	/**
	* Custom functions mutate the theme object.
	*
	* It's also possible to return a new theme object to completely replace the original one.
	*/
	extendTheme?: Arrayable<ThemeExtender<Theme>>

You can use this extends your theme or override it.