> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/berry/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/berry/theme/theme-config/color.md).

# Color

#### Customize Theme Colors

To change the color of the theme, you can customize the theme preset files in `src/themes/theme/` (e.g., `default.ts`, `theme1.ts`, etc.) or update how they are constructed in `src/themes/palette.tsx`.

For instance, if you want to change the color that `theme.palette.primary.light` uses in a theme, then update the primary color values inside the respective preset files in `src/themes/theme/` under the `light` or `dark` mode properties.

{% tabs %}
{% tab title="Typescript" %}

<pre class="language-typescript" data-title="src\themes\palette.tsx"><code class="lang-typescript">// project imports
import { extendPaletteWithChannels } from 'utils/colorUtils';
<strong>
</strong><strong>//assets
</strong><strong>import defaultColor from './theme/default';
</strong>
/**
 * Color intention that you want to used in your theme
 */
export function buildPalette(presetColor: PresetColor) {
  let colors;
  switch (presetColor) {
    case 'theme1':
      colors = theme1;
      break;
        ...
        ...
    };
    
  const extendedLight = extendPaletteWithChannels(colors.light);
  const extendedCommon = extendPaletteWithChannels(commonColor);

  return {
     light: {
      mode: 'light' as PaletteMode,
      ...extendedCommon,
      ...extendedLight
      },
      ...
    }
  };
}
</code></pre>

{% endtab %}

{% tab title="Javascript" %}

```javascript
// project imports
import { extendPaletteWithChannels } from 'utils/colorUtils';

//assets
import defaultColor from './theme/default';

/**
 * Color intention that you want to used in your theme
 */
export function buildPalette(presetColor) {
  let colors;
  switch (presetColor) {
    case 'theme1':
      colors = theme1;
      break;
        ...
        ...
    };
    
  const extendedLight = extendPaletteWithChannels(colors.light);
  const extendedCommon = extendPaletteWithChannels(commonColor);

  return {
     light: {
      mode: 'light',
      ...extendedCommon,
      ...extendedLight
      },
      ...
    }
  };
}
```

{% endtab %}
{% endtabs %}