made control buttons customizable

src/renderer/app.css

@@ -1,4 +1,5 @@
 @import url(themes/amethyst-light.css);
+@import url(themes/amethyst-dark.css);
 
 @font-face {
   font-family: "cozette-vector";

src/renderer/components/ControlButtons.vue

@@ -7,27 +7,27 @@ const state = useState();
 
 <template>
   <div class="flex no-drag">
-    <button class="controlButton cursor-pointer hover:bg-gray-300 active:bg-blue-500" @click="electron.minimize()">
+    <button class="controlButton text-control-minimize-icon cursor-pointer hover:bg-control-minimize-background-hover active:bg-primary" @click="electron.minimize()">
       <i-fluency-minimize />
     </button>
 
-    <button v-if="!state.state.isMaximized" class="controlButton cursor-pointer hover:bg-gray-300 active:bg-blue-500" @click="electron.maximize()">
+    <button v-if="!state.state.isMaximized" class="controlButton text-control-maximize-icon cursor-pointer hover:bg-control-maximize-background-hover active:bg-primary" @click="electron.maximize()">
       <i-fluency-maximize />
     </button>
 
-    <button v-if="state.state.isMaximized" class="controlButton cursor-pointer hover:bg-gray-300 active:bg-blue-500" @click="electron.unmaximize()">
+    <button v-if="state.state.isMaximized" class="controlButton text-control-maximize-icon cursor-pointer hover:bg-control-maximize-background-hover active:bg-primary" @click="electron.unmaximize()">
       <i-fluency-shrink />
     </button>
 
-    <button class="controlButton cursor-pointer hover:bg-red-500 active:text-white hover:text-white fill-current active:bg-red-400" @click="electron.close()">
+    <button class="controlButton text-control-close-icon cursor-pointer hover:bg-control-close-background-hover active:text-control-close-icon-hover hover:text-control-close-icon-hover active:bg-primary" @click="electron.close()">
       <i-fluency-x />
     </button>
   </div>
 </template>
 
 <style scoped lang="postcss">
 .controlButton {
-  @apply hover:text-white h-full  flex items-center justify-center py-1.5 px-4 text-sm;
+  @apply h-full fill-current flex items-center justify-center py-1.5 px-4 text-sm;
 
   svg {
     @apply w-3 h-3;

src/renderer/components/Explorer.vue

@@ -59,7 +59,7 @@ const parseTitle = (path: string) => {
 
       <li
         v-for="([song, i]) of player.getQueue().map((song, i) => song.toLowerCase().includes(filterText.toLowerCase()) ? [song, i] : undefined).filter(song => !!song) as [string, number][]"
-        :key="song" :class="[isHoldingControl && 'control-hover', isHoldingControl ? 'cursor-external-pointer' : 'cursor-default', i === player.getCurrentlyPlayingIndex() && 'text-blue-500']" class=" h-3 mb-0.5 hover:text-explorer-text-hover select-none" @keypress.prevent
+        :key="song" :class="[isHoldingControl && 'control-hover', isHoldingControl ? 'cursor-external-pointer' : 'cursor-default', i === player.getCurrentlyPlayingIndex() && 'text-explorer-text-active']" class=" h-3 mb-0.5 hover:text-explorer-text-hover select-none" @keypress.prevent
         @click="isHoldingControl ? invoke('show-item', [player.getQueue()[i]]) : player.setCurrentlyPlayingIndex(i)"
       >
         <cover class="inline align-top w-3 h-3" :song-path="song" />

src/renderer/components/MenuBar.vue

@@ -14,7 +14,7 @@ const playPop = () => {
 </script>
 
 <template>
-  <div class="bg-gray-200 font-cozette drag text-xs flex justify-between items-center">
+  <div class="bg-menu-bar font-cozette drag text-xs flex justify-between items-center">
     <div class="flex no-drag h-full items-center">
       <img v-if="state.isDev.value" src="../icon-dev.png" class="transform active:rotate-360  active:scale-50 transition duration-200 cursor-heart-pointer ml-1 h-4" alt="" @click="playPop">
       <img v-else src="../icon.png" class="transform  active:rotate-360 active:scale-50 transition duration-200 cursor-heart-pointer ml-1 h-4" alt="" @click="playPop">

src/renderer/themes/amethyst-dark.css

@@ -0,0 +1,31 @@
+.theme-amethyst-dark {
+  --primary-color: rgb(130, 137, 255);
+  --secondary-color: rgb(224, 145, 255);
+
+  --color-menu-bar: rgb(255, 255, 255);
+  --color-menu-text: rgb(255, 255, 255);
+  --color-menu-text-hover: var(--primary-color);
+  --color-menu-background: rgb(8, 9, 29);
+  --color-menu-option-hover: rgba(96, 104, 254, 0.25);
+  --color-menu-option-text: var(--primary-color);
+  --color-menu-option-text-hover: var(--secondary-color);
+  --color-menu-splitter: rgba(96, 104, 254, 0.50);
+
+  --color-explorer-background: rgb(8, 9, 29);
+  --color-explorer-text: rgba(96, 104, 254, 0.50);
+  --color-explorer-text-active: var(--secondary-color);
+  --color-explorer-text-hover: var(--primary-color);
+
+  --color-meter-background: rgba(96, 104, 254, 0.30);
+  --color-meter-background-clipping: rgba(96, 104, 254, 0.20);
+  --color-meter-instantaneous: var(--secondary-color);
+  --color-meter-average: var(--primary-color);
+  --color-meter-instantaneous-clipping: rgb(239, 68, 68);
+  --color-meter-average-clipping: rgb(248, 113, 113);
+
+  --color-spectrum-background: rgba(255, 255, 255, 0);
+  --color-spectrum-peaks: var(--primary-color);
+
+  --color-tag-background: rgb(0, 0, 0);
+  --color-tag-text: rgb(255, 255, 255);
+}

src/renderer/themes/amethyst-light.css

@@ -1,28 +1,54 @@
 .theme-amethyst-light {
-  --primary-color: rgb(130, 137, 255);
-  --secondary-color: rgb(224, 145, 255);
+  --color-primary: rgb(130, 137, 255);
+  --color-secondary: rgb(224, 145, 255);
 
+
+
+  --color-menu-bar: rgb(255, 255, 255);
   --color-menu-text: rgb(255, 255, 255);
-  --color-menu-text-hover: var(--primary-color);
+  --color-menu-text-hover: var(--color-primary);
   --color-menu-background: rgb(8, 9, 29);
   --color-menu-option-hover: rgba(96, 104, 254, 0.25);
-  --color-menu-option-text: var(--primary-color);
-  --color-menu-option-text-hover: var(--secondary-color);
+  --color-menu-option-text: var(--color-primary);
+  --color-menu-option-text-hover: var(--color-secondary);
   --color-menu-splitter: rgba(96, 104, 254, 0.50);
 
+
+
+  --color-control-minimize-icon: rgb(0, 0, 0);
+  --color-control-minimize-icon-hover: rgb(0, 0, 0);
+  --color-control-minimize-background-hover: rgb(0, 0, 0, 0.10);
+
+  --color-control-maximize-icon: var(--color-control-minimize-icon);
+  --color-control-maximize-icon-hover: var(--color-control-minimize-icon-hover);
+  --color-control-maximize-background-hover: var(--color-control-minimize-background-hover);
+
+  --color-control-close-icon: var(--color-control-minimize-icon);
+  --color-control-close-icon-hover: rgb(255, 255, 255);
+  --color-control-close-background-hover: var(--color-primary);
+
+
+
   --color-explorer-background: rgb(255, 255, 255);
   --color-explorer-text: rgb(0, 0, 0);
-  --color-explorer-text-hover: var(--primary-color);
+  --color-explorer-text-active: var(--color-secondary);
+  --color-explorer-text-hover: var(--color-primary);
+
+
 
   --color-meter-background: rgb(229, 231, 235);
   --color-meter-background-clipping: rgb(209, 213, 219);
-  --color-meter-instantaneous: var(--secondary-color);
-  --color-meter-average: var(--primary-color);
+  --color-meter-instantaneous: var(--color-secondary);
+  --color-meter-average: var(--color-primary);
   --color-meter-instantaneous-clipping: rgb(239, 68, 68);
   --color-meter-average-clipping: rgb(248, 113, 113);
 
+
+
   --color-spectrum-background: rgb(255, 255, 255);
-  --color-spectrum-peaks: var(--primary-color);
+  --color-spectrum-peaks: var(--color-primary);
+
+
 
   --color-tag-background: rgb(0, 0, 0);
   --color-tag-text: rgb(255, 255, 255);

src/renderer/views/Home.vue

@@ -72,7 +72,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex h-[calc(100%-24px)] font-cozette main">
+  <div class="flex h-[calc(100%-24px)] text-explorer-text bg-explorer-background font-cozette main">
     <explorer />
     <div v-if="metadata" class="h-full flex w-full flex-col">
       <div class="flex p-1 gap-2 items-center ">
@@ -105,7 +105,7 @@ onMounted(() => {
       <!-- <div class="flex bg-gray-400 w-full h-1/3" /> -->
       <!-- <div class="flex bg-black w-full h-1/3" /> -->
 
-      <div class="flex relative h-full bg-white overflow-hidden">
+      <div class="flex relative h-full  overflow-hidden">
         <!-- <div class="absolute w-full h-full bg-black transform scale-150 ">
         <div class="w-full h-full bg-center bg-no-repeat bg-cover opacity-50 filter blur-[64px]" :style="`background-image: url(${cover})`" />
       </div> -->

src/renderer/windi.config.ts

@@ -4,15 +4,28 @@ import typography from "windicss/plugin/typography";
 const cssVariable = (cssVariable: string) => `var(--color-${cssVariable})`;
 
 const COLORS = [
+	"primary",
+	"secondary",
+	"menu-bar",
 	"menu-text",
 	"menu-text-hover",
 	"menu-background",
 	"menu-option-hover",
 	"menu-option-text",
 	"menu-option-text-hover",
 	"menu-splitter",
+	"control-minimize-icon",
+	"control-minimize-icon-hover",
+	"control-minimize-background-hover",
+	"control-maximize-icon",
+	"control-maximize-icon-hover",
+	"control-maximize-background-hover",
+	"control-close-icon",
+	"control-close-icon-hover",
+	"control-close-background-hover",
 	"explorer-background",
 	"explorer-text",
+	"explorer-text-active",
 	"explorer-text-hover",
 	"meter-background",
 	"meter-background-clipping",