// 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",
    },
    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;
