diff --git a/src/index.css b/src/index.css index 8c536a3..04382f2 100644 --- a/src/index.css +++ b/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 { diff --git a/src/themes/index.js b/src/themes/index.js index 1e88cec..287cba8 100644 --- a/src/themes/index.js +++ b/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) {