feat: add Peras art theme and 3-way theme switch

Author: iasonliu

css/screen.css

@@ -42,6 +42,31 @@
   --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* Peras Art Theme - UI Concept Style */
+[data-theme="peras"] {
+  --bg-page: #F4F0EA;        /* Muted warm beige background */
+  --bg-card: #FFFFFF;        /* Pure white cards for float effect */
+  --bg-card-rgb: 255, 255, 255;
+  --bg-subtle: #EAE4D9;      /* Warm interactive elements */
+  --bg-code: #1A2235;        /* Deep navy for code */
+  --border-color: rgba(0, 0, 0, 0.05);
+  --border-subtle: rgba(0, 0, 0, 0.02);
+
+  --text-main: #1A2235;      /* Deep navy for text */
+  --text-muted: #64748B;     /* Cool slate for secondary */
+  --text-light: #94A3B8;     /* Light slate */
+  --text-olive: #475569;     /* Darker slate */
+
+  --brand-primary: #2563EB;  /* Vibrant interactive blue */
+  --brand-hover: #1D4ED8;
+  --brand-light: #EFF6FF;
+  --tag-bg: #F1F5F9;         /* Slate 100 for tags */
+
+  --shadow-sm: 0 4px 20px rgba(26, 34, 53, 0.04);
+  --shadow-md: 0 12px 30px rgba(26, 34, 53, 0.06);
+  --shadow-hover: 0 16px 40px rgba(26, 34, 53, 0.08);
+}
+
 [data-theme="dark"] {
   /* Dark Theme - Kami Dark Surface & Warm Charcoal */
   --bg-page: #141413;        /* Deep dark warm background */

js/main.js

@@ -6,10 +6,14 @@ document.addEventListener('DOMContentLoaded', function() {
 
   const sunSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>`;
   const moonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>`;
+  const paletteSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>`;
 
   function updateThemeUI(theme) {
     if (!toggleBtn) return;
     if (theme === 'dark') {
+      if (themeIconContainer) themeIconContainer.innerHTML = paletteSVG;
+      if (themeLabel) themeLabel.textContent = 'Peras';
+    } else if (theme === 'peras') {
       if (themeIconContainer) themeIconContainer.innerHTML = sunSVG;
       if (themeLabel) themeLabel.textContent = 'Light';
     } else {
@@ -21,10 +25,15 @@ document.addEventListener('DOMContentLoaded', function() {
   const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
   updateThemeUI(currentTheme);
 
+  const themes = ['light', 'dark', 'peras'];
+
   if (toggleBtn) {
     toggleBtn.addEventListener('click', function() {
-      const activeTheme = document.documentElement.getAttribute('data-theme');
-      const newTheme = activeTheme === 'dark' ? 'light' : 'dark';
+      const activeTheme = document.documentElement.getAttribute('data-theme') || 'light';
+      let currentIndex = themes.indexOf(activeTheme);
+      if (currentIndex === -1) currentIndex = 0;
+      const newTheme = themes[(currentIndex + 1) % themes.length];
+      
       document.documentElement.setAttribute('data-theme', newTheme);
       localStorage.setItem('42devops-theme', newTheme);
       updateThemeUI(newTheme);