Use configured background color during initialization

src/components/colorchooser.tsx

@@ -52,7 +52,7 @@ export default function ColorChooser(props: ColorChooserProps) {
                     {Object.keys(theme.colors).map((color) => shades.map((shade) => (
                         <Grid.Col key={`${color}:${shade}`} span={1} p="0.1rem">
                             <ActionIcon onClick={() => {
-                                props.onChange({ color, shade });
+                                props.onChange({ color, shade, computed: theme.colors[color][shade] });
                                 setOpened(false);
                             }}>
                                 <ColorSwatch color={theme.colors[color][shade]} />

src/components/modals/interfacepanel.tsx

@@ -77,12 +77,12 @@ export function InterfaceSettigsPanel<V extends InterfaceFormValues>(props: { fo
     }, [style, setStyle, setFieldValue]);
 
     const defaultColor = theme.colorScheme === "dark"
-        ? { color: "dark", shade: 0 }
-        : { color: "dark", shade: 9 };
+        ? { color: "dark", shade: 0, computed: theme.colors.dark[0] }
+        : { color: "dark", shade: 9, computed: theme.colors.dark[9] };
 
     const defaultBg = theme.colorScheme === "dark"
-        ? { color: "dark", shade: 7 }
-        : { color: "gray", shade: 0 };
+        ? { color: "dark", shade: 7, computed: theme.colors.dark[7] }
+        : { color: "gray", shade: 0, computed: theme.colors.gray[0] };
 
     return (
         <Grid align="center">

src/config.ts

@@ -101,6 +101,7 @@ export type WindowCloseOption = typeof WindowCloseOptions[number];
 export interface ColorSetting {
     color: DefaultMantineColor,
     shade: number,
+    computed: string,
 }
 
 export interface StyleOverrideColors {

src/css/loader.css

@@ -3,6 +3,14 @@
  * https://loading.io/css/
  */
 
+.loader-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
 .lds-ring {
     display: inline-block;
     position: relative;
@@ -17,10 +25,9 @@
     width: 64px;
     height: 64px;
     margin: 8px;
-    border: 8px solid #fff;
+    border: 8px solid transparent;
     border-radius: 50%;
     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: #0037b860 transparent transparent transparent;
 }
 
 .lds-ring div:nth-child(1) {

src/index.tsx

@@ -20,7 +20,8 @@ import "css/loader.css";
 import { Config, ConfigContext } from "./config";
 import { createRoot } from "react-dom/client";
 import type { Root } from "react-dom/client";
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useContext } from "react";
+import type { CSSProperties } from "react";
 const { TAURI, appWindow, invoke } = await import(/* webpackChunkName: "taurishim" */"taurishim");
 
 const TauriApp = lazy(async () => await import("components/app"));
@@ -94,9 +95,31 @@ function setupWebEvents(config: Config) {
 }
 
 function Loader() {
+    const config = useContext(ConfigContext);
+
+    const interfaceConfig = config.values.interface;
+    const theme = interfaceConfig.theme;
+    const backgroundColorOverride =
+        interfaceConfig.styleOverrides[theme ?? "light"]?.backgroundColor;
+    const spinnerStyle: CSSProperties = {
+        borderTopColor: `hsla(222, 100%, ${theme === "dark" ? "50%" : "36%"}, 0.376)`,
+    };
+
     return (
-        <div className="lds-ring">
-            <div></div><div></div><div></div><div></div>
+        <div
+            className="loader-container"
+            style={{
+                backgroundColor:
+                    backgroundColorOverride?.computed ??
+                    (theme === "dark" ? "#1A1B1E" : "#fff"), // #1A1B1E comes from theme.colors.dark[7]
+            }}
+        >
+            <div className="lds-ring">
+                <div style={spinnerStyle}></div>
+                <div style={spinnerStyle}></div>
+                <div style={spinnerStyle}></div>
+                <div style={spinnerStyle}></div>
+            </div>
         </div>
     );
 }