Add status page theme mode setting and toggle

.github/workflows/run-tests.yml

@@ -160,6 +160,18 @@ jobs:
           name: build-assets
           path: public/build
 
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install frontend dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
       - name: Build tests environment
         run: composer build
 
@@ -237,6 +249,18 @@ jobs:
           name: build-assets
           path: public/build
 
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install frontend dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
       - name: Build tests environment
         run: composer build
 
@@ -319,6 +343,18 @@ jobs:
           name: build-assets
           path: public/build
 
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install frontend dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
       - name: Build tests environment
         run: composer build
 

.gitignore

@@ -12,6 +12,7 @@
 /vendor
 /.phpunit.xml
 /.phpunit.result.cache
+/tests/Browser/Screenshots
 Thumbs.db
 
 /.mcp.json

composer.json

@@ -50,6 +50,7 @@
         "laravel/pint": "^1.24",
         "orchestra/testbench": "^10.0|^11.0",
         "pestphp/pest": "^4.3",
+        "pestphp/pest-plugin-browser": "^4.3",
         "pestphp/pest-plugin-laravel": "^4.0",
         "pestphp/pest-plugin-livewire": "*",
         "pestphp/pest-plugin-type-coverage": "^4.0",

database/migrations/2026_07_14_000001_add_theme_mode_setting.php

@@ -0,0 +1,14 @@
+<?php
+
+use Spatie\LaravelSettings\Migrations\SettingsMigration;
+
+return new class extends SettingsMigration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        rescue(fn () => $this->migrator->add('theme.theme_mode', 'auto'));
+    }
+};

package.json

@@ -16,6 +16,7 @@
         "@tailwindcss/vite": "^4.3.1",
         "alpinejs": "^3.13.3",
         "laravel-vite-plugin": "^3.1",
+        "playwright": "^1.59.1",
         "prettier": "^3.0.1",
         "prettier-plugin-blade": "^2.0.0",
         "prettier-plugin-tailwindcss": "^0.6.14",

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "resources/css/cachet.css": {
-    "file": "assets/cachet-a-zLhQZI.css",
+    "file": "assets/cachet-B4qUnEhq.css",
     "name": "cachet",
     "names": [
       "cachet.css"
@@ -18,7 +18,7 @@
     "isEntry": true
   },
   "resources/js/cachet.js": {
-    "file": "assets/cachet-DHCAi8ZN.js",
+    "file": "assets/cachet-mqHuR0D8.js",
     "name": "cachet",
     "src": "resources/js/cachet.js",
     "isEntry": true,
@@ -27,7 +27,7 @@
     ]
   },
   "resources/js/metrics.js": {
-    "file": "assets/metrics-0rXi1BiZ.js",
+    "file": "assets/metrics-osy1O_b8.js",
     "name": "metrics",
     "src": "resources/js/metrics.js",
     "isDynamicEntry": true

resources/css/cachet.css

@@ -5,6 +5,24 @@
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
 
+/*
+  Dark mode is class-based so viewers can override their system preference.
+  The `.dark` and `.light` classes are managed on `<html>`: rendered by the
+  server when a theme is forced, otherwise applied by the theme switcher.
+  The media query branch keeps system dark mode working without JavaScript.
+*/
+@custom-variant dark {
+  &:where(.dark, .dark *) {
+    @slot;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:where(:not(.light, .light *)) {
+      @slot;
+    }
+  }
+}
+
 @theme {
   --color-primary-50: #e6f7ed;
   --color-primary-100: #c1edce;