diff --git a/package.json b/package.json
index be3f420c..2f953206 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "lodash.get": "^4.4.2",
+    "tailwindcss-themer": "^3.0.1",
     "typescript": "^4.9.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2edb9b2e..03dce9e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,7 @@ specifiers:
   husky: ^8.0.3
   lodash.get: ^4.4.2
   tailwindcss: ^3.0.24
+  tailwindcss-themer: ^3.0.1
   typescript: ^4.9.5
 
 dependencies:
@@ -46,6 +47,7 @@ devDependencies:
   eslint-plugin-simple-import-sort: 10.0.0_eslint@8.34.0
   husky: 8.0.3
   lodash.get: 4.4.2
+  tailwindcss-themer: 3.0.1_tailwindcss@3.2.7
   typescript: 4.9.5
 
 packages:
@@ -1767,7 +1769,6 @@ packages:
     dependencies:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
-    dev: false
 
   /color/4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
@@ -1775,7 +1776,6 @@ packages:
     dependencies:
       color-convert: 2.0.1
       color-string: 1.9.1
-    dev: false
 
   /comma-separated-tokens/2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
@@ -3029,7 +3029,6 @@ packages:
 
   /is-arrayish/0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
-    dev: false
 
   /is-binary-path/2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
@@ -3227,6 +3226,10 @@ packages:
     engines: {'0': node >= 0.2.0}
     dev: true
 
+  /just-unique/4.2.0:
+    resolution: {integrity: sha512-cxQGGUiit6CGUpuuiezY8N4m1wgF4o7127rXEXDFcxeDUFfdV7gSkwA26Fe2wWBiNQq2SZOgN4gSmMxB/StA8Q==}
+    dev: true
+
   /kind-of/6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -4756,7 +4759,6 @@ packages:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
     dependencies:
       is-arrayish: 0.3.2
-    dev: false
 
   /sisteransi/1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
@@ -4971,6 +4973,18 @@ packages:
       '@pkgr/utils': 2.3.1
       tslib: 2.4.1
 
+  /tailwindcss-themer/3.0.1_tailwindcss@3.2.7:
+    resolution: {integrity: sha512-fYbrcm9/WrLepfFg51PcbfQuEBv0jFeMYlU/emCuvTt6NOvzks9Dlp2Ji+EqM6K7KHA6KpZ2NJWbZLmewpHNwA==}
+    peerDependencies:
+      tailwindcss: ^3.1.0
+    dependencies:
+      color: 4.2.3
+      just-unique: 4.2.0
+      lodash.merge: 4.6.2
+      lodash.mergewith: 4.6.2
+      tailwindcss: 3.2.7
+    dev: true
+
   /tailwindcss/3.2.7:
     resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==}
     engines: {node: '>=12.13.0'}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 9e9fbcb8..8b4f0c9c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,3 +1,5 @@
+const tailwindCssTheme = require('tailwindcss-themer')
+const themeConfig = require('./theme.config.cjs')
 const typography = require('@tailwindcss/typography')
 
 /** @type {import('tailwindcss').Config} */
@@ -7,6 +9,7 @@ module.exports = {
     extend: {},
   },
   plugins: [
+    tailwindCssTheme(themeConfig),
     typography(),
   ],
 }
diff --git a/theme.config.cjs b/theme.config.cjs
new file mode 100644
index 00000000..946fc068
--- /dev/null
+++ b/theme.config.cjs
@@ -0,0 +1,57 @@
+const colors = require('tailwindcss/colors')
+
+const themeColors = {
+  light: {
+    secondary: colors.zinc['900'],
+    tertiary: colors.zinc['50'],
+  },
+  dark: {
+    secondary: colors.zinc['100'],
+    tertiary: colors.zinc['900'],
+  },
+}
+
+const darkTheme = ({ primary, secondary, tertiary }) => {
+  return {
+    primary: primary,
+    secondary: secondary,
+    tertiary: tertiary,
+  }
+}
+
+const lightTheme = ({ primary, secondary, tertiary }) => {
+  return {
+    primary: primary,
+    secondary: secondary,
+    tertiary: tertiary,
+  }
+}
+
+const siteTheme = ({ primary, secondary, tertiary }, isDark = true) =>
+  isDark
+    ? darkTheme({ primary, secondary, tertiary })
+    : lightTheme(darkTheme({ primary, secondary, tertiary }))
+
+module.exports = {
+  defaultTheme: {
+    extend: {
+      colors: siteTheme({
+        primary: '#ffa116',
+        secondary: themeColors.dark['secondary'],
+        tertiary: themeColors.dark['tertiary'],
+      }, true)
+    }
+  },
+  themes: [
+    {
+      name: 'leetcode-light',
+      extend: {
+        colors: siteTheme({
+          primary: '#ffa116',
+          secondary: themeColors.light['secondary'],
+          tertiary: themeColors.light['tertiary'],
+        }, false)
+      }
+    }
+  ]
+}