85 lines
2.2 KiB
JavaScript
85 lines
2.2 KiB
JavaScript
// theme.js
|
|
import { extendTheme } from "@chakra-ui/react";
|
|
|
|
const customTheme = extendTheme({
|
|
|
|
initialColorMode: 'dark', // Set dark mode as default
|
|
useSystemColorMode: false, // Disable system mode to enforce dark mode
|
|
colors: {
|
|
gray: {
|
|
50: "#e0e0e0", // Light gray (almost white, lightest)
|
|
100: "#b3b3b3", // Light gray
|
|
200: "#808080", // Medium gray
|
|
300: "#4d4d4d", // Darker gray
|
|
400: "#262626", // Even darker gray
|
|
500: "#000000", // Black (your target color)
|
|
600: "#000000", // Black
|
|
700: "#000000", // Black
|
|
800: "#000000", // Black
|
|
900: "#000000", // Black (darkest)
|
|
},
|
|
darkPurple: {
|
|
50: "#E0DEE2", // Lightest shade
|
|
100: "#B8B4BB", // Light grayish-purple
|
|
200: "#8F8B93", // Lighter grayish-purple
|
|
300: "#66626C", // Light-medium grayish-purple
|
|
400: "#3D3A44", // Medium grayish-purple (darker)
|
|
500: "#312F35", // Base color (dark purple)
|
|
600: "#29262D", // Slightly darker
|
|
700: "#201E23", // Darker shade
|
|
800: "#171419", // Very dark
|
|
900: "#0F0C0F", // Almost black (darkest shade)
|
|
},
|
|
deepPurple: {
|
|
50: "#F1EAF4",
|
|
100: "#DBC7E4",
|
|
200: "#BFA0D0",
|
|
300: "#9D78B8",
|
|
400: "#794DA0",
|
|
500: "#210A33",
|
|
600: "#1C082D",
|
|
700: "#160524",
|
|
800: "#10041C",
|
|
900: "#0A0212",
|
|
},
|
|
lightWhite: {
|
|
50: "#ffffff", // Pure white
|
|
100: "#f2f2f2", // Very light gray
|
|
200: "#e6e6e6", // Lighter gray
|
|
300: "#cccccc", // Light gray
|
|
400: "#b3b3b3", // Medium gray
|
|
500: "#999999", // Darker gray
|
|
600: "#808080", // Even darker gray
|
|
700: "#666666", // Dark gray
|
|
800: "#4d4d4d", // Very dark gray
|
|
900: "#333333", // Almost black
|
|
},
|
|
whiteScheme: {
|
|
50: "#ffffff",
|
|
100: "#ffffff",
|
|
200: "#ffffff",
|
|
300: "#ffffff",
|
|
400: "#ffffff",
|
|
500: "#ffffff",
|
|
600: "#ffffff",
|
|
700: "#ffffff",
|
|
800: "#ffffff",
|
|
900: "#ffffff",
|
|
},
|
|
|
|
},
|
|
components: {
|
|
// Switch: {
|
|
// baseStyle: {
|
|
// track: {
|
|
// _checked: {
|
|
// bg: 'forestGreen.500', // using your custom color here
|
|
// },
|
|
// },
|
|
// },
|
|
// },
|
|
},
|
|
});
|
|
|
|
export default customTheme;
|