feat: Start to incorporate theme colors.

Author: petejohanson

src/index.css

@@ -1,11 +1,20 @@
+
+:root {
+  --text: light-dark(#212121, #dedede);
+  --background: light-dark( #e8e8e8, #171717);
+  --primary:   light-dark(#3f3fcf, #3030c0);
+  --secondary: light-dark(#a46de3, #531c92);
+  --accent:    light-dark(#12aff3, #0caaed);
+}
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Montserrat, system-ui, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
-  color: light-dark(#242424, rgba(255, 255, 255, 0.87));
-  background-color: light-dark(rgba(255, 255, 255, 0.87), #242424);
+  color: var(--text);
+  background-color: var(--background);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,11 +24,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--accent);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: var(--secondary);
 }
 
 body {
@@ -42,27 +51,16 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: var(--background);
   cursor: pointer;
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: var(--accent);
 }
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+  outline: 5px auto red;
+  outline: 5px auto -webkit-focus-ring-color;
+  z-index: 100;
 }

src/keyboard/key.css

@@ -26,10 +26,12 @@
   padding: 0;
   grid-template-rows: 0 var(--zmk-key-center-height) 0;
   grid-template-columns: 0 var(--zmk-key-center-width) 0;
+
+  box-shadow: var(--text) 0px 0px 0px 1px inset;
 }
 
 .zmk-key__button:hover {
-  background-color: light-dark(white, black);
+  background-color: var(--background);
   grid-template-rows: 1em var(--zmk-key-center-height) 1em;
   grid-template-columns: 1em var(--zmk-key-center-width) 1em;
 }
@@ -57,12 +59,8 @@
 }
 
 .zmk-key__button--primary {
-  color: light-dark( #333, white);
-  background-color: transparent;
+
 
-  box-shadow: light-dark(rgba(0, 0, 0, 0.15), white) 0px 0px 0px 1px inset;
 }
 .zmk-key__button--secondary {
-  color: light-dark(black, white);
-  background-color: light-dark(white, #8c8c8c);
 }

src/keyboard/layer-picker.css

@@ -20,23 +20,10 @@
 }
 
 .zmk-layer-picker__item--selected {
-  background-color: gray;
+  background-color: var(--secondary);
 }
 
 .zmk-layer-picker__item:hover {
   border-radius: 2px;
-  border-color: black;
+  border-color: var(--accent);
 }
-
-
-/* 
-.zmk-key__button--primary {
-  color: #333;
-  background-color: transparent;
-  
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.zmk-key__button--secondary {
-  color: white;
-  background-color: #8c8c8c;
-} */

src/keyboard/physical-layout-picker.css

@@ -20,23 +20,10 @@
 }
 
 .zmk-physical-layout-picker__item--selected {
-  background-color: gray;
+  background-color: var(--secondary);
 }
 
 .zmk-physical-layout-picker__item:hover {
   border-radius: 2px;
-  border-color: black;
+  border-color: var(--accent);
 }
-
-
-/* 
-.zmk-key__button--primary {
-  color: #333;
-  background-color: transparent;
-  
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.zmk-key__button--secondary {
-  color: white;
-  background-color: #8c8c8c;
-} */