src/components/Layout/Header/Disclaimer/Disclaimer.module.scss

@@ -1,9 +1,8 @@
-@import 'colors';
 @import 'spacing';
 @import 'fontsize';
 
 .messageBox {
-    border: 1px solid $colors_yellow;
+    border: 1px solid var(--primary);
     text-align: center;
     padding: $spacing_8;
     border-radius: $spacing_4;

src/components/Layout/Results/Wrapper/Gallery/Thumbnail/Thumbnail.module.scss

@@ -1,10 +1,9 @@
 @import 'spacing';
-@import 'colors';
 @import 'breakpoints';
 
 .text {
     font-size: 12px;
-    color: $colors_yellow;
+    color: var(--primary);
     text-decoration: none;
 
     display: none;
@@ -28,7 +27,7 @@
 }
 
 .imgPlaceholder {
-    background-color: $colors_yellow_focus;
+    background-color: var(--primary-focus);
 }
 
 .thumbnailContainer {

src/components/Layout/Results/Wrapper/Toggle/Toggle.module.scss

@@ -6,6 +6,11 @@
     align-items: center;
     margin-bottom: 16px;
 
+    input[type="checkbox"]:checked {
+        background-color: var(--primary);
+        border-color: var(--primary-focus);
+    }
+
     @media only screen and (min-width: $tablet) {
         display: none;
     }

src/components/Layout/SearchBar/SearchBarForm/SearchBarForm.module.scss

@@ -1,5 +1,4 @@
 @import 'spacing';
-@import 'colors';
 
 .searchForm { 
     display: flex;
@@ -12,19 +11,27 @@
     margin-right: $spacing_16;
 }
 
+.query:hover {
+    border-color: var(--primary-hover);
+}
+
+.query:focus {
+    border-color: var(--primary-hover);
+}
+
 .submitBtn{
     flex: 1;
-    background-color: $colors_yellow;
-    border-color: $colors_yellow;
-    color: $colors_yellow_inverse;
+    background-color: var(--primary);
+    border-color: var(--primary);
+    color: var(--primary-inverse);
 }
 
 .submitBtn:hover {
-    background-color: $colors_yellow_hover;
-    border-color: $colors_yellow_hover;
+    background-color: var(--primary-hover);
+    border-color: var(--primary-hover);
 }
 
 .submitBtn:focus {
-    background-color: $colors_yellow_focus;
-    border-color: $colors_yellow_focus;
+    background-color: var(--primary-focus);
+    border-color: var(--primary-focus);
 }

src/styles/_colors.scss

@@ -1,5 +0,0 @@
-// primaries
-$colors_yellow: #fdd835;
-$colors_yellow_hover: #fbc02d;
-$colors_yellow_focus: rgba(253, 216, 53, 0.125);
-$colors_yellow_inverse: rgba(0, 0, 0, 0.75);

src/styles/_theme.scss

@@ -0,0 +1,37 @@
+/* light scheme (Default) */
+/* Can be forced with data-theme="light" */
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+    --primary: #d81b60;
+    --primary-hover: #e91e63;
+    --primary-focus: rgba(216, 27, 96, 0.25);
+    --primary-inverse: #FFF;
+}
+
+/* Pink Dark scheme (Auto) */
+/* Automatically enabled if user has Dark mode enabled */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --primary: #fdd835;
+    --primary-hover: #fbc02d;
+    --primary-focus: rgba(253, 216, 53, 0.125);
+    --primary-inverse: rgba(0, 0, 0, 0.75);
+  }
+}
+
+/* Pink Dark scheme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme="dark"] {
+    --primary: #fdd835;
+    --primary-hover: #fbc02d;
+    --primary-focus: rgba(253, 216, 53, 0.125);
+    --primary-inverse: rgba(0, 0, 0, 0.75);
+}
+
+/* Pink (Common styles) */
+:root {
+  --form-element-active-border-color: var(--primary);
+  --form-element-focus-color: var(--primary-focus);
+  --switch-color: var(--primary-inverse);
+  --switch-checked-background-color: var(--primary);
+}

src/styles/globals.scss

@@ -1,3 +1,4 @@
 @use "@picocss/pico";
 
-@import "./font"
+@import "./font";
+@import "./theme";