Berry React
v4.0.0
v4.0.0
  • Introduction
  • Package
  • Getting Started
    • Pre-requisites
    • Quick Start
    • Mock backend
    • Deployment
    • Licensing
  • Setup
    • Seed
    • To Existing Project
  • Folder Structure
  • State Management
  • Multi Language
  • Authentication
    • Firebase
    • Auth0
    • AWS Cognito
    • Supabase
  • API Calls
  • Routing
    • New Menu
    • Login as First Page
    • Skip Login
    • Render 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
  • Support
    • Roadmap
    • Changelog
    • FAQ
  • Berry Eco System
Powered by GitBook
On this page

Was this helpful?

  1. Theme

Presets

How to change available color presets

Berry has several color themes to choose from, including 6+ preset options. To change the color theme, you can follow these steps:

Color preset files are available in src\assets\scss\ the directory.

src/assets/scss
..
├── _theme1.module.scss
├── _theme2.module.scss
├── ..
├── ..
├── ..
├── _theme6.module.scss
├── ...
src/scss
..
├── _theme1.module.scss
├── _theme2.module.scss
├── ..
├── ..
├── ..
├── _theme6.module.scss
├── ...

Edit & Choose your desire preset color setting in src\config.ts the file. Change the presetColor value to theme1, theme2 to theme6

presetColor: theme1

const config = {
    ...
    presetColor: 'default', // default, theme1, theme2 to theme6 available
    ...
    ...
    ...
}

Edit & Choose your desire preset color setting in app\config.js file. Change the presetColor value to theme1, theme2 to theme6

presetColor: theme1

import type { ConfigProps } from 'types/config';
...

const config: ConfigProps = {
    ...
    presetColor: 'default', // default, theme1, theme2, theme3, theme4, theme5, theme6
    ...
};

Last updated 1 month ago

Was this helpful?