feat: light/dark mode, cyan accent ve světlém, header pole v scraperu, vizuální úpravy postů

2026-06-09 09:55:18 +02:00
parent 6a76c377fa
commit 1c61a8736f
6 changed files with 116 additions and 5 deletions
@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Aplikace – Mamutovo</title>
+<script>if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light');</script>
 <style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

@@ -21,6 +22,19 @@
  --border: #282828;
  --radius: 10px;
 }
+html.light {
+  --bg: #ffffff;
+  --surface: #f8f8f8;
+  --surface2: #f0f0f0;
+  --surface3: #e8e8e8;
+  --border: #e0e0e0;
+  --text: #1a1a1a;
+  --muted: #666666;
+  --muted2: #999999;
+  --accent: #06b6d4;
+}
+.theme-toggle { background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; line-height: 1; position: fixed; top: 1rem; right: 1rem; z-index: 200; transition: border-color .15s; }
+.theme-toggle:hover { border-color: var(--accent); }

 * { box-sizing: border-box; margin: 0; padding: 0; }

@@ -278,6 +292,7 @@ h1 span { color: var(--accent); }
 </style>
 </head>
 <body>
+<button id="theme-toggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Přepnout téma">🌙</button>

 <div class="header">
  <a href="https://fedi.mamutovo.cz" class="badge">🦣 MAMUTOVO · APLIKACE</a>
@@ -485,6 +500,13 @@ h1 span { color: var(--accent); }
 </div>

 <script>
+function toggleTheme() {
+  const light = document.documentElement.classList.toggle('light');
+  localStorage.setItem('theme', light ? 'light' : 'dark');
+  document.getElementById('theme-toggle').textContent = light ? '☀️' : '🌙';
+}
+if (localStorage.getItem('theme') === 'light') document.getElementById('theme-toggle').textContent = '☀️';
+
 (function () {
  const filters = document.querySelectorAll('.ftag');
  const cards   = document.querySelectorAll('.card');