Themes Customization

Tokyo React Typescript Admin Dashboard comes with 6 predefined color schemes.

Three of them are 'light' color schemes: Pure Light, Purple Flow and Grey Goose. The other three are 'dark' color schemes: Nebula Fighter, Green Fields and Dark Spaces.

If you're looking to use only a single color scheme, then you'll need to remove the files and references for the color schemes that you're not going to use from /src/theme/schemes, /src/theme/base.ts and /src/theme/ThemeProvider.tsx.

You can find all the theme logic inside the /src/theme/ folder. Switch between themes using the top right 'cog' menu in the live preview demo.

1📦theme
2  ┣ 📂schemes
3  ┃ ┣ 📜DarkSpacesTheme.ts
4  ┃ ┣ 📜GreenFieldsTheme.ts
5  ┃ ┣ 📜GreyGooseTheme.ts
6  ┃ ┣ 📜NebulaFighterTheme.ts
7  ┃ ┣ 📜PureLightTheme.ts
8  ┃ ┗ 📜PurpleFlowTheme.ts
9  ┣ 📜base.ts
10  ┗ 📜ThemeProvider.tsx

Custom Schemes

Each color scheme has it's individual file making it easy to create new ones or modify existing.

For example, if you were to modify the sidebar style for the Pure Light theme you would have to edit sidebar colors section inside src\theme\schemes\PureLightTheme.ts:

1const themeColors = {
2    primary: '#5569ff',
3    secondary: '#6E759F',
4    success: '#57CA22',
5    warning: '#FFA319',
6    error: '#FF1943',
7    info: '#33C2FF',
8    black: '#223354',
9    white: '#ffffff',
10    primaryAlt: '#000C57'
11  };
12  
13  const colors = {
14    layout: {
15      general: {
16        bodyBg: '#f2f5f9'
17      },
18      sidebar: {
19        background: themeColors.white,
20        textColor: themeColors.secondary,
21        dividerBg: '#f2f5f9',
22        menuItemColor: '#242E6F',
23        menuItemColorActive: themeColors.primary,
24        menuItemBg: themeColors.white,
25        menuItemBgActive: '#f2f5f9',
26        menuItemIconColor: lighten(themeColors.secondary, 0.3),
27        menuItemIconColorActive: themeColors.primary,
28        menuItemHeadingColor: darken(themeColors.secondary, 0.3)
29      }
30    }
31  };
32  
33  export const PureLightTheme = createTheme({
34    direction: i18n.dir(),
35    colors: {
36      shadows: {
37        success: colors.shadows.success,
38        error: colors.shadows.error,
39        primary: colors.shadows.primary,
40        info: colors.shadows.info,
41        warning: colors.shadows.warning
42      },
43      primary: {
44        lighter: alpha(themeColors.primary, 0.1),
45        light: lighten(themeColors.primary, 0.3),
46        main: themeColors.primary,
47        dark: darken(themeColors.primary, 0.2)
48      }
49    },
50    sidebar: {
51      background: colors.layout.sidebar.background,
52      textColor: colors.layout.sidebar.textColor,
53      dividerBg: colors.layout.sidebar.dividerBg,
54      menuItemColor: colors.layout.sidebar.menuItemColor,
55      menuItemColorActive: colors.layout.sidebar.menuItemColorActive,
56      menuItemBg: colors.layout.sidebar.menuItemBg,
57      menuItemBgActive: colors.layout.sidebar.menuItemBgActive,
58      menuItemIconColor: colors.layout.sidebar.menuItemIconColor,
59      menuItemIconColorActive: colors.layout.sidebar.menuItemIconColorActive,
60      menuItemHeadingColor: colors.layout.sidebar.menuItemHeadingColor,
61      boxShadow:
62        '2px 0 3px rgba(159, 162, 191, .18), 1px 0 1px rgba(159, 162, 191, 0.32)',
63      width: '290px'
64    }