penal-colony/samsa
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: use CSS prefers-color-scheme for dark mode (no JS)
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 7s
Details
Mirror to GitHub / mirror (push) Failing after 5s
Details
Tests / test (push) Successful in 27s
Details

Browse source 
- Remove inline JS that sets data-theme from localStorage
- Use @media (prefers-color-scheme: dark) in CSS for automatic dark mode
- Remove JS-dependent theme toggle from preferences
- Theme now follows system preference automatically

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude 2026-03-23 18:34:18 +00:00
parent 8f2fd671f1
commit 056d2d1175
3 changed files with 3 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
internal/views/static/css/samsa.css
View file

@ -24,7 +24,7 @@
--font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-mono: "IBM Plex Mono", ui-monospace, monospace;
} }
[data-theme="dark"] { @media (prefers-color-scheme: dark) {
--bg: #0f0f0f; --bg: #0f0f0f;
--bg-secondary: #1a1a1a; --bg-secondary: #1a1a1a;
--bg-tertiary: #242424; --bg-tertiary: #242424;

3
internal/views/templates/base.html
View file

@ -1,6 +1,6 @@
{{define "base"}} {{define "base"}}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="light"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -12,7 +12,6 @@
<link rel="icon" href="/static/img/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/static/img/favicon.svg" type="image/svg+xml">
<link title="samsa" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml"> <link title="samsa" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml">
<meta name="samsa" content="samsa"> <meta name="samsa" content="samsa">
<script>var s=document.documentElement;s.setAttribute('data-theme',localStorage.getItem('samsa-theme')||'light');</script>
</head> </head>
<body> <body>
<header class="site-header"> <header class="site-header">

29
internal/views/templates/preferences.html
View file

@ -4,16 +4,12 @@
<h1 class="preferences-title">Preferences</h1> <h1 class="preferences-title">Preferences</h1>
<form class="preferences-form" method="POST" action="/preferences"> <form class="preferences-form" method="POST" action="/preferences">
<input type="hidden" name="theme" id="theme-input" value="light">
<section class="pref-section"> <section class="pref-section">
<h2 class="pref-section-title">Appearance</h2> <h2 class="pref-section-title">Appearance</h2>
<div class="pref-row"> <div class="pref-row">
<label>Theme</label> <label>Theme</label>
<div class="theme-buttons"> <span class="theme-info">Follows system preference</span>
<button type="button" class="theme-btn active" data-theme="light">Light</button>
<button type="button" class="theme-btn" data-theme="dark">Dark</button>
</div>
</div> </div>
</section> </section>
@ -109,29 +105,6 @@
<script> <script>
(function() { (function() {
// Theme buttons
var themeInput = document.getElementById('theme-input');
var themeButtons = document.querySelectorAll('.theme-btn');
// Load saved theme
var savedTheme = localStorage.getItem('samsa-theme') || 'light';
themeInput.value = savedTheme;
document.querySelectorAll('.theme-btn').forEach(function(btn) {
btn.classList.toggle('active', btn.dataset.theme === savedTheme);
});
document.documentElement.setAttribute('data-theme', savedTheme);
themeButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
var theme = btn.dataset.theme;
themeInput.value = theme;
themeButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('samsa-theme', theme);
});
});
// Load saved engine preferences // Load saved engine preferences
var savedEngines = JSON.parse(localStorage.getItem('samsa-engines') || 'null'); var savedEngines = JSON.parse(localStorage.getItem('samsa-engines') || 'null');
if (savedEngines) { if (savedEngines) {