Add Light/Dark card appearance toggle

Adds an Appearance row to the UI (Dark/Light buttons) that applies a
.card-theme-light modifier class to #capture, switching the card to
GitHub's light-mode palette (white background, #f6f8fa header, #d0d7de
borders). The Terminal template's internal window stays dark in light
mode. applyTemplate() now re-applies the card theme class after resetting
card.className so switching templates preserves the chosen appearance.

https://claude.ai/code/session_019mFhzJHWmUB8cTbLksb6ev

Author: claude

assets/css/styles.css

@@ -813,6 +813,23 @@ h1 span {
     font-weight: 500;
 }
 
+/* ========================= */
+/* Card appearance toggle    */
+/* ========================= */
+.card-theme-row {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 28px;
+    align-items: center;
+}
+
+.card-theme-label {
+    font-size: 16px;
+    color: var(--fg3);
+    margin-right: 4px;
+    font-weight: 500;
+}
+
 .platform-desktop .card-header {
     height: 70px;
 }
@@ -1329,3 +1346,93 @@ h1 span {
     grid-auto-rows: minmax(55px, auto);
     gap: 10px;
 }
+
+/* ========================= */
+/* Light card theme          */
+/* ========================= */
+.card-theme-light {
+    background: #ffffff;
+}
+
+.card-theme-light .card-header {
+    background: #f6f8fa;
+    border-bottom-color: #d0d7de;
+}
+
+.card-theme-light .gh-logo {
+    fill: #24292f;
+}
+
+.card-theme-light .gh-path {
+    background: #ffffff;
+    border-color: #d0d7de;
+}
+
+.card-theme-light .gh-path-text {
+    color: #57606a;
+}
+
+.card-theme-light .gh-path-slash {
+    border-color: #d0d7de;
+    color: #57606a;
+}
+
+.card-theme-light .hdr-nav span {
+    color: #24292f;
+}
+
+.card-theme-light .hdr-btn {
+    background: #f6f8fa;
+    border-color: #d0d7de;
+    color: #24292f;
+}
+
+.card-theme-light .hdr-btn.cnt {
+    background: #ffffff;
+    color: #24292f;
+}
+
+.card-theme-light .hdr-btn-icon {
+    fill: #57606a;
+}
+
+.card-theme-light .card-footer {
+    background: rgba(246, 248, 250, 0.9);
+    border-top-color: #d0d7de;
+}
+
+.card-theme-light .foot-item {
+    color: #57606a;
+}
+
+.card-theme-light .foot-icon {
+    fill: #57606a;
+}
+
+.card-theme-light .main-repo-title {
+    color: #1f2328;
+}
+
+.card-theme-light .main-repo-desc {
+    color: rgba(31, 35, 40, 0.7);
+}
+
+.card-theme-light .bento-box {
+    background: rgba(31, 35, 40, 0.04);
+    border-color: rgba(31, 35, 40, 0.12);
+}
+
+.card-theme-light .bento-box-text {
+    color: #1f2328;
+}
+
+/* Terminal template in light mode — keep dark terminal window */
+.card-theme-light .template-terminal .card-body {
+    background: transparent;
+}
+
+.card-theme-light .template-terminal .bento-container {
+    background: #0d1117;
+    border-color: #30363d;
+    color: var(--tc, #3fb950);
+}

assets/js/app.js

@@ -8,6 +8,7 @@ const elements = getElements();
 let currentTheme = DEFAULT_THEME;
 let currentTemplate = 'grid';
 let currentPlatform = 'mobile';
+let currentCardTheme = 'dark';
 let customThemeHex = '#58a6ff';
 
 const ANIMATION_DURATION = 4000;
@@ -70,11 +71,29 @@ function applyTemplate(templateName) {
     if (currentPlatform === 'desktop') {
         card.classList.add('platform-desktop');
     }
+    if (currentCardTheme === 'light') {
+        card.classList.add('card-theme-light');
+    }
     elements.templateButtons.forEach((btn) => {
         btn.classList.toggle('active', btn.dataset.template === templateName);
     });
 }
 
+function applyCardTheme(themeName) {
+    currentCardTheme = themeName;
+    const card = elements.capture;
+
+    if (themeName === 'light') {
+        card.classList.add('card-theme-light');
+    } else {
+        card.classList.remove('card-theme-light');
+    }
+
+    elements.cardThemeButtons.forEach((btn) => {
+        btn.classList.toggle('active', btn.dataset.cardTheme === themeName);
+    });
+}
+
 function applyPlatform(platformName) {
     currentPlatform = platformName;
     const card = elements.capture;
@@ -279,12 +298,16 @@ function bindEvents() {
     elements.platformButtons.forEach((btn) => {
         btn.addEventListener('click', () => applyPlatform(btn.dataset.platform));
     });
+    elements.cardThemeButtons.forEach((btn) => {
+        btn.addEventListener('click', () => applyCardTheme(btn.dataset.cardTheme));
+    });
 }
 
 bindEvents();
 applyTheme(DEFAULT_THEME);
 applyTemplate('grid');
 applyPlatform('mobile');
+applyCardTheme('dark');
 startBlobAnimation();
 
 // Custom color picker initialization

assets/js/dom.js

@@ -25,7 +25,8 @@ export function getElements() {
         blob3: document.getElementById('blob3'),
         themeDots: Array.from(document.querySelectorAll('.theme-dot')),
         templateButtons: Array.from(document.querySelectorAll('[data-template]')),
-        platformButtons: Array.from(document.querySelectorAll('[data-platform]'))
+        platformButtons: Array.from(document.querySelectorAll('[data-platform]')),
+        cardThemeButtons: Array.from(document.querySelectorAll('[data-card-theme]'))
     };
 }
 

index.html

@@ -71,6 +71,12 @@ <h1>GitHub Social <span>Preview</span></h1>
         <button class="template-btn" data-platform="desktop">Desktop</button>
     </div>
 
+    <div class="card-theme-row">
+        <span class="card-theme-label">Appearance</span>
+        <button class="template-btn active" data-card-theme="dark">Dark</button>
+        <button class="template-btn" data-card-theme="light">Light</button>
+    </div>
+
     <div class="dl-row">
         <button class="btn-dl" id="btn-jpg">
             <svg width="15" height="15" fill="currentColor" viewBox="0 0 16 16"><path d="M2.75 14A1.75 1.75 0 011 12.25v-2.5a.75.75 0 011.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25v-2.5a.75.75 0 011.5 0v2.5A1.75 1.75 0 0113.25 14H2.75z"/><path d="M7.25 7.689V2a.75.75 0 011.5 0v5.689l1.97-1.969a.749.749 0 111.06 1.06l-3.25 3.25a.749.749 0 01-1.06 0L4.22 6.78a.749.749 0 111.06-1.06l1.97 1.969z"/></svg>