This is an automated email from the ASF dual-hosted git repository. richardantal pushed a commit to branch asf-site-staging in repository https://gitbox.apache.org/repos/asf/phoenix-site.git
commit 2da54c0762e4c492a5109eb320a9326f87671770 Author: Yurii Palamarchuk <[email protected]> AuthorDate: Tue May 19 13:57:19 2026 +0200 PHOENIX-7807 Addendum: add dark mode support for 404 page --- README.md | 3 ++ output/404.html | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- public/404.html | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 181 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 25b1971c..44d5b897 100644 --- a/README.md +++ b/README.md @@ -244,6 +244,9 @@ Update the 404 page: - Edit the standalone static page in `public/404.html`. - Apache 404 handling lives in `public/.htaccess` (uses `ErrorDocument 404 /404.html`). +- The static 404 page supports dark mode without React: it applies the saved + `localStorage.theme` value when present and otherwise falls back to + `prefers-color-scheme`. Check code quality: diff --git a/output/404.html b/output/404.html index fce73d28..8c2e3887 100644 --- a/output/404.html +++ b/output/404.html @@ -26,6 +26,41 @@ --ring: oklch(0.708 0 0); } + @media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --background: oklch(0.17 0 0); + --foreground: oklch(0.92 0 0); + --muted-foreground: oklch(0.62 0 0); + --border: oklch(0.3 0 0); + --primary: oklch(68.67% 0.18445 44.756); + --primary-foreground: oklch(97% 0 0); + --ring: oklch(55.3% 0.1419 46.007); + } + } + + html.light { + color-scheme: light; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --muted-foreground: oklch(0.556 0 0); + --border: oklch(0.922 0 0); + --primary: oklch(68.67% 0.18445 44.756); + --primary-foreground: oklch(0.985 0 0); + --ring: oklch(0.708 0 0); + } + + html.dark { + color-scheme: dark; + --background: oklch(0.17 0 0); + --foreground: oklch(0.92 0 0); + --muted-foreground: oklch(0.62 0 0); + --border: oklch(0.3 0 0); + --primary: oklch(68.67% 0.18445 44.756); + --primary-foreground: oklch(97% 0 0); + --ring: oklch(55.3% 0.1419 46.007); + } + * { box-sizing: border-box; } @@ -70,6 +105,36 @@ margin-bottom: 2rem; } + .logo-dark { + display: none; + } + + @media (prefers-color-scheme: dark) { + .logo-light { + display: none; + } + + .logo-dark { + display: inline; + } + } + + html.light .logo-light { + display: inline; + } + + html.light .logo-dark { + display: none; + } + + html.dark .logo-light { + display: none; + } + + html.dark .logo-dark { + display: inline; + } + .eyebrow { margin: 0; color: var(--muted-foreground); @@ -137,11 +202,34 @@ 0 0 0 3px color-mix(in oklch, var(--primary) 50%, transparent); } </style> + <script> + (function () { + try { + var theme = localStorage.getItem("theme"); + var root = document.documentElement; + + if (theme === "light" || theme === "dark") { + root.classList.add(theme); + } + } catch (_) { + // Keep the CSS prefers-color-scheme fallback if storage is unavailable. + } + })(); + </script> </head> <body> <main> <section class="content" aria-labelledby="page-title"> - <img class="logo" src="/images/logo.svg" alt="Apache Phoenix" /> + <img + class="logo logo-light" + src="/images/logo.svg" + alt="Apache Phoenix" + /> + <img + class="logo logo-dark" + src="/images/dark-theme-logo.svg" + alt="Apache Phoenix" + /> <p class="eyebrow">404</p> <h1 id="page-title">Page not found</h1> <p class="message"> diff --git a/public/404.html b/public/404.html index fce73d28..8c2e3887 100644 --- a/public/404.html +++ b/public/404.html @@ -26,6 +26,41 @@ --ring: oklch(0.708 0 0); } + @media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --background: oklch(0.17 0 0); + --foreground: oklch(0.92 0 0); + --muted-foreground: oklch(0.62 0 0); + --border: oklch(0.3 0 0); + --primary: oklch(68.67% 0.18445 44.756); + --primary-foreground: oklch(97% 0 0); + --ring: oklch(55.3% 0.1419 46.007); + } + } + + html.light { + color-scheme: light; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --muted-foreground: oklch(0.556 0 0); + --border: oklch(0.922 0 0); + --primary: oklch(68.67% 0.18445 44.756); + --primary-foreground: oklch(0.985 0 0); + --ring: oklch(0.708 0 0); + } + + html.dark { + color-scheme: dark; + --background: oklch(0.17 0 0); + --foreground: oklch(0.92 0 0); + --muted-foreground: oklch(0.62 0 0); + --border: oklch(0.3 0 0); + --primary: oklch(68.67% 0.18445 44.756); + --primary-foreground: oklch(97% 0 0); + --ring: oklch(55.3% 0.1419 46.007); + } + * { box-sizing: border-box; } @@ -70,6 +105,36 @@ margin-bottom: 2rem; } + .logo-dark { + display: none; + } + + @media (prefers-color-scheme: dark) { + .logo-light { + display: none; + } + + .logo-dark { + display: inline; + } + } + + html.light .logo-light { + display: inline; + } + + html.light .logo-dark { + display: none; + } + + html.dark .logo-light { + display: none; + } + + html.dark .logo-dark { + display: inline; + } + .eyebrow { margin: 0; color: var(--muted-foreground); @@ -137,11 +202,34 @@ 0 0 0 3px color-mix(in oklch, var(--primary) 50%, transparent); } </style> + <script> + (function () { + try { + var theme = localStorage.getItem("theme"); + var root = document.documentElement; + + if (theme === "light" || theme === "dark") { + root.classList.add(theme); + } + } catch (_) { + // Keep the CSS prefers-color-scheme fallback if storage is unavailable. + } + })(); + </script> </head> <body> <main> <section class="content" aria-labelledby="page-title"> - <img class="logo" src="/images/logo.svg" alt="Apache Phoenix" /> + <img + class="logo logo-light" + src="/images/logo.svg" + alt="Apache Phoenix" + /> + <img + class="logo logo-dark" + src="/images/dark-theme-logo.svg" + alt="Apache Phoenix" + /> <p class="eyebrow">404</p> <h1 id="page-title">Page not found</h1> <p class="message">
