import CodeRender from '../../../components/CodeRender'

# Modify and expand color types

## Modify original color

```js filename="icestack.config.cjs"
/**
  * @type {import('@icestack/ui').Config}
  */
const config = {
   outdir: './my-ui',
   //Modify base
   base: {
     // theme
     themes: {
       // Override the color in light mode
       light: {
         types: {
           primary: '#eb2f96'
         }
       },
       // You can also override the performance in dark mode
       dark: {
         types: {
           primary: '#cb2b83'
         }
       }
     }
   }
}
module.exports=config
```

You pass in a color string and it will be handed over to [`ant-design-colors`](https://github.com/ant-design/ant-design-colors) for automatic color generation to calculate Colors of `hover`, `active` and other states

Of course, you can also pass in an `object` to accurately control the color in all states:

```js filename="icestack.config.cjs"
/**
  * @type {import('@icestack/ui').Config}
  */
const config = {
   outdir: './my-ui',
   //Modify base
   base: {
     // theme
     themes: {
       // Override the color in light mode
       light: {
         types: {
           primary: {
             //There are four colors in total, the name of the key is the css variable name
             primary: '#1677ff',
             'primary-content': '#ffffff',
             // Mainly the above two colors, hover and active colors are used for some components, such as `button`
             'primary-hover': '#4096ff',
             'primary-active': '#0958d9'
           }
         }
       }
       // dark:{}
     }
   }
}
module.exports=config
```

After the modification is completed, execute `icestack build` to build.

## Expand more colors

```js filename="icestack.config.cjs"
/**
  * @type {import('@icestack/ui').Config}
  */
const config = {
   outdir: './my-ui',
   //Modify base
   base: {
     themes: {
       light: {
         types: {
           // auto generate colors
           info: '#13c2c2',
           secondary: '#2f54eb'
         }
       },
       dark: {
         types: {
           // is dark: true
           // [string, boolean|options]
           info: ['#13c2c2', true],
           // full control
           secondary: {
             secondary: '#2f54eb',
             'secondary-content': '#ffffff',
             'secondary-hover': '#263ea0',
             'secondary-active': '#5273e0'
           }
         }
       }
     }
   }
}
module.exports=config
```

## Construct

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

Then you will find that the new color theme, covering the original theme color, and related changes have already appeared in the new `my-ui` product.

Then you can use:

```js
'btn-secondary', 'badge-secondary'

'btn-info', 'badge-info'
```

This is the class name.

## Demo

<CodeRender className='space-x-2' code={`<button class="btn btn-info">Info</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info btn-outline">Info Outline</button>
<button class="btn btn-secondary btn-outline">Secondary Outline</button>
`}></CodeRender>

```html
<button class="btn btn-info">Info</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info btn-outline">Info Outline</button>
<button class="btn btn-secondary btn-outline">Secondary Outline</button>
```

<CodeRender className='space-x-2' code={`<div class="badge badge-info">info</div>
<div class="badge badge-secondary">secondary</div>
<div class="badge badge-info badge-outline">info outline</div>
<div class="badge badge-secondary badge-outline">secondary outline</div>
`}></CodeRender>

```html
<button class="btn btn-info">Info</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info btn-outline">Info Outline</button>
<button class="btn btn-secondary btn-outline">Secondary Outline</button>
```


## Examples

https://github.com/sonofmagic/icestack/blob/main/website/icestack/extend-themes.js

https://github.com/sonofmagic/icestack/tree/main/examples/raw-html-add-new-type