Themes

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;
@@ -44,8 +54,11 @@ let paths: {
 
 <Toaster />
 
-<main style={`background-image: url("${backgroundImage}")`}>
-  <div class={"navbar " + (activePage == "welcome" ? "offset" : "")}>
+<main
+  class={mainClassString}
+  style={`background-image: url("${backgroundImage}")`}
+>
+  <div class={"navbar blurred" + (activePage == "welcome" ? " offset" : "")}>
     <div>
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -105,7 +118,10 @@ let paths: {
             >GUI Settings</button
           >
           <button
-            onclick={()=>{activePage = "welcome"}}
+            onclick={()=>{
+              activePage = "welcome";
+              (document.activeElement as HTMLElement)?.blur()}
+            }
             >Re-open setup screen</button
           >
         </div>
@@ -158,14 +174,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 +253,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;

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() {
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   {#each filteredBots as bot (bot.id)}
     <div
-      class="bot"
+      class="bot blurred"
       use:draggable={{
         container: "botlist",
         dragData: SuperJSON.stringify(bot),
@@ -324,7 +319,14 @@ function SelectedToggleFavorite() {
       animate:flip={{ duration: flipDurationMs }}
       onclick={() => handleBotClick(bot)}
     >
-      <img src={bot.icon || defaultIcon} alt="icon" />
+      <img
+        src={bot.icon || defaultIcon}
+        alt="icon"
+        style={ /* Fix light and dark theme for default icon */
+          (!bot.icon || bot.player instanceof HumanInfo)
+          ? "filter: brightness(var(--icon-brightness))" : ""
+        }
+      />
       <p>{bot.displayName}</p>
       {#if bot.uniquePathSegment}
         <span class="unique-bot-identifier">({bot.uniquePathSegment})</span>
@@ -353,14 +355,21 @@ function SelectedToggleFavorite() {
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   {#each filteredScripts as script (script.id)}
-    <div class="bot" animate:flip={{ duration: flipDurationMs }} onclick={() => toggleScript(script.id)}>
+    <div class="bot blurred" animate:flip={{ duration: flipDurationMs }} onclick={() => toggleScript(script.id)}>
       <Switch
         checked={enabledScripts[script.id]}
         width={36}
         height={22}
         onchange={() => toggleScript(script.id)}
       />
-      <img src={script.icon || defaultIcon} alt="icon" />
+      <img
+        src={script.icon || defaultIcon}
+        alt="icon"
+        style={ /* Fix light and dark theme for default icon */
+          (!script.icon)
+          ? "filter: brightness(var(--icon-brightness))" : ""
+        }
+      />
       <p>{script.displayName}</p>
       {#if script.uniquePathSegment}
         <span class="unique-bot-identifier">({script.uniquePathSegment})</span>
@@ -426,7 +435,7 @@ function SelectedToggleFavorite() {
 
     {#if selectedAgent[2]}
     <div class="info-logo">
-      <img src={selectedAgent[2]} alt="icon" />
+      <img src={selectedAgent[2]} alt="icon"/>
     </div>
     {/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;
   }

frontend/src/components/BotpackToast.svelte

@@ -15,7 +15,7 @@ let {
 
 <style>
   img {
-    filter: invert();
+    filter: invert() brightness(var(--icon-brightness));
     width: 24px;
     height: 24px;
     margin-right: 0.25em;

frontend/src/components/Events.svelte

@@ -228,7 +228,7 @@ async function fetchEvents() {
     margin-left: 0.5rem;
   }
   p img {
-    filter: invert() brightness(90%);
+    filter: invert() brightness(var(--icon-brightness));
     width: 24px;
     margin-bottom: 3px;
     vertical-align: middle;

frontend/src/components/GuiSettings.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
+import { currentTheme, THEMES } from "../settings";
 import Modal from "./Modal.svelte";
+import NiceSelect from "./NiceSelect.svelte";
 
 // TODO: Save settings, svelte store + localstorage?
 //       Perhaps change all localstorage state to svelte stores?
+
 let { visible = $bindable(false) } = $props();
 </script>
 
 <Modal bind:visible title="GUI Settings">
   <div class="inner">
-    <h3>Not implemented yet</h3>
+
+    <label>Theme</label>
+    <NiceSelect
+      bind:value={$currentTheme}
+      options={Object.fromEntries(
+        Object.keys(THEMES).map(k => [k, k])
+      )}
+      placeholder="Select a theme"
+    />
     <!-- TODO: Match start timeouts -->
-    <!-- TODO: Dark/Light themes -->
     <!-- TODO: Refresh bots behavior (remove on refresh, remove not found agents, etc.) -->
     <!-- TODO: Telemetry settings if added -->
     <!-- TODO: Auto update botpack -->
@@ -21,7 +31,7 @@ let { visible = $bindable(false) } = $props();
   .inner {
     display: flex;
     justify-content: center;
-    align-items: center;
+    flex-direction: column;
     height: 100%;
   }
   h3 {

frontend/src/components/LoadoutEditor/ItemField.svelte

@@ -144,7 +144,7 @@ function randomizeItem() {
     padding: 0 0.5rem;
   }
   button.randomize > img {
-    filter: invert() brightness(90%);
+    filter: invert() brightness(var(--icon-brightness));
     vertical-align: middle;
     width: 20px;
     height: 20px;

frontend/src/components/LoadoutEditor/TeamEditor.svelte

@@ -101,7 +101,7 @@ function randomizeTeamLoadout() {
     margin-left: auto;
   }
   button.randomize > img {
-    filter: invert() brightness(90%);
+    filter: invert() brightness(var(--icon-brightness));
     vertical-align: middle;
     width: 24px;
     height: 24px;

frontend/src/components/MatchSettings/Main.svelte

@@ -298,10 +298,10 @@ const ALL_MAPS = getMaps();
     gap: 0.3rem;
   }
   .mutator label {
-    color:lightgrey;
+    color: var(--foreground);
   }
   label.mutatorChanged {
-    color: orange;
+    color: var(--orange);
   }
   .bottomButtons {
     display: flex;
@@ -316,12 +316,16 @@ const ALL_MAPS = getMaps();
   }
   .mutatorResetButton {
     background-color: red;
+    color: white
   }
 
   .extraoptions > * {
     margin-bottom: 0.5rem;
   }
 
+  button.start, button.stop {
+    color: white
+  }
   button.start {
     background-color: #15680e;
   }

frontend/src/components/Modal.svelte

@@ -90,6 +90,7 @@ function handleMouseDown(e: MouseEvent) {
     border-radius: 0.6rem;
     min-width: 20vw;
     min-height: 20vh;
+    box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.5);
   }
   header {
     padding: 0.2rem;
@@ -105,7 +106,7 @@ function handleMouseDown(e: MouseEvent) {
   header button {
     padding: 0px;
     background-color: transparent;
-    filter: invert();
+    filter: invert() brightness(var(--icon-brightness));
   }
   .modalBody {
     padding: 1rem;

frontend/src/components/PathsViewer.svelte

@@ -207,7 +207,7 @@ function addFile() {
     padding: 0px;
   }
   .path button img {
-    filter: invert();
+    filter: invert() brightness(var(--icon-brightness));
   }
   .repair {
     color: var(--foreground);

frontend/src/components/Teams/Main.svelte

@@ -25,15 +25,15 @@ function toggleTeam(team: "blue" | "orange") {
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="teams">
-    <div class="team box blue" onclick={() => toggleTeam('blue')} class:selected={selectedTeam === 'blue'}>
+    <div class="team box blurred blue" onclick={() => toggleTeam('blue')} class:selected={selectedTeam === 'blue'}>
         <header class="blue">
             <h3>Blue team</h3>
             <div style="flex: 1;"></div>
             <h3 class="dimmed">{bluePlayers?.length || 0} bots</h3>
         </header>
         <TeamBotList bind:items={bluePlayers} bind:globalAutoStart />
     </div>
-    <div class="team box orange" onclick={() => toggleTeam('orange')} class:selected={selectedTeam === 'orange'}>
+    <div class="team box blurred orange" onclick={() => toggleTeam('orange')} class:selected={selectedTeam === 'orange'}>
         <header class="orange">
             <h3>Orange team</h3>
             <div style="flex: 1;"></div>
@@ -57,10 +57,6 @@ function toggleTeam(team: "blue" | "orange") {
     .teams > .team {
         width: 50%;
         padding: 0px 0;
-        /* Nice transparent blur */
-        background-color: rgba(0, 0, 0, 0.7);
-        -webkit-backdrop-filter: blur(10px);
-        backdrop-filter: blur(10px);
         display: flex;
         flex-direction: column;
         border: 2px solid transparent;
@@ -76,6 +72,10 @@ function toggleTeam(team: "blue" | "orange") {
     }
     header {
         border: 2px solid;
+        color: white;
+    }
+    header h3 {
+        color: white !important;
     }
     header.blue {
         border-color: #0054a6;