cipher-delta/theme.tsx at main · Prottoy2938/cipher-delta · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { theme } from "@chakra-ui/core";
import { mode } from "@chakra-ui/theme-tools";
const customTheme = {
  ...theme,
  styles: {
    global: (props) => ({
      body: {
        bg: mode("white", "black")(props),
        color: mode("black", "#E2E8F0")(props),
      },
    }),
  },
  colors: {
    ...theme.colors,
    primary: {
      100: "#CFD1FD",
      200: "#A7ABFB",
      300: "#8388F9",
      400: "#6268F8",
      500: "#444BF7",
      600: "#262EF6",
      700: "#0B14F5",
      800: "#0911DD",
      900: "#080FC7",
    },

    grey: {
      50: "#f0f0fa",
      100: "#d1d3e1",
      200: "#b3b6c9",
      300: "#9499b4",
      400: "#777c9f",
      500: "#5d6385",
      600: "#484d69",
      700: "#34374b",
      800: "#1e212e",
      900: "#080b14",
    },

    cyan: {
      50: "#dbf4ff",
      100: "#addbff",
      200: "#7cc2ff",
      300: "#4aa9ff",
      400: "#1a91ff",
      500: "#0077e6",
      600: "#005db4",
      700: "#004282",
      800: "#002851",
      900: "#000e21",
    },
  },
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.1rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "4rem",
  },
};

export default customTheme;