@brightlayer-ui/react-themes/blueMergedTheme.js

React themes for Brightlayer UI applications

import { createTheme } from '@mui/material';
import { typography, createSimpleLightPalette as createSimplePalette, createSimpleDarkPalette } from './shared.js';
import * as BLUIColors from '@brightlayer-ui/colors';
import Color from 'color';
import MuiAvatar from './componentStylesOverrides/MuiAvatar.js';
import MuiAppBar from './componentStylesOverrides/MuiAppBar.js';
import MuiBottomNavigation from './componentStylesOverrides/MuiBottomNavigation.js';
import MuiBottomNavigationAction from './componentStylesOverrides/MuiBottomNavigationAction.js';
import MuiBadge from './componentStylesOverrides/MuiBadge.js';
import MuiBackdrop from './componentStylesOverrides/MuiBackdrop.js';
import MuiButton from './componentStylesOverrides/MuiButton.js';
import MuiButtonGroup from './componentStylesOverrides/MuiButtonGroup.js';
import MuiCheckbox from './componentStylesOverrides/MuiCheckbox.js';
import MuiButtonBase from './componentStylesOverrides/MuiButtonBase.js';
import MuiChip from './componentStylesOverrides/MuiChip.js';
import MuiDrawer from './componentStylesOverrides/MuiDrawer.js';
import MuiFab from './componentStylesOverrides/MuiFab.js';
import MuiListItem from './componentStylesOverrides/MuiListItem.js';
import MuiListSubheader from './componentStylesOverrides/MuiListSubheader.js';
import MuiMobileStepper from './componentStylesOverrides/MuiMobileStepper.js';
import MuiLinearProgress from './componentStylesOverrides/MuiLinearProgress.js';
import MuiCircularProgress from './componentStylesOverrides/MuiCircularProgress.js';
import MuiSlider from './componentStylesOverrides/MuiSlider.js';
import MuiSnackbarContent from './componentStylesOverrides/MuiSnackbarContent.js';
import MuiStepConnector from './componentStylesOverrides/MuiStepConnector.js';
import MuiStep from './componentStylesOverrides/MuiStep.js';
import MuiStepIcon from './componentStylesOverrides/MuiStepIcon.js';
import MuiStepLabel from './componentStylesOverrides/MuiStepLabel.js';
import MuiSwitch from './componentStylesOverrides/MuiSwitch.js';
import MuiTableCell from './componentStylesOverrides/MuiTableCell.js';
import MuiTableHead from './componentStylesOverrides/MuiTableHead.js';
import MuiTableRow from './componentStylesOverrides/MuiTableRow.js';
import MuiTableSortLabel from './componentStylesOverrides/MuiTableSortLabel.js';
import MuiTab from './componentStylesOverrides/MuiTab.js';
import MuiTabs from './componentStylesOverrides/MuiTabs.js';
import MuiTooltip from './componentStylesOverrides/MuiTooltip.js';
import MuiInputBase from './componentStylesOverrides/MuiInputBase.js';
import MuiInput from './componentStylesOverrides/MuiInput.js';
import MuiFilledInput from './componentStylesOverrides/MuiFilledInput.js';
import MuiOutlinedInput from './componentStylesOverrides/MuiOutlinedInput.js';
import MuiFormLabel from './componentStylesOverrides/MuiFormLabel.js';
import MuiFormHelperText from './componentStylesOverrides/MuiFormHelperText.js';
import MuiToggleButtonGroup from './componentStylesOverrides/MuiToggleButtonGroup.js';
import MuiToggleButton from './componentStylesOverrides/MuiToggleButton.js';
// Light Theme Colors
const LightThemeColors = {
    primary: createSimplePalette(BLUIColors.blue),
    secondary: createSimplePalette(BLUIColors.lightBlue),
    error: createSimplePalette(BLUIColors.red),
    success: createSimplePalette(BLUIColors.green),
    info: createSimplePalette(BLUIColors.lightBlue),
    divider: Color(BLUIColors.black[500]).alpha(0.12).string(),
    warning: {
        light: BLUIColors.yellow[100],
        main: BLUIColors.yellow[500],
        dark: BLUIColors.yellow[900],
    },
    background: {
        default: BLUIColors.white[200],
        paper: BLUIColors.white[50],
    },
    text: {
        primary: BLUIColors.black[500],
        secondary: BLUIColors.gray[500],
        hint: BLUIColors.gray[500],
    },
    action: {
        active: BLUIColors.gray[500],
        disabled: Color(BLUIColors.black[500]).alpha(0.3).string(),
    },
};
// Dark Theme Colors
const DarkThemeColors = {
    primary: createSimpleDarkPalette(BLUIColors.blue),
    secondary: createSimpleDarkPalette(BLUIColors.lightBlue),
    error: createSimpleDarkPalette(BLUIColors.red),
    success: createSimpleDarkPalette(BLUIColors.green),
    info: createSimpleDarkPalette(BLUIColors.lightBlue),
    divider: Color(BLUIColors.black[200]).alpha(0.36).string(),
    warning: {
        light: BLUIColors.yellow[100],
        main: BLUIColors.yellow[300],
        dark: BLUIColors.yellow[900],
    },
    background: {
        default: BLUIColors.darkBlack[800],
        paper: BLUIColors.black[900],
    },
    text: {
        primary: BLUIColors.black[50],
        secondary: BLUIColors.black[200],
        disabled: Color(BLUIColors.black[300]).alpha(0.36).string(),
        hint: Color(BLUIColors.black[300]).alpha(0.36).string(),
    },
    action: {
        hover: Color(BLUIColors.black[50]).alpha(0.1).string(),
        active: BLUIColors.black[200],
        disabled: Color(BLUIColors.black[300]).alpha(0.36).string(),
        disabledBackground: Color(BLUIColors.black[200]).alpha(0.24).string(),
    },
};
const Spacing = 8;
export const blueThemes = createTheme({
    cssVariables: { colorSchemeSelector: 'class' },
    direction: 'ltr',
    typography: typography,
    spacing: Spacing,
    colorSchemes: {
        light: {
            palette: {
                mode: 'light',
                ...LightThemeColors,
            },
        },
        dark: {
            palette: {
                mode: 'dark',
                ...DarkThemeColors,
            },
        },
    },
    components: {
        MuiAvatar: MuiAvatar,
        MuiAppBar: MuiAppBar,
        MuiBottomNavigation: MuiBottomNavigation,
        MuiBottomNavigationAction: MuiBottomNavigationAction,
        MuiBadge: MuiBadge,
        MuiBackdrop: MuiBackdrop,
        MuiButton: MuiButton,
        MuiButtonGroup: MuiButtonGroup,
        MuiCheckbox: MuiCheckbox,
        MuiButtonBase: MuiButtonBase,
        MuiChip: MuiChip,
        MuiDrawer: MuiDrawer,
        MuiFab: MuiFab,
        MuiListItem: MuiListItem,
        MuiListSubheader: MuiListSubheader,
        MuiMobileStepper: MuiMobileStepper,
        MuiLinearProgress: MuiLinearProgress,
        MuiCircularProgress: MuiCircularProgress,
        MuiSlider: MuiSlider,
        MuiSnackbarContent: MuiSnackbarContent,
        MuiStepConnector: MuiStepConnector,
        MuiStep: MuiStep,
        MuiStepIcon: MuiStepIcon,
        MuiStepLabel: MuiStepLabel,
        MuiSwitch: MuiSwitch,
        MuiTableCell: MuiTableCell,
        MuiTableHead: MuiTableHead,
        MuiTableRow: MuiTableRow,
        MuiTableSortLabel: MuiTableSortLabel,
        MuiTab: MuiTab,
        MuiTabs: MuiTabs,
        MuiTooltip: MuiTooltip,
        MuiInputBase: MuiInputBase,
        MuiInput: MuiInput,
        MuiFilledInput: MuiFilledInput,
        MuiOutlinedInput: MuiOutlinedInput,
        MuiFormLabel: MuiFormLabel,
        MuiFormHelperText: MuiFormHelperText,
        MuiToggleButtonGroup: MuiToggleButtonGroup,
        MuiToggleButton: MuiToggleButton,
    },
});