update

src/AppState.ts

@@ -1,4 +1,4 @@
-import { inject, type InjectionKey, ref, getCurrentInstance, watch } from "vue";
+import { inject, type InjectionKey, ref, getCurrentInstance, watch, computed } from "vue";
 import { Bound } from "./utils";
 
 export type UITool = 
@@ -6,24 +6,49 @@ export type UITool =
     | "sticking";
 
 class AppStateStore extends Bound {
+    private osThemeIsDark = ref(false);
+    private isDarkUser = ref<boolean | null>(null);
     selectedTool = ref<UITool>("track-unit-type");
     activeTrackUnitType = ref<number | null>(0);
     activeStickingType = ref<number | null>(1);
     unitMouseStart = ref<string | null>(null);
     selectingUnits = ref(false);
     deselectingUnits = ref(false);
-    isDark = ref(false);
+    isDark = computed<boolean>({
+        get: () => this.isDarkUser.value === null ? this.osThemeIsDark.value : this.isDarkUser.value,
+        set: (value) => {
+            this.isDarkUser.value = value;
+        },
+    });
 
     constructor() {
         super();
-        this.isDark.value = localStorage?.getItem("drum-slayer-theme") === "dark";
+        const isDarkUserInitial = localStorage?.getItem("drum-slayer-theme");
+        if (isDarkUserInitial === "dark") {
+            this.isDarkUser.value = true;
+        } else if (isDarkUserInitial === "light") {
+            this.isDarkUser.value = false;
+        }
+
+        const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+        const onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => { 
+            this.osThemeIsDark.value = event.matches;
+        };
+        mediaQueryList.onchange = onMediaChange;
+        onMediaChange(mediaQueryList);
+
+        watch(this.isDarkUser, (newIsDarkUser) => {
+            if (typeof newIsDarkUser === "boolean") {
+                localStorage?.setItem("drum-slayer-theme", newIsDarkUser ? "dark" : "light");
+            }
+        }, { immediate: true });
+
         watch(this.isDark, (newIsDark) => {
             if (newIsDark) {
                 document.body.classList.add("dark");
             } else {
                 document.body.classList.remove("dark");
             }
-            localStorage?.setItem("drum-slayer-theme", newIsDark ? "dark" : "light");
         }, { immediate: true });
     }
 }

src/ui/Beat/Beat.vue

@@ -38,7 +38,9 @@
                                         <track-view :beat-index="beatIndex" 
                                                     :track-index="element.index" />
                                         </div>
-                                    <track-settings-view v-show="trackSettingsOpen === element.index" :beat-index="beatIndex" :track-index="element.index" />
+                                    <div class="track-settings-row" v-show="trackSettingsOpen === element.index">
+                                        <track-settings-view :beat-index="beatIndex" :track-index="element.index" />
+                                    </div>
                                 </div>
                             </template>
                         </transition-group>
@@ -209,6 +211,12 @@
         opacity: 0;
     }
 
+    .track-settings-row {
+        background-color: var(--color-bg-medium);
+        width: 100%;
+        margin-bottom: 0.5em;
+    }
+
     .vertical-mode {
         .beat-title {
             color: var(--color-title-light);

src/ui/Root/Root.vue

@@ -51,12 +51,6 @@
                         @click="toggleOrientation">
                         <icon icon-name="arrowClockwise" color="var(--color-ui-neutral-dark)" />
                     </div>
-                    <div
-                        class="quick-access-button"
-                        title="Bake all tracks"
-                        @click="bakeAll">
-                        <icon icon-name="snowflake" color="var(--color-ui-neutral-dark)" />
-                    </div>
                     <div
                         class="quick-access-button"
                         title="Reset all"

src/ui/TrackSettings/TrackSettings.vue

@@ -1,13 +1,9 @@
 <template>
     <div class="track-settings" v-if="track && beat">
-        <action-button icon-name="snowflake" type="secondary" alt="Bake Loops" :disabled="!track.looping.value" @click="track.bakeLoops()" />
-        <action-button icon-name="trash" type="secondary" alt="Delete Track" @click="beat.removeTrack(trackIndex)" />
-        <div class="loop-settings">
-            <bool-box label="Loop:" v-model="track.looping.value" />
-        </div>
-        <div class="loop-settings-option" :class="{ hide: !track.looping.value }">
-            <number-input v-model="track.loopLength.value" />
-            </div>
+        <bool-box label="Loop:" v-model="track.looping.value" />
+        <number-input v-model="track.loopLength.value" />
+        <action-button v-show="track.looping.value" icon-name="snowflake" type="secondary" alt="Bake Loops" @click="track.bakeLoops()" />
+        <bool-box label="Auto beat length:" v-model="beat.useAutoBeatLength.value" />
     </div>
 </template>
 
@@ -31,35 +27,18 @@
 <style scoped lang="scss">
 .track-settings {
     height: 3.5em;
-    display: flex;
+    display: inline-flex;
     text-align: center;
     align-items: center;
-    justify-content: space-between;
-    margin-bottom: 0.5em;
-    background-color: var(--color-bg-medium);
 
     .loop-settings {
         text-align: left;
-        flex: auto;
-    }
-
-    .loop-settings-option.hide {
-        display: none;
-    }
-
-    .loop-settings-option {
-        flex: auto;
-        padding-right: 1em;
     }
 
     > * {
         margin-right: 0.2em;
     }
 
-    &:last-child {
-        margin-right: 0;
-    }
-
     .visibility { 
         cursor: pointer;
     }