Dashboard

website/styles/Theme/Components/Container.tsx

@@ -0,0 +1,25 @@
+import {
+  color,
+  defineStyle,
+  defineStyleConfig,
+  // transition,
+} from "@chakra-ui/styled-system";
+import { colors } from "../colors";
+
+const baseStyle = defineStyle(({ colorMode }) => ({
+  minWidth: "100%",
+  bg: colorMode === "light" ? colors.light.bg : colors.dark.bg,
+  // transition: "background-color 300ms cubic-bezier(0.4, 0, 1, 1)",
+  color: colorMode === "light" ? colors.light.text : colors.dark.text,
+}));
+
+const variants = {
+  "no-padding": {
+    padding: 0,
+  },
+};
+
+export const containerTheme = defineStyleConfig({
+  baseStyle,
+  variants,
+});

website/styles/Theme/colors.tsx

@@ -0,0 +1,14 @@
+export const colors = {
+  light: {
+    bg: "gray.100",
+    btn: "gray.50",
+    div: "white",
+    text: "black",
+  },
+  dark: {
+    bg: "gray.900",
+    btn: "gray.600",
+    div: "gray.700",
+    text: "gray.200",
+  },
+};

website/styles/Theme/index.tsx

@@ -0,0 +1,68 @@
+import {
+  type ThemeConfig,
+  extendTheme,
+  usePrefersReducedMotion,
+} from "@chakra-ui/react";
+import { containerTheme } from "./Components/Container";
+import { StyleFunctionProps, Styles } from "@chakra-ui/theme-tools";
+
+const config: ThemeConfig = {
+  initialColorMode: "system",
+  useSystemColorMode: false,
+  disableTransitionOnChange: true,
+};
+
+const components = {
+  Container: containerTheme,
+  Box: (props: StyleFunctionProps) => ({
+    backgroundColor: props.colorMode === "light" ? "white" : "gray.800",
+  }),
+  Button: {
+    baseStyle: {
+      fontWeight: "normal",
+    },
+    sizes: {
+      lg: {
+        fontSize: "md",
+        paddingY: "7",
+      },
+    },
+    variants: {
+      solid: (props: StyleFunctionProps) => ({
+        bg: props.colorMode === "light" ? "gray.100" : "gray.600",
+        _hover: {
+          bg: props.colorMode === "light" ? "gray.200" : "#3D4A60",
+        },
+        _active: {
+          bg: props.colorMode === "light" ? "gray.300" : "#374254",
+        },
+        borderRadius: "lg",
+      }),
+      // gradient: (props: StyleFunctionProps) => ({
+      //   bg: `linear-gradient(${white}, ${bgColor}) padding-box,
+      //   linear-gradient(135deg, ${lgFrom}, ${lgTo}) border-box`,
+      // }),
+    },
+  },
+};
+
+const breakpoints = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
+};
+
+const styles = {
+  global: (props) => ({
+    main: {
+      fontFamily: "Inter",
+    },
+    header: {
+      fontFamily: "Inter",
+    },
+  }),
+};
+
+export const theme = extendTheme({ config, styles, components, breakpoints });