feat: add monokai theme

theodorusclarence · Feb 6, 2022 · 04deb21 · 04deb21
1 parent abfa0a1
commit 04deb21
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -25,6 +25,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
             <option value='dark'>dark</option>
             <option value='theme-milky'>milky</option>
             <option value='theme-street dark'>street</option>
+            <option value='theme-monokai dark'>monokai</option>
           </select>
         )}
         {children}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -27,6 +27,8 @@
   --clr-primary-900: rgb(var(--tw-clr-primary-900)); /* #064e3b */
   /* #endregion  /**======== Primary Color =========== */
 
+  --tw-clr-dark: 34, 34, 34; /* #222222 */
+
   --tw-clr-milky-50: 255, 246, 233; /* #fff6e9 */
   --tw-clr-milky-100: 255, 245, 227; /* #fff5e3 */
   --tw-clr-milky-400: 129, 100, 82; /* #81644a */
@@ -35,6 +37,10 @@
   --tw-clr-street-400: 184, 105, 255; /* #b869ff */
   --tw-clr-street-500: 104, 107, 253; /* #686afd */
   --tw-clr-street-800: 1, 22, 39; /* #011627 */
+
+  --tw-clr-monokai-400: 249, 38, 114; /* #f92672 */
+  --tw-clr-monokai-500: 102, 217, 239; /* #66d9ef */
+  --tw-clr-monokai-800: 39, 40, 34; /* #272822 */
 }
 
 @layer base {
@@ -128,4 +134,14 @@
 .theme-street .accent-gradient {
   @apply from-street-400 to-street-500;
 }
+
+.theme-monokai {
+  --tw-clr-primary-400: var(--tw-clr-monokai-400);
+  --tw-clr-primary-500: var(--tw-clr-monokai-500);
+  --tw-clr-primary-800: var(--tw-clr-monokai-800);
+  --tw-clr-dark: var(--tw-clr-monokai-800);
+}
+.theme-monokai .accent-gradient {
+  @apply from-monokai-400 via-[#7649f3] to-monokai-500;
+}
 /* #endregion  /**======== Theme =========== */
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -15,7 +15,7 @@ module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   darkMode: 'class',
   theme: {
-    themeVariants: ['light', 'milky', 'street'],
+    themeVariants: ['light', 'milky', 'street', 'monokai'],
     extend: {
       fontFamily: {
         primary: ['Inter', ...fontFamily.sans],
@@ -45,7 +45,12 @@ module.exports = {
           500: withOpacity('--tw-clr-street-500'),
           800: withOpacity('--tw-clr-street-800'),
         },
-        dark: '#222222',
+        monokai: {
+          400: withOpacity('--tw-clr-monokai-400'),
+          500: withOpacity('--tw-clr-monokai-500'),
+          800: withOpacity('--tw-clr-monokai-800'),
+        },
+        dark: withOpacity('--tw-clr-dark'),
       },
       keyframes: {
         flicker: {