gistfile1.txt

"use client";

import { App as AntdApp, ConfigProvider, theme, ThemeConfig } from "antd";
import Cookies from "js-cookie";
import React, {
  type PropsWithChildren,
  createContext,
  useEffect,
  useState,
} from "react";

type ColorModeContextType = {
  mode: string;
  setMode: (mode: string) => void;
};

export const ColorModeContext = createContext<ColorModeContextType>(
  {} as ColorModeContextType
);

type ColorModeContextProviderProps = {
  defaultMode?: string;
};

export const ColorModeContextProvider: React.FC<
  PropsWithChildren<ColorModeContextProviderProps>
> = ({ children, defaultMode }) => {
  const [isMounted, setIsMounted] = useState(false);
  const [mode, setMode] = useState(defaultMode || "light");

  useEffect(() => {
    setIsMounted(true);
  }, []);

  useEffect(() => {
    if (isMounted) {
      const theme = Cookies.get("theme") || "dark";
      setMode(theme);
    }
  }, [isMounted]);

  const setColorMode = () => {
    if (mode === "light") {
      setMode("dark");
      Cookies.set("theme", "dark");
    } else {
      setMode("light");
      Cookies.set("theme", "light");
    }
  };

  const { darkAlgorithm, defaultAlgorithm } = theme;

  const darkTheme: ThemeConfig = {
    components: {
      Skeleton: {
        gradientToColor: "rgba(255, 255, 255, 0.18)",
        gradientFromColor: "rgba(255, 255, 255, 0.12)",
      },
      Menu: {
        darkItemBg: "transparent",
        darkSubMenuItemBg: "rgb(18, 22, 30)",
        darkItemSelectedBg: "#22c55e",
      },
      Table: {
        headerColor: "#fff",
        headerSplitColor: "transparent",
        borderColor: "rgb(29, 35, 48)",
        colorBgContainer: "rgb(18, 22, 30)",
        colorText: "rgba(255, 255, 255, 0.9)",
        rowHoverBg: "rgb(27, 31, 39)",
        fontWeightStrong: 400,
        cellPaddingBlock: 12,
      },
      Pagination: {
        colorText: "rgba(255,255,255,0.5)",
        colorBgContainer: "transparent",
        colorTextDisabled: "rgb(27, 31, 39)",
        itemActiveBg: "rgb(23, 29, 39)",
        borderRadius: 4,
        colorPrimary: "rgba(255,255,255,0.9)",
        lineWidth: 0,
        fontWeightStrong: 400,
        colorPrimaryHover: "rgba(255,255,255,0.7)",
      },
      Input: {
        colorTextPlaceholder: "rgba(101,101,100,1)",
      },
      Select: {
        colorTextDisabled: "#000",
        colorBgContainerDisabled: "#ccc",
        colorIcon: "#fff",
        selectorBg: "rgb(23, 29, 39)",
        colorBgElevated: "rgb(23, 29, 39)",
        colorText: "rgba(255,255,255,0.95)",
        colorTextPlaceholder: "rgba(255,255,255,0.7)",
        optionActiveBg: "rgb(29, 35, 48)",
        optionSelectedBg: "rgb(29, 35, 48)",
        clearBg: "#141414",
        colorTextQuaternary: "rgba(255, 255, 255, 0.25)",
        colorTextTertiary: "rgba(255, 255, 255, 0.45)",
        colorFillSecondary: "rgb(34, 41, 57)",
      },
      Drawer: {
        colorBgElevated: "rgb(18, 22, 30)",
        colorIcon: "#fff",
        colorIconHover: "rgba(255, 255, 255, 0.7)",
        colorText: "#ffffff",
        // colorSplit: "rgba(255, 255, 255, 0.5)",
      },
      Collapse: {
        colorTextHeading: "rgba(255, 255, 255, 0.9)",
        colorText: "rgba(255, 255, 255, 0.9)",
        fontSize: 16,
      },
      Form: {
        labelColor: "rgba(255, 255, 255, 0.7)",
      },
      Dropdown: {
        colorBgElevated: "rgb(29 35 48)",
        colorText: "rgba(255, 255, 255, 0.7)",
      },
      Modal: {
        contentBg: "rgb(18, 22, 30)",
        headerBg: "rgb(18, 22, 30)",
        titleColor: "rgba(255,255,255,0.95)",
        colorIcon: "rgba(255,255,255,0.95)",
        colorIconHover: "rgba(255,255,255,0.7)",
      },
      Upload: {
        colorText: "#1677FF",
      },
      Tabs: {
        colorText: "white",
      },
      Rate: {
        starBg: "rgba(255,255,255,0.12)",
      },
    },
    algorithm: darkAlgorithm,
  };

  const lightTheme: ThemeConfig = {
    components: {
      Menu: {
        itemBg: "transparent",
        subMenuItemBg: "#F1F1F2",
        colorPrimary: "#22c55e",
        itemSelectedBg: "#F9F9F9",
      },
    },
    algorithm: defaultAlgorithm,
  };

  console.log(mode)
  return (
    <ColorModeContext.Provider
      value={{
        setMode: setColorMode,
        mode,
      }}
    >
      <ConfigProvider
        theme={mode == 'dark' ? darkTheme : lightTheme}
      >
        {children}
      </ConfigProvider>
    </ColorModeContext.Provider>
  );
};