1
npm i tailwindcss

1
/** @type {import('tailwindcss').Config} */
2
export default {
3
  darkMode: ['class'],
4
  content: [
5
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
6
    './components/**/*.{js,ts,jsx,tsx,mdx}',
7
    './app/**/*.{js,ts,jsx,tsx,mdx}'
8
  ],
9
  theme: {
10
    extend: {
11
      colors: {
12
        primary: {
13
          light: '#60d666', // ? Green for Light Mode
14
          dark: '#66BB6A' // ? Lighter Green for Dark Mode
15
        },
16
        secondary: {
17
          light: '#448AFF', // ? Bright Blue for Light Mode
18
          dark: '#2979FF' // ? Deep Blue for Dark Mode
19
        },
20
        background: {
21
          light: '#f2f2f2', // ? White for Light Mode
22
          dark: '#121212' // ? Dark Gray for Dark Mode
23
        },
24
        text: {
25
          light: '#000000', // ? Dark Gray for Light Mode
26
          dark: '#fdfdfd' // ? Light Gray for Dark Mode
27
        },
28
        header: {
29
          light: '#e8e8e8', // ? Light Gray for Header
30
          dark: '#1F1F1F' // ? Deep Gray for Header
31
        },
32
      },
33
    }
34
  },
35
  class: 'dark',
36
  plugins: [
37
    function ({ addComponents }) {
38
      addComponents({
39
        // ? You can define more classes here that would work for both light and dark modes 
40
        '.bg-primary': {
41
          '@apply bg-primary-light text-text-light transition-all': {},
42
          '.dark &': {
43
            '@apply bg-primary-dark text-text-dark transition-all': {}
44
          }
45
        },
46
        '.bg-secondary': {
47
          '@apply bg-secondary-light text-white transition-all': {},
48
          '.dark &': {
49
            '@apply bg-secondary-dark transition-all': {}
50
          }
51
        },
52
        '.text-primary': {
53
          '@apply text-primary-dark transition-all': {},
54
          '.dark &': {
55
            '@apply text-primary-light transition-all': {}
56
          }
57
        },
58
      });
59
    }
60
  ]
61
};

1
const toggleDarkMode = () => {
2
  document.documentElement.classList.toggle('dark');
3
}