feat(theme): add new themes for Everforest, Kanagawa, Ayu, Moonlight, and Cyberpunk

src/index.css

@@ -466,6 +466,162 @@
     --gradient-end: #d6336a;
   }
 
+  /* ===== EVERFOREST DARK ===== */
+  [data-theme="everforest-dark"] {
+    --bg-primary: #2d353b;
+    --bg-secondary: #343f44;
+    --bg-tertiary: #3d484d;
+    --text-primary: #d3c6aa;
+    --text-secondary: #859289;
+    --accent: #a7c080;
+    --accent-hover: #bdd4a0;
+    --accent-text: #2d353b;
+    --border: #4f585e;
+    --card-bg: #343f44;
+    --input-bg: #343f44;
+    --input-border: #4f585e;
+    --nav-bg: #272e33;
+    --sidebar-bg: #272e33;
+    --hover-bg: #3d484d;
+    --success: #a7c080;
+    --warning: #e69875;
+    --error: #e67e80;
+    --ring: #a7c080;
+    --shadow-color: rgba(0, 0, 0, 0.35);
+    --gradient-start: #a7c080;
+    --gradient-end: #83c092;
+  }
+
+  /* ===== EVERFOREST LIGHT ===== */
+  [data-theme="everforest-light"] {
+    --bg-primary: #fdf6e3;
+    --bg-secondary: #f4f0d9;
+    --bg-tertiary: #eae4ca;
+    --text-primary: #5c6a72;
+    --text-secondary: #829181;
+    --accent: #8da101;
+    --accent-hover: #6e8c00;
+    --accent-text: #fdf6e3;
+    --border: #d5ceb5;
+    --card-bg: #f4f0d9;
+    --input-bg: #fdf6e3;
+    --input-border: #c5bda0;
+    --nav-bg: #f4f0d9;
+    --sidebar-bg: #eae4ca;
+    --hover-bg: #eae4ca;
+    --success: #8da101;
+    --warning: #dfa000;
+    --error: #f85552;
+    --ring: #8da101;
+    --shadow-color: rgba(92, 106, 114, 0.1);
+    --gradient-start: #8da101;
+    --gradient-end: #35a77c;
+  }
+
+  /* ===== KANAGAWA ===== */
+  [data-theme="kanagawa"] {
+    --bg-primary: #1f1f28;
+    --bg-secondary: #2a2a37;
+    --bg-tertiary: #363646;
+    --text-primary: #dcd7ba;
+    --text-secondary: #727169;
+    --accent: #7e9cd8;
+    --accent-hover: #98b4e8;
+    --accent-text: #1f1f28;
+    --border: #363646;
+    --card-bg: #2a2a37;
+    --input-bg: #2a2a37;
+    --input-border: #363646;
+    --nav-bg: #16161d;
+    --sidebar-bg: #16161d;
+    --hover-bg: #363646;
+    --success: #76946a;
+    --warning: #dca561;
+    --error: #c34043;
+    --ring: #7e9cd8;
+    --shadow-color: rgba(0, 0, 0, 0.45);
+    --gradient-start: #7e9cd8;
+    --gradient-end: #957fb8;
+  }
+
+  /* ===== AYU DARK ===== */
+  [data-theme="ayu-dark"] {
+    --bg-primary: #0d1017;
+    --bg-secondary: #131721;
+    --bg-tertiary: #1a212e;
+    --text-primary: #bfbdb6;
+    --text-secondary: #6c7380;
+    --accent: #39bae6;
+    --accent-hover: #59ccf0;
+    --accent-text: #0d1017;
+    --border: #1a212e;
+    --card-bg: #131721;
+    --input-bg: #0d1017;
+    --input-border: #242b38;
+    --nav-bg: #0d1017;
+    --sidebar-bg: #0d1017;
+    --hover-bg: #1a212e;
+    --success: #aad94c;
+    --warning: #ffb454;
+    --error: #f07178;
+    --ring: #39bae6;
+    --shadow-color: rgba(0, 0, 0, 0.5);
+    --gradient-start: #39bae6;
+    --gradient-end: #6a9ff7;
+  }
+
+  /* ===== MOONLIGHT ===== */
+  [data-theme="moonlight"] {
+    --bg-primary: #212337;
+    --bg-secondary: #2b2d3f;
+    --bg-tertiary: #353750;
+    --text-primary: #c8d3f5;
+    --text-secondary: #828dae;
+    --accent: #82aaff;
+    --accent-hover: #9dbdff;
+    --accent-text: #212337;
+    --border: #353750;
+    --card-bg: #2b2d3f;
+    --input-bg: #2b2d3f;
+    --input-border: #444668;
+    --nav-bg: #1e2030;
+    --sidebar-bg: #1e2030;
+    --hover-bg: #353750;
+    --success: #c3e88d;
+    --warning: #ffc777;
+    --error: #ff757f;
+    --ring: #82aaff;
+    --shadow-color: rgba(0, 0, 0, 0.4);
+    --gradient-start: #82aaff;
+    --gradient-end: #c099ff;
+  }
+
+  /* ===== CYBERPUNK ===== */
+  [data-theme="cyberpunk"] {
+    --bg-primary: #0a0a0f;
+    --bg-secondary: #0e0e1a;
+    --bg-tertiary: #141428;
+    --text-primary: #e0e0ff;
+    --text-secondary: #7878bb;
+    --accent: #ff0080;
+    --accent-hover: #ff33a0;
+    --accent-text: #ffffff;
+    --border: #1e1e3a;
+    --card-bg: #0e0e1a;
+    --input-bg: #0d0d18;
+    --input-border: #1e1e3a;
+    --nav-bg: #07070f;
+    --sidebar-bg: #07070f;
+    --hover-bg: #141428;
+    --success: #00ff9f;
+    --warning: #ffdd00;
+    --error: #ff3333;
+    --ring: #ff0080;
+    --shadow-color: rgba(255, 0, 128, 0.15);
+    --gradient-start: #ff0080;
+    --gradient-end: #00e5ff;
+  }
+
 
 @layer components {
   .btn-primary {

src/themes/index.js

@@ -118,6 +118,48 @@ export const themes = [
     group: 'Community',
     colors: { bg: '#ffffff', accent: '#e60000', text: '#000000' },
   },
+  {
+    id: 'everforest-dark',
+    name: 'Everforest Dark',
+    type: 'dark',
+    group: 'Everforest',
+    colors: { bg: '#2d353b', accent: '#a7c080', text: '#d3c6aa' },
+  },
+  {
+    id: 'everforest-light',
+    name: 'Everforest Light',
+    type: 'light',
+    group: 'Everforest',
+    colors: { bg: '#fdf6e3', accent: '#8da101', text: '#5c6a72' },
+  },
+  {
+    id: 'kanagawa',
+    name: 'Kanagawa',
+    type: 'dark',
+    group: 'Community',
+    colors: { bg: '#1f1f28', accent: '#7e9cd8', text: '#dcd7ba' },
+  },
+  {
+    id: 'ayu-dark',
+    name: 'Ayu Dark',
+    type: 'dark',
+    group: 'Ayu',
+    colors: { bg: '#0d1017', accent: '#39bae6', text: '#bfbdb6' },
+  },
+  {
+    id: 'moonlight',
+    name: 'Moonlight',
+    type: 'dark',
+    group: 'Community',
+    colors: { bg: '#212337', accent: '#82aaff', text: '#c8d3f5' },
+  },
+  {
+    id: 'cyberpunk',
+    name: 'Cyberpunk',
+    type: 'dark',
+    group: 'Community',
+    colors: { bg: '#0a0a0f', accent: '#ff0080', text: '#e0e0ff' },
+  },
 ];
 
 export function getThemeById(id) {