introduce theme attributes and variables

peach-web/static/css/_variables.css

@@ -166,6 +166,40 @@
   --light: var(--light-gray);
   --dark: var(--near-black);
 
+/* LIGHT (default) THEME VARIABLES */
+
+  --background: var(--moon-gray);
+  --button-background: var(--light-gray);
+  --circle-background: var(--light-gray);
+  --circle-small-hover-background: var(--white);
+
+  --color-ssb: var(--hot-pink);
+  --color-settings: var(--purple);
+  --color-status: var(--green);
+  --color-info: var(--info);
+
+  --capsule-background: var(--light-gray);
+
+  --text-color-normal: var(--near-black);
+  --text-color-gray: var(--mid-gray);
+  --text-color-light-gray: var(--moon-gray);
+  --text-color-light: var(--white);
+ 
+  --icon-normal: invert(0%) sepia(1%) saturate(100%) hue-rotate(79deg) brightness(86%) contrast(87%);
+  --icon-gray: invert(72%) sepia(8%) saturate(14%) hue-rotate(316deg) brightness(93%) contrast(92%);
+  --icon-light: invert();
+
+  /* DARK THEME VARIABLES */
+
+  /*--background-dark: var(--dark-gray);*/
+  --background-dark: #222;
+  --button-background-dark: var(--mid-gray);
+  /*--capsule-background-dark: var(--light-gray);*/
+  --capsule-background-dark: #333;
+  --circle-background-dark: var(--silver);
+  --circle-small-hover-background-dark: var(--moon-gray);
+
+}
 /* we need to add shades for each accent colour
  *
  * --info-100
@@ -174,4 +208,3 @@
  * --info-400
  * --info-500
  */
-}

peach-web/static/css/peachcloud.css

@@ -26,6 +26,8 @@
  * - NAVIGATION
  * - PARAGRAPHS
  * - SWITCHES / SLIDERS
+ * - TEXT
+ * - TITLES
  *
 \* ------------------------------ */
 
@@ -128,13 +130,57 @@
  */
 
 body {
-  background-color: var(--moon-gray);
+  background-color: var(--background);
   height: 100%;
   display: flex;
   flex-direction: column;
   margin: 0;
 }
 
+/*
+ * BORDERS
+ */
+
+.border-circle-small {
+    border: 4px solid;
+}
+
+.border-settings {
+    border-color: var(--color-settings);
+}
+
+.border-ssb {
+    border-color: var(--color-ssb);
+}
+
+.border-status {
+    border-color: var(--color-status);
+}
+
+.border-primary {
+    border-color: var(--primary);
+}
+
+.border-success {
+    border-color: var(--success);
+}
+
+.border-info {
+    border-color: var(--info);
+}
+
+.border-warning {
+    border-color: var(--warning);
+}
+
+.border-danger {
+    border-color: var(--danger);
+}
+
+.border-dark-gray {
+    border-color: var(--dark-gray);
+}
+
 /*
  * BUTTONS
  */
@@ -146,7 +192,7 @@ body {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    color: var(--near-black);
+    color: var(--button-text-color);
     cursor: pointer;
     padding: 10px;
     text-align: center;
@@ -169,37 +215,42 @@ body {
 }
 
 .button-primary {
-    background-color: var(--light-gray);
+    background-color: var(--button-background);
 }
 
 .button-primary:hover {
     background-color: var(--primary);
+    color: var(--button-text-hover-color);
 }
 
 .button-primary:focus {
     background-color: var(--primary);
+    color: var(--button-text-hover-color);
     outline: none;
 }
 
 .button-secondary {
-    background-color: var(--light-gray);
+    background-color: var(--button-background);
 }
 
 .button-secondary:hover {
     background-color: var(--light-silver);
+    color: var(--button-text-hover-color);
 }
 
 .button-secondary:focus {
     background-color: var(--light-silver);
+    color: var(--button-text-hover-color);
     outline: none;
 }
 
 .button-warning {
-    background-color: var(--light-gray);
+    background-color: var(--button-background);
 }
 
 .button-warning:hover {
     background-color: var(--light-red);
+    color: var(--button-text-hover-color);
 }
 
 .button-warning:focus {
@@ -213,9 +264,9 @@ body {
 
 .capsule {
     padding: 1rem;
-    border: var(--border-width-1) solid;
+    border-style: solid;
     border-radius: var(--border-radius-3);
-    background-color: var(--light-gray);
+    background-color: var(--capsule-background);
     /* margin-top: 1rem; */
     /* margin-bottom: 1rem; */
 }
@@ -272,6 +323,7 @@ body {
 }
 
 .card-text {
+    color: var(--text-color);
     margin: 0;
     font-size: var(--font-size-5);
     padding-bottom: 0.3rem;
@@ -294,7 +346,7 @@ body {
 
 .circle {
     align-items: center;
-    background: var(--light-gray);
+    background: var(--circle-background);
     border-radius: 50%;
     box-shadow: var(--box-shadow-3);
     display: flex;
@@ -307,6 +359,15 @@ body {
     width: 5rem;
 }
 
+.circle-small:hover {
+    background: var(--circle-small-hover-background);
+}
+
+.circle-small:focus {
+    background: var(--circle-small-hover-background);
+    outline: none;
+}
+
 .circle-medium {
     height: 8rem;
     width: 8rem;
@@ -391,30 +452,6 @@ body {
     background-color: var(--light);
 }
 
-.primary-border {
-    border-color: var(--primary);
-}
-
-.success-border {
-    border-color: var(--success);
-}
-
-.info-border {
-    border-color: var(--info);
-}
-
-.warning-border {
-    border-color: var(--warning);
-}
-
-.danger-border {
-    border-color: var(--danger);
-}
-
-.dark-gray-border {
-    border-color: var(--dark-gray);
-}
-
 /*
  * GRIDS
  */
@@ -555,6 +592,30 @@ body {
 
 html {
   height: 100%;
+
+  --background: var(--background);
+  --button-background: var(--button-background);
+  --button-text-color: var(--text-color-normal);
+  --button-text-hover-color: var(--text-color-normal);
+  --circle-background: var(--circle-background);
+  --circle-small-hover-background: var(--circle-small-hover-background);
+  --icon-color: var(--icon-normal);
+  --nav-icon-color: var(--nav-icon-color);
+  --text-color: var(--text-color-normal);
+}
+
+html[data-theme='dark'] {
+  --background: var(--background-dark);
+  --button-background: var(--button-background-dark);
+  --button-text-color: var(--text-color-light);
+  --button-text-hover-color: var(--text-color-normal);
+  --capsule-background: var(--capsule-background-dark);
+  --circle-background: var(--circle-background-dark);
+  --circle-small-hover-background: var(--circle-small-hover-background-dark);
+  --icon-color: var(--icon-light);
+  --nav-icon-color: var(--nav-icon-color-light);
+  --text-color: var(--text-color-light);
+  --text-color-gray: var(--text-color-light-gray);
 }
 
 /*
@@ -573,28 +634,21 @@ html {
  * FONTS
  */
 
+.font-normal {
+    color: var(--text-color);
+}
+
 .font-near-black {
     color: var(--near-black);
 }
 
 .font-gray {
-    color: var(--mid-gray);
+    color: var(--text-color-gray);
 }
 
 .font-light-gray {
-    color: var(--silver);
+    /* color: var(--silver); */
-}
+    color: var(--text-color-light-gray);
-
-.font-success {
-    color: var(--success);
-}
-
-.font-warning {
-    color: var(--warning);
-}
-
-.font-failure {
-    color: var(--danger);
 }
 
 /*
@@ -637,12 +691,12 @@ form {
 
 /* icon-active: sets color of icon svg to near-black */
 .icon-active {
-    filter: invert(0%) sepia(1%) saturate(4171%) hue-rotate(79deg) brightness(86%) contrast(87%);
+    filter: var(--icon-color);
 }
 
 /* icon-inactive: sets color of icon svg to gray */
 .icon-inactive {
-    filter: invert(72%) sepia(8%) saturate(14%) hue-rotate(316deg) brightness(93%) contrast(92%);
+    filter: var(--icon-gray);
 }
 
 /*
@@ -699,10 +753,11 @@ form {
     font-family: var(--sans-serif);
     font-size: var(--font-size-7);
     display: block;
-    margin-bottom: 2px;
+    /* margin-bottom: 2px; */
 }
 
 .label-medium {
+    color: var(--text-color);
     font-size: var(--font-size-3);
     display: block;
 }
@@ -728,7 +783,7 @@ form {
 
 .link {
     text-decoration: none;
-    color: var(--font-near-black);
+    /* color: var(--font-near-black); */
 }
 
 /*
@@ -861,6 +916,7 @@ meter::-moz-meter-bar {
 }
 
 .nav-title {
+    color: var(--text-color);
     font-family: var(--sans-serif);
     font-size: var(--font-size-4);
     font-weight: normal;
@@ -976,6 +1032,26 @@ input:checked + .slider:before {
     border-radius: 50%;
 }
 
+/*
+ * TEXT
+ */
+
+.text-info {
+    color: var(--info);
+}
+
+.text-danger {
+    color: var(--danger);
+}
+
+.text-success {
+    color: var(--success);
+}
+
+.text-warning {
+    color: var(--warning);
+}
+
 /*
  * TITLES
  */