From 90cfa9904a633b70860d7a103f48b0f29c6159e6 Mon Sep 17 00:00:00 2001 From: samarJ19 Date: Fri, 21 Nov 2025 16:30:53 +0530 Subject: [PATCH 1/5] fix:system pref fix --- docs/_document.html | 41 +++++++++--- docs/demo/demo.css | 15 ----- docs/demo/demo.js | 153 ++++++++++++++++++++++++++++++------------- docs/demo/index.html | 52 +++++++++++++-- docs/js/index.js | 140 ++++++++++++++++++++++++--------------- 5 files changed, 275 insertions(+), 126 deletions(-) diff --git a/docs/_document.html b/docs/_document.html index b4f4db151d..2db00323be 100644 --- a/docs/_document.html +++ b/docs/_document.html @@ -9,12 +9,38 @@ + @@ -20,7 +62,7 @@ /> - +

Marked Demo

ยท Daring Fireball Demo - diff --git a/docs/js/index.js b/docs/js/index.js index 1a62c665ff..67a7c0e91c 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -1,84 +1,122 @@ document.addEventListener('DOMContentLoaded', function() { // --- Theme Toggling --- const themeToggle = document.getElementById('theme-toggle'); + const themeToggleIcon = themeToggle ? themeToggle.querySelector('[data-theme-icon]') : null; + const themeToggleText = themeToggle ? themeToggle.querySelector('[data-theme-text]') : null; + + const THEME_STORAGE_KEY = 'theme-preference'; + const LEGACY_STORAGE_KEY = 'theme'; + const THEME_ORDER = ['system', 'light', 'dark']; + const TOGGLE_UI = { + system: { icon: 'brightness_auto', text: 'System' }, + light: { icon: 'light_mode', text: 'Light' }, + dark: { icon: 'dark_mode', text: 'Dark' }, + }; - // Function to apply theme function applyTheme(theme) { if (theme === 'dark') { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } + document.documentElement.setAttribute('data-theme', theme); } - // Function to get saved theme or system preference - function getPreferredTheme() { - // Check localStorage first - const savedTheme = localStorage.getItem('theme'); - if (savedTheme) { - return savedTheme; - } - - // Check system preference + function getSystemTheme() { if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { return 'dark'; } - - // Default to light return 'light'; } - // Apply theme on page load - const initialTheme = getPreferredTheme(); - applyTheme(initialTheme); - - // Theme toggle click handler - if (themeToggle) { - themeToggle.addEventListener('click', function() { - const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; - const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + function sanitisePreference(value) { + return value === 'dark' || value === 'light' || value === 'system' ? value : null; + } - // Apply and save the new theme - applyTheme(newTheme); - localStorage.setItem('theme', newTheme); - }); + function readStoredPreference() { + try { + const stored = sanitisePreference(localStorage.getItem(THEME_STORAGE_KEY)); + if (stored) { + return stored; + } + return sanitisePreference(localStorage.getItem(LEGACY_STORAGE_KEY)); + } catch { + return null; + } } - // Listen for system theme changes - if (window.matchMedia) { - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) { - // Only apply system preference if user hasn't manually set a preference - if (!localStorage.getItem('theme')) { - applyTheme(e.matches ? 'dark' : 'light'); + function writeStoredPreference(preference) { + try { + localStorage.setItem(THEME_STORAGE_KEY, preference); + if (preference === 'light' || preference === 'dark') { + localStorage.setItem(LEGACY_STORAGE_KEY, preference); + } else { + localStorage.removeItem(LEGACY_STORAGE_KEY); } - }); + } catch { + // Storage might be unavailable; ignore + } } - // --- Navigation Link Highlighting --- - const navLinks = document.querySelectorAll('nav a'); - const activeClasses = ['text-primary', 'dark:text-primary', 'font-medium']; - const inactiveClasses = ['text-subtle-light', 'dark:text-subtle-dark']; + function getEffectiveTheme(preference) { + return preference === 'system' ? getSystemTheme() : preference; + } - function hashChange() { - // Use location.pathname and location.hash for more accurate matching - const currentUrl = window.location.pathname + window.location.hash; + function updateToggle(preference) { + if (!themeToggle) { + return; + } + const details = TOGGLE_UI[preference] || TOGGLE_UI.system; + if (themeToggleIcon) { + themeToggleIcon.textContent = details.icon; + } + if (themeToggleText) { + themeToggleText.textContent = details.text; + } + themeToggle.setAttribute('data-theme-mode', preference); + const label = `Switch theme (current: ${details.text})`; + themeToggle.setAttribute('aria-label', label); + themeToggle.title = label; + } - navLinks.forEach(function(link) { - const linkUrl = new URL(link.href); - const linkPath = linkUrl.pathname + linkUrl.hash; + let currentPreference = readStoredPreference() || 'system'; - if (linkPath === currentUrl) { - link.classList.add(...activeClasses); - link.classList.remove(...inactiveClasses); - } else { - link.classList.remove(...activeClasses); - link.classList.add(...inactiveClasses); - } + function applyPreference(preference, persist) { + currentPreference = preference; + const effectiveTheme = getEffectiveTheme(preference); + applyTheme(effectiveTheme); + document.documentElement.setAttribute('data-theme-preference', preference); + updateToggle(preference); + if (persist) { + writeStoredPreference(preference); + } + } + + applyPreference(currentPreference, true); + + if (themeToggle) { + themeToggle.addEventListener('click', function() { + const index = THEME_ORDER.indexOf(currentPreference); + const nextIndex = index === -1 ? 0 : (index + 1) % THEME_ORDER.length; + const nextPreference = THEME_ORDER[nextIndex]; + applyPreference(nextPreference, true); }); } - window.addEventListener('hashchange', hashChange); - hashChange(); // Run on initial load + const systemMatcher = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null; + if (systemMatcher) { + const handleSystemChange = function() { + if (currentPreference === 'system') { + applyPreference('system', false); + } + }; + + if (typeof systemMatcher.addEventListener === 'function') { + systemMatcher.addEventListener('change', handleSystemChange); + } else if (typeof systemMatcher.addListener === 'function') { + systemMatcher.addListener(handleSystemChange); + } + } // --- Copy-to-Clipboard Button --- const allPres = document.querySelectorAll('pre'); From fa7f6165ea2b02e35f630d57504a6956d92542d2 Mon Sep 17 00:00:00 2001 From: samarJ19 Date: Sat, 22 Nov 2025 01:46:48 +0530 Subject: [PATCH 2/5] fix: fixes demo page light mode error --- docs/demo/demo.css | 101 +++++++++++------------------------------ docs/demo/demo.js | 2 +- docs/demo/preview.html | 39 ++++++++++++++++ 3 files changed, 67 insertions(+), 75 deletions(-) diff --git a/docs/demo/demo.css b/docs/demo/demo.css index bc5802bca5..16d5f2de91 100644 --- a/docs/demo/demo.css +++ b/docs/demo/demo.css @@ -2,8 +2,8 @@ html, body { margin: 0; padding: 0; font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #1F2937; - background-color: #FFFFFF; + color: var(--text-color); + background-color: var(--background-color); height: 100%; overflow: auto; transition: background-color 0.3s ease, color 0.3s ease; @@ -21,7 +21,7 @@ header { align-items: center; height: 68px; box-sizing: border-box; - border-bottom: 1px solid #E5E7EB; + border-bottom: 1px solid var(--border-color); gap: 16px; } @@ -45,8 +45,9 @@ header h1 { font-size: 14px; } + .other-demos a { - color: #6B7280; + color: var(--subtle-text-color); text-decoration: none; transition: color 0.2s ease; } @@ -56,9 +57,10 @@ header h1 { } .other-demos .separator { - color: #9CA3AF; + color: var(--subtle-text-color); } + .theme-toggle { margin-left: 16px; display: flex; @@ -68,7 +70,7 @@ header h1 { border: none; border-radius: 8px; background-color: transparent; - color: #6B7280; + color: var(--subtle-text-color); cursor: pointer; font-family: inherit; font-size: 14px; @@ -77,8 +79,8 @@ header h1 { } .theme-toggle:hover { - background-color: #F3F4F6; - color: #1F2937; + background-color: var(--code-bg-color); + color: var(--text-color); } .theme-toggle .material-icons { @@ -101,24 +103,28 @@ header h1 { box-sizing: border-box; } + .label { padding: 8px 12px; - background-color: #F3F4F6; - border: 1px solid #E5E7EB; + background-color: var(--code-bg-color); + border: 1px solid var(--border-color); border-radius: 8px 8px 0 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; + color: var(--text-color); } + .label select, .label button { padding: 4px 8px; border-radius: 4px; - border: 1px solid #D1D5DB; - background-color: #FFFFFF; + border: 1px solid var(--border-color); + background-color: var(--background-color); + color: var(--text-color); font-size: 13px; cursor: pointer; transition: border-color 0.2s ease; @@ -138,16 +144,17 @@ header h1 { text-decoration: underline; } + .pane, .inputPane { padding: 12px; - border: 1px solid #E5E7EB; + border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 8px 8px; overflow: auto; flex-grow: 1; flex-shrink: 1; - background-color: #FFFFFF; - color: #1F2937; + background-color: var(--background-color); + color: var(--text-color); transition: background-color 0.3s ease, border-color 0.3s ease; } @@ -170,7 +177,7 @@ header h1 { justify-content: center; height: 100vh; font-size: 18px; - color: #6B7280; + color: var(--subtle-text-color); } .error { @@ -194,73 +201,19 @@ header h1 { color: #3B82F6; } -/* Dark mode styles */ -body.dark { - color: #F9FAFB; - background-color: #111827; -} - -body.dark header { - border-bottom-color: #374151; -} - -body.dark .other-demos a { - color: #9CA3AF; -} - -body.dark .other-demos a:hover { - color: #3B82F6; -} - -body.dark .other-demos .separator { - color: #6B7280; -} - -body.dark .theme-toggle { - color: #9CA3AF; -} - -body.dark .theme-toggle:hover { - background-color: #1F2937; - color: #F9FAFB; -} - -body.dark .label { - background-color: #1F2937; - border-color: #374151; - color: #F9FAFB; -} - -body.dark .label select, -body.dark .label button { - background-color: #111827; - color: #F9FAFB; - border-color: #374151; -} - -body.dark .label select:hover, -body.dark .label button:hover { - border-color: #3B82F6; -} - -body.dark .pane, -body.dark .inputPane { - background-color: #1F2937; - border-color: #374151; - color: #F9FAFB; -} -body.dark .error { +/* Dark mode specific overrides */ +html.dark .error { background-color: #2c1d1d !important; border-color: #F87171 !important; color: #FCA5A5; } -body.dark .loadingError { +html.dark .loadingError { background-color: #2c1d1d; color: #FCA5A5; } -body.dark #loading { +html.dark #loading { color: #9CA3AF; } diff --git a/docs/demo/demo.js b/docs/demo/demo.js index 71df50e4a3..50c3a20744 100644 --- a/docs/demo/demo.js +++ b/docs/demo/demo.js @@ -272,7 +272,7 @@ function handleIframeLoad() { // Apply current theme to the iframe try { - const currentTheme = document.body.classList.contains('dark') + const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; if ($previewIframe && $previewIframe.contentDocument) { diff --git a/docs/demo/preview.html b/docs/demo/preview.html index d3f21e6e41..95aabc87db 100644 --- a/docs/demo/preview.html +++ b/docs/demo/preview.html @@ -4,6 +4,45 @@ marked.js preview + From b190e431a0ca119e29b55425f72554dc27256a42 Mon Sep 17 00:00:00 2001 From: Samar Joshi <140048595+samarJ19@users.noreply.github.com> Date: Wed, 17 Dec 2025 20:47:07 +0530 Subject: [PATCH 3/5] Update docs/demo/demo.js Co-authored-by: Steven --- docs/demo/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/demo/demo.js b/docs/demo/demo.js index 50c3a20744..913b9d9bfd 100644 --- a/docs/demo/demo.js +++ b/docs/demo/demo.js @@ -160,7 +160,7 @@ applyPreference(currentPreference, true); if ($themeToggle) { $themeToggle.addEventListener('click', function() { const index = THEME_ORDER.indexOf(currentPreference); - const nextIndex = index === -1 ? 0 : (index + 1) % THEME_ORDER.length; + const nextIndex = (index + 1) % THEME_ORDER.length; const nextPreference = THEME_ORDER[nextIndex]; applyPreference(nextPreference, true); }); From 32bf2fac7ddff55301b76a47ad3294479869bcca Mon Sep 17 00:00:00 2001 From: Samar Joshi <140048595+samarJ19@users.noreply.github.com> Date: Wed, 17 Dec 2025 20:47:35 +0530 Subject: [PATCH 4/5] Update docs/js/index.js Co-authored-by: Steven --- docs/js/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/js/index.js b/docs/js/index.js index 67a7c0e91c..fe69aca6b5 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -30,7 +30,7 @@ document.addEventListener('DOMContentLoaded', function() { } function sanitisePreference(value) { - return value === 'dark' || value === 'light' || value === 'system' ? value : null; + return THEME_ORDER.includes(value) ? value : null; } function readStoredPreference() { From 47f96aa48c191d7c8293ead538e0fea1569ce6bf Mon Sep 17 00:00:00 2001 From: Samar Joshi <140048595+samarJ19@users.noreply.github.com> Date: Wed, 17 Dec 2025 20:48:37 +0530 Subject: [PATCH 5/5] Update docs/demo/demo.js Co-authored-by: Steven --- docs/demo/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/demo/demo.js b/docs/demo/demo.js index 913b9d9bfd..47d28fd112 100644 --- a/docs/demo/demo.js +++ b/docs/demo/demo.js @@ -93,7 +93,7 @@ function getSystemTheme() { } function sanitisePreference(value) { - return value === 'dark' || value === 'light' || value === 'system' ? value : null; + return THEME_ORDER.includes(value) ? value : null; } function readStoredPreference() {