Spaces:

inmodel
/

code-review-env

Running

App Files Files Community

Nitish commited on 15 days ago

Commit

979995a

1 Parent(s): 1af53e9

feat: add dark/light mode toggle with persistence

Browse files

Files changed (3) hide show

static/index.html +5 -1
static/main.js +30 -1
static/style.css +58 -10

static/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -33,6 +33,10 @@
                     <button class="mac-tab" data-tab="details">Model Details</button>
                     <button class="mac-tab" data-tab="specs">API Specs</button>
                 </div>
             </div>
             <div class="window-content">

 <!DOCTYPE html>
+<html lang="en" data-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
                     <button class="mac-tab" data-tab="details">Model Details</button>
                     <button class="mac-tab" data-tab="specs">API Specs</button>
                 </div>
+                <button id="theme-toggle" class="theme-toggle" title="Toggle Theme">
+                    <svg id="sun-icon" class="hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+                    <svg id="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                </button>
             </div>
             <div class="window-content">

static/main.js CHANGED Viewed

@@ -28,11 +28,40 @@ document.addEventListener('DOMContentLoaded', () => {
         // Tab elements
         tabs: document.querySelectorAll('.mac-tab'),
-        panes: document.querySelectorAll('.tab-pane')
     };
     let isDone = false;
     // Tab Switching Logic
     elements.tabs.forEach(tab => {
         tab.addEventListener('click', () => {

         // Tab elements
         tabs: document.querySelectorAll('.mac-tab'),
+        panes: document.querySelectorAll('.tab-pane'),
+        // Theme elements
+        themeToggle: document.getElementById('theme-toggle'),
+        html: document.documentElement,
+        sunIcon: document.getElementById('sun-icon'),
+        moonIcon: document.getElementById('moon-icon')
     };
     let isDone = false;
+    // Theme Logic
+    function setTheme(theme) {
+        elements.html.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        if (theme === 'dark') {
+            elements.sunIcon.classList.add('hidden');
+            elements.moonIcon.classList.remove('hidden');
+        } else {
+            elements.sunIcon.classList.remove('hidden');
+            elements.moonIcon.classList.add('hidden');
+        }
+    }
+    // Initialize theme
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    setTheme(savedTheme);
+    elements.themeToggle.addEventListener('click', () => {
+        const currentTheme = elements.html.getAttribute('data-theme');
+        setTheme(currentTheme === 'dark' ? 'light' : 'dark');
+    });
     // Tab Switching Logic
     elements.tabs.forEach(tab => {
         tab.addEventListener('click', () => {

static/style.css CHANGED Viewed

@@ -1,17 +1,39 @@
-:root {
     --bg-primary: #000000;
     --bg-card: #151515;
     --bg-input: #1f1f1f;
     --border-card: #2e2e2e;
     --border-input: #3e3e3e;
-    /* NVIDIA Green */
-    --accent-primary: #76b900;
     --accent-hover: #88d400;
     --accent-glow: rgba(118, 185, 0, 0.2);
     --text-main: #ffffff;
     --text-muted: #a1a1aa;
     --success: #76b900;
     --error: #ef4444;
 }
@@ -75,7 +97,7 @@ h1 {
 }
 .mac-title-bar {
-    background: #1a1a1a;
     height: 44px;
     display: flex;
     align-items: center;
@@ -255,14 +277,14 @@ h2 {
 }
 .code-container {
-    background: #09090b;
     border-radius: 6px;
     overflow: hidden;
     border: 1px solid var(--border-card);
 }
 .code-header {
-    background: #18181b;
     padding: 0.5rem 1rem;
     font-size: 0.75rem;
     color: var(--text-muted);
@@ -355,7 +377,7 @@ button {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
-    background: #18181b;
     border: 1px solid var(--accent-primary);
     border-left: 4px solid var(--accent-primary);
     padding: 1rem 1.25rem;
@@ -366,11 +388,37 @@ button {
     box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 15px var(--accent-glow);
     transform: translateY(100px);
     opacity: 0;
-    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     z-index: 100;
     min-width: 320px;
 }
 @keyframes slideUp {
     to {
         transform: translateY(0);

+    --secondary: #52525b;
+}
+/* Default to Dark Mode */
+[data-theme='dark'] {
     --bg-primary: #000000;
     --bg-card: #151515;
     --bg-input: #1f1f1f;
     --border-card: #2e2e2e;
     --border-input: #3e3e3e;
+    --accent-primary: #76b900; /* NVIDIA Green */
     --accent-hover: #88d400;
     --accent-glow: rgba(118, 185, 0, 0.2);
     --text-main: #ffffff;
     --text-muted: #a1a1aa;
+    --code-bg: #09090b;
+    --header-bg: #1a1a1a;
+}
+/* Light Mode */
+[data-theme='light'] {
+    --bg-primary: #f5f5f7;
+    --bg-card: #ffffff;
+    --bg-input: #ffffff;
+    --border-card: #d2d2d7;
+    --border-input: #e5e7eb;
+    --accent-primary: #0071e3; /* Mac Blue */
+    --accent-hover: #0077ed;
+    --accent-glow: rgba(0, 113, 227, 0.1);
+    --text-main: #1d1d1f;
+    --text-muted: #6e6e73;
+    --code-bg: #f5f5f7;
+    --header-bg: #ebebeb;
+}
+:root {
     --success: #76b900;
     --error: #ef4444;
 }
 }
 .mac-title-bar {
+    background: var(--header-bg);
     height: 44px;
     display: flex;
     align-items: center;
 }
 .code-container {
+    background: var(--code-bg);
     border-radius: 6px;
     overflow: hidden;
     border: 1px solid var(--border-card);
 }
 .code-header {
+    background: var(--header-bg);
     padding: 0.5rem 1rem;
     font-size: 0.75rem;
     color: var(--text-muted);
     position: fixed;
     bottom: 2rem;
     right: 2rem;
+    background: var(--bg-card);
     border: 1px solid var(--accent-primary);
     border-left: 4px solid var(--accent-primary);
     padding: 1rem 1.25rem;
     box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 15px var(--accent-glow);
     transform: translateY(100px);
     opacity: 0;
+    transition: transform 0.3s, opacity 0.3s;
     z-index: 100;
     min-width: 320px;
 }
+/* Theme Toggle Button */
+.theme-toggle {
+    position: absolute;
+    right: 16px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--text-muted);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    margin: 0;
+    transition: color 0.2s;
+}
+.theme-toggle:hover {
+    color: var(--text-main);
+}
+.theme-toggle svg {
+    width: 18px;
+    height: 18px;
+}
 @keyframes slideUp {
     to {
         transform: translateY(0);