From 8a35156fc271c633e243fb8e13a3c00fc8c69c65 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 13 Apr 2026 10:33:07 +0000 Subject: [PATCH 1/2] 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 --- assets/css/styles.css | 107 ++++++++++++++++++++++++++++++++++++++++++ assets/js/app.js | 23 +++++++++ assets/js/dom.js | 3 +- index.html | 6 +++ 4 files changed, 138 insertions(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index a9616ab..6b635c8 100644 --- a/assets/css/styles.css +++ b/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); +} diff --git a/assets/js/app.js b/assets/js/app.js index 3864e12..3652bb2 100644 --- a/assets/js/app.js +++ b/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 diff --git a/assets/js/dom.js b/assets/js/dom.js index c8c4e73..9f52f5d 100644 --- a/assets/js/dom.js +++ b/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]')) }; } diff --git a/index.html b/index.html index b7fd9c8..783d756 100644 --- a/index.html +++ b/index.html @@ -71,6 +71,12 @@

GitHub Social Preview

+
+ Appearance + + +
+
-
+
Appearance - - + +