WIP

lama_cleaner/app/src/styles/_Colors.scss

@@ -17,13 +17,22 @@
   --modal-bg: var(--page-bg);
   --modal-text-color: rgb(0, 0, 0);
   --modal-hotkey-border-color: rgb(0, 0, 0);
-  --model-mask-bg: rgba(209,213,219,0.4);
+  --model-mask-bg: rgba(209, 213, 219, 0.4);
+
+  // Text
+  --text-color: #040404;
+  --text-color-gray: rgb(107, 111, 118);
 
   // Shared
   --btn-primary-bg: rgb(210, 210, 220);
-  --btn-text-color: black;
-  --btn-text-hover-color: black;
+  --btn-text-color: var(--text-color);
+  --btn-text-hover-color: #040404;
   --btn-border-color: rgb(100, 100, 120);
   --btn-primary-hover-bg: var(--yellow-accent);
   --animation-pulsing-bg: rgb(255, 255, 255, 0.5);
+
+  // switch
+  --switch-root-background-color: rgb(223, 225, 228);
+  --switch-thumb-color: var(--page-bg);
+  --switch-thumb-checked-color: var(--page-bg);
 }

lama_cleaner/app/src/styles/_ColorsDark.scss

@@ -3,7 +3,7 @@
 
   // Theme
   --page-bg: #040404;
-  --page-text-color: #F9F9F9;
+  --page-text-color: #f9f9f9;
   --yellow-accent: #ffcc00;
   --link-color: var(--yellow-accent);
   --border-color: rgb(100, 100, 120);
@@ -17,14 +17,23 @@
   --modal-bg: var(--page-bg);
   --modal-text-color: var(--page-text-color);
   // --modal-hotkey-bg: rgb(60, 60, 90);
-  --modal-hotkey-border-color: var(--page-text-color);;
+  --modal-hotkey-border-color: var(--page-text-color);
   --model-mask-bg: rgba(76, 76, 87, 0.4);
 
+  // Text
+  --text-color: white;
+  --text-color-gray: rgb(138, 143, 152);
+
   // Shared
   --btn-primary-bg: rgb(140, 140, 180);
-  --btn-text-color: white;
+  --btn-text-color: var(--text-color);
   --btn-text-hover-color: var(--page-bg);
   --btn-border-color: var(--yellow-accent);
   --btn-primary-hover-bg: var(--yellow-accent);
   --animation-pulsing-bg: rgb(240, 240, 255);
+
+  // switch
+  --switch-root-background-color: rgb(60, 63, 68);
+  --switch-thumb-color: rgb(31, 32, 35);
+  --switch-thumb-checked-color: white;
 }

lama_cleaner/app/src/styles/_index.scss

@@ -11,11 +11,15 @@
 @use '../components/Header/Header';
 @use '../components/Header/ThemeChanger';
 @use '../components/Shortcuts/Shortcuts';
+@use '../components/Setting/Setting.scss';
 
 // Shared
 @use '../components/FileSelect/FileSelect';
 @use '../components/shared/Button';
 @use '../components/shared/Modal';
+@use '../components/shared/Selector';
+@use '../components/shared/Switch';
+@use '../components/shared/NumberInput';
 
 // Main CSS
 *,