Berry React
v3.9.1
v3.9.1
  • Introduction
  • Package
  • Getting Started
    • Pre-requisites
    • Quick Start
    • Mock backend
    • Deployment
    • Licensing
  • Setup
    • Seed
    • To Existing Project
  • Folder Structure
  • State Management
  • Multi Language
  • Authentication
    • AWS Cognito
    • Auth0
    • Firebase
  • API Calls
  • Routing
    • New Menu
    • Login as First Page
    • Skip Login
      • VITE
      • NextJS
    • Menu from the backend
    • Remove menu render via backend
  • Theme
    • Configuration
    • Presets
    • Style
      • Color
      • Typography
      • Overrides
      • Shadows
    • Layouts
    • Logo
  • How to
    • Remove eslint
    • Remove prettier
  • Components
    • Avatar
    • AnimateButton
    • Accordion
    • Breadcrumbs
    • Chip
    • ImageList
    • MainCard
    • Transitions
    • SubCard
  • Dependencies
    • Vite js
    • Next js
  • Support
    • Roadmap
    • Changelog
    • FAQ
  • 🎺About - Berry Remix
  • Berry Eco System
Powered by GitBook
On this page

Was this helpful?

  1. Theme
  2. Style

Color

Customize Theme Colors

To change the color of the theme, you can either apply color directly to ..src\theme\palatte.jsx or defines a new variable in ..src\assets\scss\_themes-vars.module.scss and replace it in palatte.jsx

For instance, if you want to change color where theme.palette.primary.light is being used in a theme then, update following in ..src\themes\palatte.jsx

palatte.js
import value from '../assets/scss/_themes-vars.module.scss';

/**
 * Color intention that you want to used in your theme
 */
export function themePalatte(theme) {
    return {
        ...
        primary: {
            light: '#fff000', // change this to your desired color
            ...
        },
        ...
        ...

    };
}

Last updated 10 months ago

Was this helpful?