# 修改和扩展主题

## 介绍

作为一个灵活的生成器，当然整个系统主题也可以进行扩展:

> 默认情况下，只包含 `light`,`dark` 2种主题

它们有各自的选择器和注入变量，你可以修改它们或者扩展出你自己的主题

## 修改原有主题

```js filename="icestack.config.cjs"
const { sharedExtraColors, sharedExtraVars } = require('@icestack/ui/defaults')
// sharedExtraColors 是默认的额外中性色，包含 base-100,base-200 .... base-1300
// sharedExtraVars 包含一些通用的非颜色 CSS 变量

/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  base: {
    // 在 themes 添加新的 theme ,并声明选择器
    themes: {
      // 这里可以进行修改
      // default theme, you can update their selector by change the option
      light: {
        selector: ':root'
      },
      dark: {
        selector: '[data-mode="dark"]'
        // selector: '.dark'
        // 如果你这里使用类名选择器，那你就必须把 `dark` 放入你的 tailwindcss content 中:
        // { raw: 'dark' }
      }
    }
  }
}
module.exports = config
```

## 扩展新的主题

```js filename="icestack.config.cjs"
const { sharedExtraColors, sharedExtraVars } = require('@icestack/ui/defaults')
// sharedExtraColors 是默认的额外中性色，包含 base-100,base-200 .... base-1300
// sharedExtraVars 包含一些通用的非颜色 CSS 变量

/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  base: {
    // 在 themes 添加新的 theme ,并声明选择器
    themes: {
      // your new theme can be write here
      // cupcake theme
      cupcake: {
        types: {
          primary: '#65c3c8',
          secondary: '#ef9fbc',
          accent: '#eeaf3a',
          neutral: '#291334'
        },
        extraColors: {
          ...sharedExtraColors.light,
          'base-100': '#faf7f5',
          'base-200': '#efeae6',
          'base-300': '#e7e2df',
          'base-content': '#291334'
        }
      },
      // nord theme
      nord: {
        types: {
          primary: '#5E81AC',
          secondary: '#81A1C1',
          accent: '#88C0D0',
          neutral: '#4C566A',
          'neutral-content': '#D8DEE9',
          info: '#B48EAD',
          success: '#A3BE8C',
          warning: '#EBCB8B',
          error: '#BF616A'
        },
        extraColors: {
          ...sharedExtraColors.light,
          'base-100': '#ECEFF4',
          'base-200': '#E5E9F0',
          'base-300': '#D8DEE9',
          'base-content': '#2E3440'
        }
      },
      // dracula theme
      dracula: {
        types: {
          primary: '#ff79c6',
          secondary: '#bd93f9',
          accent: '#ffb86c',
          neutral: '#414558',
          info: '#8be9fd',
          success: '#50fa7b',
          warning: '#f1fa8c',
          error: '#ff5555'
        },
        extraColors: {
          ...sharedExtraColors.dark,
          'base-100': '#282a36',
          'base-content': '#f8f8f2'
        }
      },
      // dim theme
      dim: {
        types: {
          primary: '#9FE88D',
          secondary: '#FF7D5C',
          accent: '#C792E9',
          neutral: '#1c212b',
          'neutral-content': '#B2CCD6',
          info: '#28ebff',
          success: '#62efbd',
          warning: '#efd057',
          error: '#ffae9b'
        },
        extraColors: {
          ...sharedExtraColors.dark,
          'base-100': '#2A303C',
          'base-200': '#242933',
          'base-300': '#20252E',
          'base-content': '#B2CCD6'
        }
      }
    }
  }
}
module.exports = config
```

## 构建

修改好配置之后，执行 `icestack build` 指令, 重新构建 `my-ui`

接着你会发现，新的主题，相关的改动就已经出现新的 `my-ui` 产物 `my-ui/css/base/index.css` 了，

## Demo

https://nuxt.icebreaker.top/

## Examples

https://github.com/sonofmagic/icestack/tree/main/examples/nuxt-admin-app
