You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@maka.apache.org by as...@apache.org on 2026/09/03 13:34:25 UTC
(maka) branch feat/website-podling-site updated: feat(website): add a remembered light/dark toggle
This is an automated email from the ASF dual-hosted git repository.
Astro-Han pushed a commit to branch feat/website-podling-site
in repository https://gitbox.apache.org/repos/asf/maka.git
The following commit(s) were added to refs/heads/feat/website-podling-site by this push:
new 18f197e25b feat(website): add a remembered light/dark toggle
18f197e25b is described below
commit 18f197e25b5764daba59721b8c566079e0049dba
Author: AstroHan <le...@outlook.com>
AuthorDate: Thu Sep 3 21:34:17 2026 +0800
feat(website): add a remembered light/dark toggle
Reviewers asked for a switch rather than following the OS alone. The choice
is stored per browser and applied before first paint; without one the OS
setting still decides.
Generated-by: Claude Code
---
website/README.md | 2 +-
website/src/copy/en.ts | 1 +
website/src/copy/types.ts | 1 +
website/src/copy/zh-CN.ts | 1 +
website/src/layouts/Site.astro | 37 ++++++++++++++++++++++++++++++++++++-
website/src/styles/site.css | 32 +++++++++++++++++++++++++++++++-
6 files changed, 71 insertions(+), 3 deletions(-)
diff --git a/website/README.md b/website/README.md
index 48f6436abf..ba0b849b0e 100644
--- a/website/README.md
+++ b/website/README.md
@@ -36,7 +36,7 @@ npm --workspace @maka/website run test:dist
## Design
-Colour, radius and surface tokens are the desktop app's defaults, copied by value from `apps/desktop/src/renderer/maka-tokens.css` into `src/styles/site.css`. The site follows the viewer's colour scheme. Fonts are Geist and Geist Mono (SIL Open Font License 1.1), self-hosted from the `@fontsource-variable` packages the desktop app already depends on; nothing loads from a third party. The logo is `apps/desktop/assets/app-icons/sky.png`, the same file the README uses.
+Colour, radius and surface tokens are the desktop app's defaults, copied by value from `apps/desktop/src/renderer/maka-tokens.css` into `src/styles/site.css`. The site follows the viewer's colour scheme until they pick one with the toggle in the top bar, which is remembered in that browser. Fonts are Geist and Geist Mono (SIL Open Font License 1.1), self-hosted from the `@fontsource-variable` packages the desktop app already depends on; nothing loads from a third party. The logo is `apps [...]
## Publishing
diff --git a/website/src/copy/en.ts b/website/src/copy/en.ts
index e7fd91ec07..e8e40b8f1b 100644
--- a/website/src/copy/en.ts
+++ b/website/src/copy/en.ts
@@ -30,6 +30,7 @@ export const en: Copy = {
siteName: 'Apache Maka (Incubating)',
positioning:
'Apache Maka (Incubating) is a high-performance agent workspace that keeps a complete record of everything it did.',
+ theme: { toDark: 'Switch to dark mode', toLight: 'Switch to light mode' },
nav: {
docs: 'Docs',
downloads: 'Downloads',
diff --git a/website/src/copy/types.ts b/website/src/copy/types.ts
index 9b2efd1710..d7c1a55513 100644
--- a/website/src/copy/types.ts
+++ b/website/src/copy/types.ts
@@ -26,6 +26,7 @@ export interface Copy {
langLabel: string;
siteName: string;
positioning: string;
+ theme: { toDark: string; toLight: string };
nav: {
docs: string;
downloads: string;
diff --git a/website/src/copy/zh-CN.ts b/website/src/copy/zh-CN.ts
index 389f7d08e9..f91d56de11 100644
--- a/website/src/copy/zh-CN.ts
+++ b/website/src/copy/zh-CN.ts
@@ -25,6 +25,7 @@ export const zhCN: Copy = {
langLabel: '中文',
siteName: 'Apache Maka (Incubating)',
positioning: 'Apache Maka (Incubating) 是一个高性能的 Agent 工作台，完整记录它做过的每一件事。',
+ theme: { toDark: '切换到深色模式', toLight: '切换到浅色模式' },
nav: {
docs: '文档',
downloads: '下载',
diff --git a/website/src/layouts/Site.astro b/website/src/layouts/Site.astro
index cb454ed699..a4eec28f54 100644
--- a/website/src/layouts/Site.astro
+++ b/website/src/layouts/Site.astro
@@ -51,6 +51,19 @@ const downloads = `/${copy.locale}/downloads/`;
{locales.map((locale) => <link rel="alternate" hreflang={locale} href={new URL(href(locale), Astro.site)} />)}
<link rel="alternate" hreflang="x-default" href={new URL(href('en'), Astro.site)} />
<link rel="icon" type="image/png" href={logo.src} />
+ <script is:inline>
+ // Resolve the theme before first paint: a remembered choice wins, otherwise the OS setting.
+ (() => {
+ let theme = null;
+ try {
+ theme = localStorage.getItem('theme');
+ } catch {}
+ if (theme !== 'light' && theme !== 'dark') {
+ theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+ }
+ document.documentElement.dataset.theme = theme;
+ })();
+ </script>
</head>
<body>
<div class="wrap">
@@ -78,7 +91,11 @@ const downloads = `/${copy.locale}/downloads/`;
),
)}
</div>
- <a class="btn primary sm" href={downloads} style="margin-left:10px">{copy.nav.getMaka}</a>
+ <button class="theme" type="button" data-to-dark={copy.theme.toDark} data-to-light={copy.theme.toLight}>
+ <svg class="sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4m11.4-11.4 1.4-1.4" /></svg>
+ <svg class="moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" /></svg>
+ </button>
+ <a class="btn primary sm" href={downloads}>{copy.nav.getMaka}</a>
</nav>
<slot />
@@ -108,5 +125,23 @@ const downloads = `/${copy.locale}/downloads/`;
<p class="tm">{copy.footer.trademark}</p>
</footer>
</div>
+ <script is:inline>
+ // The toggle flips between light and dark and remembers the choice in this browser.
+ (() => {
+ const root = document.documentElement;
+ const button = document.querySelector('.theme');
+ const label = () => {
+ button.setAttribute('aria-label', root.dataset.theme === 'dark' ? button.dataset.toLight : button.dataset.toDark);
+ };
+ label();
+ button.addEventListener('click', () => {
+ root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
+ try {
+ localStorage.setItem('theme', root.dataset.theme);
+ } catch {}
+ label();
+ });
+ })();
+ </script>
</body>
</html>
diff --git a/website/src/styles/site.css b/website/src/styles/site.css
index 7e968fd656..b6cb67bedf 100644
--- a/website/src/styles/site.css
+++ b/website/src/styles/site.css
@@ -19,7 +19,7 @@
/* Colour and radius tokens are the desktop app's defaults, copied by value
from apps/desktop/src/renderer/maka-tokens.css and astryx-theme/maka.css.
- The site follows the viewer's colour scheme; there is no toggle. */
+ The scheme follows the OS until the viewer picks one with the toggle. */
:root {
color-scheme: light dark;
--background: light-dark(oklch(1 0 0), oklch(0.205 0.004 286));
@@ -55,6 +55,12 @@
"Geist Mono Variable", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
+:root[data-theme="light"] {
+ color-scheme: light;
+}
+:root[data-theme="dark"] {
+ color-scheme: dark;
+}
html {
margin: 0;
background: var(--page);
@@ -148,6 +154,30 @@ code {
background: var(--foreground);
color: var(--page);
}
+.theme {
+ display: inline-grid;
+ place-items: center;
+ width: 34px;
+ height: 34px;
+ margin: 0 10px 0 6px;
+ padding: 0;
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ background: transparent;
+ color: var(--muted-foreground);
+ cursor: pointer;
+}
+.theme:hover {
+ color: var(--foreground);
+ background: var(--surface-sunken);
+}
+.theme svg {
+ display: none;
+}
+:root[data-theme="dark"] .theme .sun,
+:root:not([data-theme="dark"]) .theme .moon {
+ display: block;
+}
.btn {
display: inline-flex;
align-items: center;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org