# Modify and extend the theme

## introduce

As a flexible generator, of course the entire system theme can also be extended:

> By default, only 2 themes `light` and `dark` are included

They have their own selectors and injected variables, and you can modify them or extend them with your own theme

## Modify the original theme

```js filename="icestack.config.cjs"
const { sharedExtraColors, sharedExtraVars } = require('@icestack/ui/defaults')
// sharedExtraColors is the default extra neutral color, including base-100, base-200 .... base-1300
// sharedExtraVars contains some common non-color CSS variables

/**
  * @type {import('@icestack/ui').Config}
  */
const config = {
   outdir: './my-ui',
   base: {
     //Add a new theme in themes and declare the selector
     themes: {
       //You can make changes here
       // default theme, you can update their selector by change the option
       light: {
         selector: ':root'
       },
       dark: {
         selector: '[data-mode="dark"]'
         // selector: '.dark'
         // If you use the class name selector here, you must put `dark` into your tailwindcss content:
         // { raw: 'dark' }
       }
     }
   }
}
module.exports=config
```

## Expand new themes

```js filename="icestack.config.cjs"
const { sharedExtraColors, sharedExtraVars } = require('@icestack/ui/defaults')
// sharedExtraColors is the default extra neutral color, including base-100, base-200 .... base-1300
// sharedExtraVars contains some common non-color CSS variables

/**
  * @type {import('@icestack/ui').Config}
  */
const config = {
   outdir: './my-ui',
   base: {
     //Add a new theme in themes and declare the selector
     themes: {
       // your new theme can be written 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
```

## Construct

After modifying the configuration, execute the `icestack build` command to rebuild `my-ui`

Then you will find that with the new theme and related changes, a new `my-ui` product `my-ui/css/base/index.css` has appeared.

## Demo

https://nuxt.icebreaker.top/

## Examples

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