chore: change toggle colors

Author: yaroslav8765

adminforth/modules/styles.ts

@@ -76,9 +76,10 @@ export const styles = () => ({
     lightFocusRing: "alias:lightPrimary lighten", //focus ring color
     lightTextLabel: "black", //text color of checkbox label
 
-    lightToggleBgUnactive: "alias:lightPrimaryContrast darken",
+    lightToggleBgUnactive: "#F9FAFB",
     lightToggleBgActive: "alias:lightPrimary darken",
-    lightToggleCircle: "alias:lightPrimaryContrast lighten",
+    lightToggleCircleUnactive: "alias:lightPrimary",
+    lightToggleCircleActive: "#F9FAFB",
     lightToggleRing: "alias:lightPrimary lighten",
     lightToggleText: "black", 
     lightToggleBorderUnactive: "alias:lightPrimary lighten",
@@ -142,9 +143,10 @@ export const styles = () => ({
     darkFocusRing: "alias:darkPrimary lighten",
     darkTextLabel: "white",
 
-    darkToggleBgUnactive: "alias:darkPrimaryContrast darken",
+    darkToggleBgUnactive: "#F9FAFB",
     darkToggleBgActive: "alias:darkPrimary darken",
-    darkToggleCircle: "alias:darkPrimaryContrast lighten",
+    darkToggleCircleUnactive: "alias:darkPrimary",
+    darkToggleCircleActive: "#F9FAFB",    
     darkToggleRing: "alias:darkPrimary lighten",
     darkToggleText: "alias:darkPrimaryContrast lighten", 
     darkToggleBorderUnactive: "alias:darkPrimary lighten",

adminforth/spa/src/afcl/Toggle.vue

@@ -11,9 +11,9 @@
                 peer-focus:ring-lightToggleRing dark:peer-focus:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive 
                 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full 
                 peer-checked:after:border-lightToggleBorderActive after:content-[''] after:absolute after:top-[2px] 
-                after:start-[2px] after:bg-lightToggleCircle dark:after:bg-darkToggleCircle after:border-lightToggleBorderUnactive dark:after:border-darkToggleBorderUnactive after:border after:rounded-full 
+                after:start-[2px] after:bg-lightToggleCircleUnactive peer-checked:after:bg-lightToggleCircleActive dark:after:bg-darkToggleCircleUnactive after:border-lightToggleBorderUnactive dark:after:border-darkToggleBorderUnactive after:border after:rounded-full 
                 after:h-5 after:w-5 after:transition-all dark:border-darkToggleBorderUnactive peer-checked:bg-lightToggleBgActive 
-                dark:peer-checked:bg-darkToggleBgActive dark:peer-checked:after:border-darkToggleBorderActive">
+                dark:peer-checked:bg-darkToggleBgActive dark:peer-checked:after:border-darkToggleBorderActive dark:peer-checked:after:bg-darkToggleCircleActive">
             </div>
         <label :for="id" class="cursor-pointer ms-2 text-sm font-medium text-lightToggleText dark:text-darkToggleText">
             <slot></slot>