CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

chore: Remove theme toggle and commit to dark mode

Browse Source 
- Delete ThemeToggle.svelte component
- Remove theme toggle from Header
- Set permanent cs2dark theme in app.html
- Add darkreader-lock meta tag to prevent extension conflicts
- Add color-scheme: dark meta for browser hints
- Update theme-color to void (#0a0a0f)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
vikingowl
2025-12-07 16:20:48 +01:00
parent a77082c400
commit d01e0d28f6
3 changed files with 6 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app.html
View File

@@ -1,15 +1,17 @@
<!doctype html>
<html lang="en">
<html lang="en" data-theme="cs2dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
<meta name="theme-color" content="#0f172a" />
<meta name="description" content="Statistics for CS2 matchmaking matches" />
<meta name="theme-color" content="#0a0a0f" />
<meta name="color-scheme" content="dark" />
<meta name="darkreader-lock" />
<meta name="description" content="Track flashbang statistics in CS2. Expose team flashers." />
%sveltekit.head%
</head>
<body>
<body class="bg-void text-white">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

2
src/lib/components/layout/Header.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts">
import { Menu, X } from 'lucide-svelte';
import SearchBar from './SearchBar.svelte';
import ThemeToggle from './ThemeToggle.svelte';
let mobileMenuOpen = $state(false);
@@ -44,7 +43,6 @@
<!-- Search & Actions -->
<div class="flex items-center gap-2">
<SearchBar />
<ThemeToggle />
<!-- Mobile Menu Toggle -->
<button

71
src/lib/components/layout/ThemeToggle.svelte
View File

@@ -1,71 +0,0 @@
<script lang="ts">
import { Moon, Sun, Monitor } from 'lucide-svelte';
import { preferences } from '$lib/stores';
import { browser } from '$app/environment';
import { onMount } from 'svelte';
const themes = [
{ value: 'cs2light', label: 'Light', icon: Sun },
{ value: 'cs2dark', label: 'Dark', icon: Moon },
{ value: 'auto', label: 'Auto', icon: Monitor }
] as const;
// Get current theme data
const currentTheme = $derived(themes.find((t) => t.value === $preferences.theme) || themes[2]);
const applyTheme = (theme: 'cs2light' | 'cs2dark' | 'auto') => {
if (!browser) return;
let actualTheme = theme;
if (theme === 'auto') {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
actualTheme = isDark ? 'cs2dark' : 'cs2light';
}
document.documentElement.setAttribute('data-theme', actualTheme);
};
const handleThemeChange = (theme: 'cs2light' | 'cs2dark' | 'auto') => {
preferences.setTheme(theme);
applyTheme(theme);
};
// Apply theme on mount and when system preference changes
onMount(() => {
applyTheme($preferences.theme);
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handler = () => {
if ($preferences.theme === 'auto') {
applyTheme('auto');
}
};
mediaQuery.addEventListener('change', handler);
return () => mediaQuery.removeEventListener('change', handler);
});
</script>
<!-- Theme Toggle Dropdown -->
<div class="dropdown dropdown-end">
<button tabindex="0" class="btn btn-circle btn-ghost" aria-label="Theme">
<currentTheme.icon class="h-5 w-5" />
</button>
<ul class="menu dropdown-content z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow-lg">
{#each themes as theme}
<li>
<button
class:active={$preferences.theme === theme.value}
onclick={() => handleThemeChange(theme.value)}
>
<theme.icon class="h-4 w-4" />
{theme.label}
{#if theme.value === 'auto'}
<span class="text-xs text-base-content/60">(System)</span>
{/if}
</button>
</li>
{/each}
</ul>
</div>