GoldSrc VGUI theme

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.59.1-noble
+      image: mcr.microsoft.com/playwright:v1.60.0-noble
     services:
       db:
         image: postgres:15

messages/en.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "navigation": {
+    "navigation": "Navigation",
     "home": "Home",
     "about": "About",
     "events": "Events",

messages/fi.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "navigation": {
+    "navigation": "Navigointi",
     "home": "Etusivu",
     "about": "Toiminta / Info",
     "events": "Tapahtumat",

messages/lt.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "navigation": {
+    "navigation": "Meniu",
     "home": "Pagrindinis",
     "about": "Veikla / Info",
     "events": "Renginiai",

package.json

@@ -22,33 +22,33 @@
     "@eslint/js": "^10.0.1",
     "@fontsource/fira-mono": "^5.2.7",
     "@neoconfetti/svelte": "^2.2.2",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.60.0",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/adapter-node": "^5.5.4",
-    "@sveltejs/kit": "^2.59.1",
+    "@sveltejs/kit": "^2.60.1",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@types/node": "^25.6.2",
+    "@types/node": "^25.8.0",
     "@types/rss": "^0.0.32",
     "@types/validator": "^13.15.10",
     "date-picker-svelte": "^2.17.0",
     "drizzle-kit": "^0.31.10",
-    "eslint": "^10.3.0",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.17.1",
     "globals": "^17.6.0",
     "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^3.5.1",
-    "svelte": "^5.55.5",
+    "prettier-plugin-svelte": "^3.5.2",
+    "svelte": "^5.55.7",
     "svelte-check": "^4.4.8",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.11"
+    "typescript-eslint": "^8.59.3",
+    "vite": "^8.0.13"
   },
   "dependencies": {
     "@fontsource/courier-prime": "^5.2.8",
     "@friendofsvelte/toggle": "^0.0.4-svelte.5",
     "@inlang/paraglide-js": "^2.18.0",
-    "@lucide/svelte": "^1.14.0",
+    "@lucide/svelte": "^1.16.0",
     "@node-rs/argon2": "^2.0.2",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",

src/app.css

@@ -4,12 +4,13 @@
    2. themes  - overrides must come after token defaults
    3. layout  - structure (references tokens for sizing vars)
    4. theme   - visuals (references tokens for all color/font values)
- */
+*/
 
 @import "$lib/styles/tokens.css";
 
 /* Themes */
 @import "$lib/styles/themes/dark.css";
+@import "$lib/styles/themes/greensteam.css";
 
 @import "$lib/styles/layout.css";
-@import "$lib/styles/theme.css";
+@import "$lib/styles/theme.css";

src/lib/components/blog/Post.svelte

@@ -56,7 +56,7 @@
   ];
 </script>
 
-<post>
+<post data-name={title}>
   {#if !isEditing}
     {#if page.params.slug !== slug}
       <h2 class="title">

src/lib/components/common/AddCommentForm.svelte

@@ -17,6 +17,7 @@
   method="POST"
   action="?/add_comment"
   autocomplete="off"
+  data-name={m.add_comment()}
   use:enhance
 >
   <label for="author">{m["form.name"]()}</label>

src/lib/components/common/RecentComments.svelte

@@ -9,7 +9,7 @@
   import { resolve } from "$app/paths";
 </script>
 
-<div id="recent-comments">
+<div id="recent-comments" data-name={m.recent_comments()}>
   <h3><strong>{m.recent_comments()}</strong></h3>
   <ul>
     {#each recentComments as comment (comment.id)}

src/lib/components/common/ThemeToggle.svelte

@@ -1,21 +1,34 @@
-<script>
-  import { appearance } from "@friendofsvelte/toggle";
+<script lang="ts">
   import { scale } from "svelte/transition";
   import { TrackAppearance } from "$lib/components";
-  import { SprayCan, SquareTerminal } from "@lucide/svelte";
+  import { theme } from "$lib/stores/theme";
+
+  import { SprayCan, SquareTerminal, Gamepad2 } from "@lucide/svelte";
+
+  function cycleTheme() {
+    if ($theme === "light") {
+      theme.set("dark");
+    } else if ($theme === "dark") {
+      theme.set("greensteam");
+    } else {
+      theme.set("light");
+    }
+  }
 </script>
 
 <TrackAppearance />
-{#if appearance.dark !== null}
-  <button
-    class:isHackerMode={appearance.dark}
-    in:scale
-    onclick={() => (appearance.dark = !appearance.dark)}
-  >
-    {#if appearance.dark}
-      <SprayCan />
-    {:else}
-      <SquareTerminal />
-    {/if}
-  </button>
-{/if}
+
+<button
+  class:isHackerMode={$theme === "dark"}
+  class:isGreenSteam={$theme === "greensteam"}
+  in:scale
+  onclick={cycleTheme}
+>
+  {#if $theme === "dark"}
+    <Gamepad2 />
+  {:else if $theme === "greensteam"}
+    <SprayCan />
+  {:else if $theme === "light"}
+    <SquareTerminal />
+  {/if}
+</button>

src/lib/components/common/TrackAppearance.svelte

@@ -1,30 +1,29 @@
 <script lang="ts">
-  import { appearance } from "@friendofsvelte/toggle";
   import { onMount } from "svelte";
+  import { theme, type ThemeMode } from "$lib/stores/theme";
 
-  const init = () => {
-    if (document.documentElement.classList.contains("dark")) {
-      appearance.dark = true;
-    } else if (document.documentElement.classList.contains("light")) {
-      appearance.dark = false;
-    }
+  function applyTheme(mode: ThemeMode) {
+    const root = document.documentElement;
 
-    if (appearance.dark === null) {
-      appearance.dark = false;
-    }
-  };
-  const track = () => {
-    if (appearance.dark != null) {
-      document.cookie = `appearanceMode=${appearance.dark ? "dark" : "light"}; path=/; max-age=31536000; SameSite=Lax`;
-      if (appearance.dark) {
-        document.documentElement.classList.add("dark");
-        document.documentElement.classList.remove("light");
-      } else {
-        document.documentElement.classList.remove("dark");
-        document.documentElement.classList.add("light");
-      }
+    root.classList.remove("light", "dark", "greensteam");
+    root.classList.add(mode);
+
+    document.cookie = `appearanceMode=${mode}; path=/; max-age=31536000; SameSite=Lax`;
+  }
+
+  onMount(() => {
+    const root = document.documentElement;
+
+    if (root.classList.contains("greensteam")) {
+      theme.set("greensteam");
+    } else if (root.classList.contains("dark")) {
+      theme.set("dark");
+    } else {
+      theme.set("light");
     }
-  };
-  $effect(track);
-  onMount(init);
+  });
+
+  $effect(() => {
+    applyTheme($theme);
+  });
 </script>

src/lib/components/crew/CrewMenu.svelte

@@ -5,7 +5,7 @@
   import { MegaphoneOff, UserPen, Users } from "@lucide/svelte";
 </script>
 
-<div id="crew-nav">
+<div id="crew-nav" data-name="Menu">
   <nav>
     <ul class="navlist-items">
       <li aria-current={page.url.pathname === "/crew" ? "page" : undefined}>

src/lib/components/events/Event.svelte

@@ -67,7 +67,7 @@
   }
 </script>
 
-<event>
+<event data-name={event.title}>
   {#if detailed && imageFilename}
     <img
       class="detailed"

src/lib/stores/theme.ts

@@ -0,0 +1,5 @@
+import { writable } from "svelte/store";
+
+export type ThemeMode = "light" | "dark" | "greensteam";
+
+export const theme = writable<ThemeMode>("light");

src/lib/styles/theme.css

@@ -1,4 +1,4 @@
-/*  theme.css 
+/* 
    Visual styles only: color, background, border, shadow, font-family,
    border-radius, text-decoration, opacity, transition.
 */