better button colors

Author: opatut

assets/scss/dark.scss

@@ -5,13 +5,15 @@
   --background: #FFFFFF;
   --foreground: #101010;
   --background-1: #f1f1f6;
+  --background-2: #e9e9e9;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --border-color: rgba(255, 255, 255, 0.2);
     --background: #101010;
     --background-1: #303030;
+    --background-2: #505050;
     --foreground: #FFFFFF;
     color-scheme: dark;
     color: var(--foreground);

assets/scss/features.scss

@@ -54,23 +54,27 @@
 // Buttons
 
 .button {
-   background: rgba(0, 0, 0, 0.02);
-   box-shadow: rgba(0, 0, 0, 0.2) 0 5px;
+   background: var(--background-1);
+   box-shadow: $border-color 0 5px;
    border: 1px solid $border-color;
 
    &, &:visited, &:hover {
-     color: $gray-dark;
+     color: var(--foreground);
    }
 
    &:hover {
-     background: white;
+     background: var(--background);
    }
 
   .primary &, .primary-1 &, .stage & {
      background: rgba(255, 255, 255, 0.7);
      box-shadow: rgba(0, 0, 0, 0.6) 0 5px;
      border: none;
 
+     &, &:visited, &:hover {
+       color: #101010;
+     }
+
      &:hover {
        background: white;
      }