From 7f1733234ed73b94df773c6ce44aa89c38082dbe Mon Sep 17 00:00:00 2001 From: swz-git Date: Sat, 13 Dec 2025 14:49:59 +0100 Subject: [PATCH 1/2] light and dark themes with blur variants --- frontend/src/App.svelte | 33 +++++++++---- frontend/src/components/BotList.svelte | 35 ++++++++------ frontend/src/components/BotpackToast.svelte | 2 +- frontend/src/components/Events.svelte | 2 +- .../components/LoadoutEditor/ItemField.svelte | 2 +- .../LoadoutEditor/TeamEditor.svelte | 2 +- .../src/components/MatchSettings/Main.svelte | 8 +++- frontend/src/components/Modal.svelte | 3 +- frontend/src/components/PathsViewer.svelte | 2 +- frontend/src/components/Teams/Main.svelte | 12 ++--- .../src/components/Teams/TeamBotList.svelte | 46 ++++++++++++------- frontend/src/global.css | 41 ++++++++++++++--- frontend/src/pages/Home.svelte | 6 +-- frontend/src/pages/RocketHost.svelte | 2 +- frontend/src/pages/StoryMode.svelte | 1 + 15 files changed, 133 insertions(+), 64 deletions(-) diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index fcfe247..7576c5f 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -44,8 +44,15 @@ let paths: { -
-
+
+
@@ -105,7 +112,10 @@ let paths: { >GUI Settings
@@ -158,14 +168,17 @@ let paths: { height: 3rem; justify-content: space-between; padding: 0.1rem; - /* Nice transparent blur */ - background-color: rgba(0, 0, 0, 0.6); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - /* background: var(--background-alt); - color: var(--foreground-alt); */ + background: var(--background); + color: var(--foreground); transition: translate 0.2s ease-in-out; } + + .navbar:has(.dropdown:focus-within) { + /* We cannot set z-index in the child because it is implicitly set to + 0 here unless specified due to the backdrop-filter (i think?) */ + z-index: 1; + } + .navbar.offset { translate: 0 -100%; } @@ -234,7 +247,7 @@ let paths: { border-radius: 0.2rem; } #events img { - filter: invert() brightness(90%); + filter: invert() brightness(var(--icon-brightness)); width: 20px; vertical-align: middle; margin-bottom: 4px; diff --git a/frontend/src/components/BotList.svelte b/frontend/src/components/BotList.svelte index e6020b6..1b8dcf4 100644 --- a/frontend/src/components/BotList.svelte +++ b/frontend/src/components/BotList.svelte @@ -4,7 +4,7 @@ import { Browser } from "@wailsio/runtime"; import SuperJSON from "superjson"; import toast from "svelte-5-french-toast"; import { flip } from "svelte/animate"; -import { App, BotInfo } from "../../bindings/gui"; +import { App, BotInfo, HumanInfo, PsyonixBotInfo } from "../../bindings/gui"; import infoIcon from "../assets/info_icon.svg"; import defaultIcon from "../assets/rlbot_mono.png"; import starIcon from "../assets/star.svg"; @@ -110,11 +110,6 @@ $effect(() => { }); let selectedAgent: [BotInfo, string, string] | null = $state(null); -$effect(() => { - if (!showInfoModal && !showLoadoutEditor) { - selectedAgent = null; - } -}); const filteredBots: DraggablePlayer[] = $derived.by(() => filterBots(bots, selectedTags, showHuman, searchQuery), @@ -315,7 +310,7 @@ function SelectedToggleFavorite() { {#each filteredBots as bot (bot.id)}
handleBotClick(bot)} > - icon + icon

{bot.displayName}

{#if bot.uniquePathSegment} ({bot.uniquePathSegment}) @@ -353,14 +355,21 @@ function SelectedToggleFavorite() { {#each filteredScripts as script (script.id)} -
toggleScript(script.id)}> +
toggleScript(script.id)}> toggleScript(script.id)} /> - icon + icon

{script.displayName}

{#if script.uniquePathSegment} ({script.uniquePathSegment}) @@ -426,7 +435,7 @@ function SelectedToggleFavorite() { {#if selectedAgent[2]} {/if} @@ -485,7 +494,7 @@ function SelectedToggleFavorite() { padding: 0.5rem 1rem; border-radius: 0; cursor: pointer; - background-color: var(--background-alt); + /*background-color: var(--background-alt);*/ } .tag-buttons button:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); @@ -536,7 +545,7 @@ function SelectedToggleFavorite() { font-size: 1rem; } .info-button img { - filter: invert() brightness(90%); + filter: invert() brightness(var(--icon-brightness)); height: 100%; width: auto; } diff --git a/frontend/src/components/BotpackToast.svelte b/frontend/src/components/BotpackToast.svelte index e78be1b..5f57e80 100644 --- a/frontend/src/components/BotpackToast.svelte +++ b/frontend/src/components/BotpackToast.svelte @@ -15,7 +15,7 @@ let { From 017977e0bcbcf4755c09e72c9befedbdc550dd58 Mon Sep 17 00:00:00 2001 From: swz-git Date: Sat, 13 Dec 2025 15:55:31 +0100 Subject: [PATCH 2/2] Add theme setting in gui settings --- frontend/src/App.svelte | 16 +++++++++++----- frontend/src/components/GuiSettings.svelte | 16 +++++++++++++--- frontend/src/settings.ts | 16 ++++++++++++++++ 3 files changed, 40 insertions(+), 8 deletions(-) diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 7576c5f..2bd3fe1 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -11,6 +11,7 @@ import StoryMode from "./pages/StoryMode.svelte"; import Welcome from "./pages/Welcome.svelte"; import { parseJSON } from "./index"; import arenaImages from "./arena-images"; +import { currentTheme, THEMES } from "./settings"; const backgroundImage = arenaImages[Math.floor(Math.random() * arenaImages.length)]; @@ -33,6 +34,15 @@ let eventsVisible = $state(false); let showGuiSettings = $state(false); +let mainClassString = $derived( + ( + THEMES[$currentTheme] ?? + (window.matchMedia("(prefers-color-scheme: dark)").matches + ? THEMES["Dark blurred"] + : THEMES["Light"]) + ).join(" "), +); + let paths: { tagName: string | null; repo: string | null; @@ -45,11 +55,7 @@ let paths: {
diff --git a/frontend/src/components/GuiSettings.svelte b/frontend/src/components/GuiSettings.svelte index ecf8b90..2a9ae09 100644 --- a/frontend/src/components/GuiSettings.svelte +++ b/frontend/src/components/GuiSettings.svelte @@ -1,16 +1,26 @@
-

Not implemented yet

+ + + [k, k]) + )} + placeholder="Select a theme" + /> - @@ -21,7 +31,7 @@ let { visible = $bindable(false) } = $props(); .inner { display: flex; justify-content: center; - align-items: center; + flex-direction: column; height: 100%; } h3 { diff --git a/frontend/src/settings.ts b/frontend/src/settings.ts index 6100f5d..520acd4 100644 --- a/frontend/src/settings.ts +++ b/frontend/src/settings.ts @@ -1,6 +1,22 @@ import { writable } from "svelte/store"; import { MAPS_STANDARD } from "./arena-names"; +export const THEMES = { + "Light blurred": ["lightTheme", "blur"], + "Light": ["lightTheme"], + "Dark blurred": ["darkTheme", "blur"], + "Dark": ["darkTheme"], + "Follow system": null +} as const; + +export const currentTheme = writable( + localStorage.getItem("APP_THEME") as keyof typeof THEMES || "Follow system" +) +currentTheme.subscribe((value)=>{ + console.log("Theme is now", value) + localStorage.setItem("APP_THEME", value); +}) + export const mapStore = writable( localStorage.getItem("MS_MAP") || MAPS_STANDARD["DFH Stadium"], );