Add dedicated style variables for the toggle button

WoltLab · Nov 15, 2024 · 19e37de · 19e37de
1 parent 4e84614
commit 19e37de
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 16 deletions.
diff --git a/ts/WoltLabSuite/WebComponent/woltlab-core-toggle-button.ts b/ts/WoltLabSuite/WebComponent/woltlab-core-toggle-button.ts
@@ -31,16 +31,16 @@
           width: 40px;
           height: 24px;
           cursor: pointer;
-          background-color: var(--wcfSidebarDimmedText);
+          background-color: var(--wcfToggleButtonBackground);
           transition: 0.4s;
         }
 
         :host([checked]) [part="track"] {
-          background-color: var(--wcfStatusSuccessText);
+          background-color: var(--wcfToggleButtonBackgroundActive);
         }
 
         [part="slider"] {
-          background-color: white;
+          background-color: var(--wcfToggleButtonSliderBackground);
           border-radius: 50%;
           position: absolute;
           top: 2px;
@@ -53,15 +53,16 @@
         }
 
         :host([checked]) [part="slider"] {
+          background-color: var(--wcfToggleButtonSliderBackgroundActive);
           transform: translateX(18px);
         }
 
         ::slotted(fa-icon) {
-          color: var(--wcfSidebarDimmedText);
+          color: var(--wcfToggleButtonBackground);
         }
 
         :host([checked]) ::slotted(fa-icon) {
-          color: var(--wcfStatusSuccessText);
+          color: var(--wcfToggleButtonBackgroundActive);
         }
       `;
 

diff --git a/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.2_styleVariables.php b/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.2_styleVariables.php
@@ -0,0 +1,27 @@
+<?php
+
+use wcf\system\WCF;
+
+$styleVariables = [
+    ['wcfToggleButtonBackground', 'rgba(105, 109, 114, 1)', 'rgba(89, 89, 89, 1)'],
+    ['wcfToggleButtonBackgroundActive', 'rgba(60, 118, 61, 1)', 'rgba(0, 113, 84, 1)'],
+    ['wcfToggleButtonSliderBackground', 'rgba(250, 250, 250, 1)', 'rgba(203, 203, 203, 1)'],
+    ['wcfToggleButtonSliderBackgroundActive', 'rgba(250, 250, 250, 1)', 'rgba(203, 203, 203, 1)'],
+];
+
+$sql = "INSERT INTO             wcf1_style_variable
+                                (variableName, defaultValue, defaultValueDarkMode)
+        VALUES                  (?, ?, ?)
+        ON DUPLICATE KEY UPDATE defaultValue = VALUES(defaultValue),
+                                defaultValueDarkMode = VALUES(defaultValueDarkMode)";
+$statement = WCF::getDB()->prepare($sql);
+
+foreach ($styleVariables as $data) {
+    [$variableName, $defaultValue, $defaultValueDarkMode] = $data;
+
+    $statement->execute([
+        $variableName,
+        $defaultValue,
+        $defaultValueDarkMode,
+    ]);
+}