This is an automated email from the ASF dual-hosted git repository.
alamb pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/datafusion-site.git
The following commit(s) were added to refs/heads/main by this push:
new 8c89c73 Add dark mode support (#148)
8c89c73 is described below
commit 8c89c73e93ee86314146402f102f25124fb65b20
Author: Abhinandan Kaushik <[email protected]>
AuthorDate: Mon Mar 16 16:35:27 2026 +0530
Add dark mode support (#148)
* fixed:about
* Update content/theme/templates/menu.html
Co-authored-by: Copilot <[email protected]>
* added spell check action
* added spell check github-action
* fixed blog-typos and added flase-positive in the list
* typo lower-case issue fixed
* added dark-mode support
* fix blog-typos and added false-positive into the list
* typos fix-attempt-1
* addec dark-mode
* removed extra box-style and added simple dark-mode feature
* fixed all dark-mode issues
* finalyze dark-mode properties
* feat: refine dark mode toggle UX and simplify theme styles
* simplify dark mode script flow while keeping persisted theme behavior
* add accessible toggle state with aria-pressed
* switch toggle icons to stable sun/moon glyphs to avoid icon fallback
issues
* reduce dark mode CSS to MVP essentials and remove non-essential overrides
* keep code block readability in dark mode with explicit highlight styles
* Update content/js/dark-mode.js
Co-authored-by: Kevin Liu <[email protected]>
* Update content/js/dark-mode.js
Co-authored-by: Kevin Liu <[email protected]>
---------
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Kevin Liu <[email protected]>
Co-authored-by: Kevin Liu <[email protected]>
---
_typos.toml | 4 +-
content/css/dark-mode.css | 100 ++++++++++++++++++++++++++++++++++++
content/js/dark-mode.js | 46 +++++++++++++++++
content/theme/templates/menu.html | 4 ++
content/theme/templates/styles.html | 2 +
5 files changed, 155 insertions(+), 1 deletion(-)
diff --git a/_typos.toml b/_typos.toml
index da91470..a61f257 100644
--- a/_typos.toml
+++ b/_typos.toml
@@ -31,7 +31,9 @@ extend-ignore-re = [
# Custom dictionary for technical terms (whole word matching only)
[default.extend-words]
-# GitHub usernames (lowercase for case-insensitive matching)
+# Add any false positives here if needed
+
+# GitHub usernames (keys must be lowercase for case-insensitive matching)
youy = "youy"
# Product/Service names
diff --git a/content/css/dark-mode.css b/content/css/dark-mode.css
new file mode 100644
index 0000000..95b2156
--- /dev/null
+++ b/content/css/dark-mode.css
@@ -0,0 +1,100 @@
+/* Dark Mode Styles */
+:root {
+ --bg-primary: #ffffff;
+ --text-primary: #212529;
+ --text-secondary: #6c757d;
+ --navbar-bg: #343a40;
+ --code-bg: #f8f9fa;
+}
+
+[data-theme="dark"] {
+ --bg-primary: #0d1117;
+ --text-primary: #e6edf3;
+ --text-secondary: #8b949e;
+ --navbar-bg: #0d1117;
+ --code-bg: #161b22;
+}
+
+body {
+ background-color: var(--bg-primary) !important;
+ color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .bg-white {
+ background-color: var(--bg-primary) !important;
+ color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] a {
+ color: #58a6ff !important;
+}
+
+[data-theme="dark"] a:hover {
+ color: #79c0ff !important;
+}
+
+[data-theme="dark"] .navbar-dark {
+ background-color: var(--navbar-bg) !important;
+}
+
+[data-theme="dark"] pre {
+ background-color: var(--code-bg) !important;
+ border-radius: 6px;
+}
+
+.dark-mode-toggle {
+ background: none;
+ border: none;
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 1.2rem;
+ cursor: pointer;
+ padding: 0;
+ margin-left: 1rem;
+ line-height: 1;
+ display: inline-flex;
+ align-items: center;
+ transition: color 0.15s ease;
+}
+
+.dark-mode-toggle:hover {
+ color: rgba(255, 255, 255, 1);
+}
+
+.dark-mode-toggle:focus {
+ outline: 2px solid #79c0ff;
+ outline-offset: 2px;
+}
+
+.dark-mode-toggle:focus:not(:focus-visible) {
+ outline: none;
+}
+
+.sun-icon {
+ display: none;
+}
+
+.moon-icon {
+ display: inline;
+}
+
+.sun-icon,
+.moon-icon {
+ line-height: 1;
+}
+
+[data-theme="dark"] .sun-icon {
+ display: inline;
+}
+
+[data-theme="dark"] .moon-icon {
+ display: none;
+}
+
+[data-theme="dark"] .hljs {
+ background: var(--code-bg) !important;
+ color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .hljs-comment {
+ color: var(--text-secondary) !important;
+}
diff --git a/content/js/dark-mode.js b/content/js/dark-mode.js
new file mode 100644
index 0000000..34de755
--- /dev/null
+++ b/content/js/dark-mode.js
@@ -0,0 +1,46 @@
+(function() {
+ 'use strict';
+
+ const root = document.documentElement;
+
+ function getTheme() {
+ try {
+ return localStorage.getItem('theme') || 'light';
+ } catch {
+ return 'light';
+ }
+ }
+
+ function setButtonState(theme) {
+ const toggleButton = document.getElementById('dark-mode-toggle');
+ if (toggleButton) {
+ toggleButton.setAttribute('aria-pressed', theme === 'dark' ?
'true' : 'false');
+ }
+ }
+
+ function applyTheme(theme) {
+ root.setAttribute('data-theme', theme);
+ try { localStorage.setItem('theme', theme); } catch { }
+ setButtonState(theme);
+ }
+
+ function toggleTheme() {
+ applyTheme(getTheme() === 'dark' ? 'light' : 'dark');
+ }
+
+ function setupToggleButton() {
+ const toggleButton = document.getElementById('dark-mode-toggle');
+ if (toggleButton) {
+ setButtonState(getTheme());
+ toggleButton.addEventListener('click', toggleTheme);
+ }
+ }
+
+ root.setAttribute('data-theme', getTheme());
+
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', setupToggleButton);
+ } else {
+ setupToggleButton();
+ }
+})();
diff --git a/content/theme/templates/menu.html
b/content/theme/templates/menu.html
index c0f3ab2..c8abbd3 100644
--- a/content/theme/templates/menu.html
+++ b/content/theme/templates/menu.html
@@ -15,6 +15,10 @@
<a class="nav-link" href="/blog/feed.xml">RSS</a>
</li>
</ul>
+ <button id="dark-mode-toggle" type="button"
class="dark-mode-toggle" aria-label="Toggle dark mode" aria-pressed="false"
title="Toggle dark mode">
+ <span class="sun-icon" aria-hidden="true">☀</span>
+ <span class="moon-icon" aria-hidden="true">☾</span>
+ </button>
</div>
</div>
</nav>
diff --git a/content/theme/templates/styles.html
b/content/theme/templates/styles.html
index f3eddf6..8ea375f 100644
--- a/content/theme/templates/styles.html
+++ b/content/theme/templates/styles.html
@@ -3,5 +3,7 @@
<link href="/blog/css/headerlink.css" rel="stylesheet">
<link href="/blog/highlight/default.min.css" rel="stylesheet">
<link href="/blog/css/app.css" rel="stylesheet">
+<link href="/blog/css/dark-mode.css" rel="stylesheet">
+<script src="/blog/js/dark-mode.js"></script>
<script src="/blog/highlight/highlight.js"></script>
<script>hljs.highlightAll();</script>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
