feat(theme): improve dark theme

- adjust dark to bright theme colors - add radio colors on dark theme
SimonGolms · Jan 26, 2021 · e04611e · e04611e
1 parent 16e4148
commit e04611e
Showing 1 changed file with 36 additions and 31 deletions.
diff --git a/src/theme/dark.theme.css b/src/theme/dark.theme.css
@@ -12,47 +12,47 @@
    */
 
 .dark-theme {
-  --ion-color-primary: #428cff;
-  --ion-color-primary-rgb: 66, 140, 255;
-  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary: #003366;
+  --ion-color-primary-rgb: 0, 51, 102;
+  --ion-color-primary-contrast: #d9d9d9;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3a7be0;
-  --ion-color-primary-tint: #5598ff;
+  --ion-color-primary-shade: #002d5a;
+  --ion-color-primary-tint: #1a4775;
 
-  --ion-color-secondary: #50c8ff;
-  --ion-color-secondary-rgb: 80, 200, 255;
-  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary: #336699;
+  --ion-color-secondary-rgb: 51, 102, 153;
+  --ion-color-secondary-contrast: #d9d9d9;
   --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #46b0e0;
-  --ion-color-secondary-tint: #62ceff;
+  --ion-color-secondary-shade: #2d5a87;
+  --ion-color-secondary-tint: #4775a3;
 
-  --ion-color-tertiary: #6a64ff;
-  --ion-color-tertiary-rgb: 106, 100, 255;
-  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary: #6699cc;
+  --ion-color-tertiary-rgb: 102, 153, 204;
+  --ion-color-tertiary-contrast: #d9d9d9;
   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #5d58e0;
-  --ion-color-tertiary-tint: #7974ff;
-
-  --ion-color-success: #2fdf75;
-  --ion-color-success-rgb: 47, 223, 117;
-  --ion-color-success-contrast: #000000;
-  --ion-color-success-contrast-rgb: 0, 0, 0;
-  --ion-color-success-shade: #29c467;
-  --ion-color-success-tint: #44e283;
-
-  --ion-color-warning: #ffd534;
-  --ion-color-warning-rgb: 255, 213, 52;
+  --ion-color-tertiary-shade: #5a87b4;
+  --ion-color-tertiary-tint: #75a3d1;
+
+  --ion-color-success: #009933;
+  --ion-color-success-rgb: 0, 153, 51;
+  --ion-color-success-contrast: #d9d9d9;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #00872d;
+  --ion-color-success-tint: #1aa347;
+
+  --ion-color-warning: #ffcc00;
+  --ion-color-warning-rgb: 255, 204, 0;
   --ion-color-warning-contrast: #000000;
   --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0bb2e;
-  --ion-color-warning-tint: #ffd948;
+  --ion-color-warning-shade: #e0b400;
+  --ion-color-warning-tint: #ffd11a;
 
-  --ion-color-danger: #ff4961;
-  --ion-color-danger-rgb: 255, 73, 97;
+  --ion-color-danger: #ff0000;
+  --ion-color-danger-rgb: 255, 0, 0;
   --ion-color-danger-contrast: #ffffff;
   --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #e04055;
-  --ion-color-danger-tint: #ff5b71;
+  --ion-color-danger-shade: #e00000;
+  --ion-color-danger-tint: #ff1a1a;
 
   --ion-color-dark: #f4f5f8;
   --ion-color-dark-rgb: 244, 245, 248;
@@ -153,3 +153,8 @@
 
   --ion-tab-bar-background: #1f1f1f;
 }
+
+.dark-theme ion-radio {
+  --color: var(--ion-color-step-400);
+  --color-checked: var(--ion-color-step-850);
+}