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;
}
[data-theme="dark"] {
@media (prefers-color-scheme: dark) {
--bg: #0f0f0f;
--bg-secondary: #1a1a1a;
--bg-tertiary: #242424;

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

@ -1,6 +1,6 @@
{{define "base"}}
<!DOCTYPE html>
<html lang="en" data-theme="light">
<html lang="en">
<head>
<meta charset="UTF-8">
<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 title="samsa" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml">
<meta name="samsa" content="samsa">
<script>var s=document.documentElement;s.setAttribute('data-theme',localStorage.getItem('samsa-theme')||'light');</script>
</head>
<body>
<header class="site-header">

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

@ -4,16 +4,12 @@
<h1 class="preferences-title">Preferences</h1>
<form class="preferences-form" method="POST" action="/preferences">
<input type="hidden" name="theme" id="theme-input" value="light">
<section class="pref-section">
<h2 class="pref-section-title">Appearance</h2>
<div class="pref-row">
<label>Theme</label>
<div class="theme-buttons">
<button type="button" class="theme-btn active" data-theme="light">Light</button>
<button type="button" class="theme-btn" data-theme="dark">Dark</button>
</div>
<span class="theme-info">Follows system preference</span>
</div>
</section>
@ -109,29 +105,6 @@
<script>
(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
var savedEngines = JSON.parse(localStorage.getItem('samsa-engines') || 'null');
if (savedEngines) {