New color scheme, different depending on dark/light CSS media query

inc/const.inc.php

@@ -38,12 +38,26 @@ define("SUBDOMAIN_REGEX", "^[a-z]{4,63}$");
 
 // Color scheme
 define("THEME", array(
-  'htColor' => "#FF0000",
+  // Displayed on light theme
+  'darkRegColor' => "#D100D1",
+  'darkNsColor' => "#006DFF",
+  'darkHtColor' => "#008768",
+  'darkAuthColor' => "#EE0000",
+
+  // Displayed on dark theme
+  'lightRegColor' => "#FF50FF",
+  'lightNsColor' => "#00FFFF",
+  'lightHtColor' => "#FFFF00",
+  'lightAuthColor' => "#00FF00",
+
+  //The old theme for both dark and light themes
+  /*'htColor' => "#FF0000",
   'regColor' => "#DA03E5",
   'authColor' => "#00FF00",
-  'nsColor' => "#00A5A5",//00c4c4
+  'nsColor' => "#00A5A5",*/
+
   'lightColor' => '#FFFFFF',
-  'darkColor' => '#2a2a2a',
+  'darkColor' => '#000000',
 ));
 
 // Public suffixes

less/buttons.less

@@ -11,61 +11,129 @@
 
 .htButton {
   .button();
-  border-color: @htColor;
-  color: @htColor;
-  &:hover {
-    background-color: @htColor;
+
+  @media @light {
+    border-color: @darkHtColor;
+    color: @darkHtColor;
+    &:hover {
+      background-color: @darkHtColor;
+      &::selection {
+        color: @darkHtColor;
+      }
+    }
     &::selection {
-      color: @htColor;
+      background-color: @darkHtColor;
     }
   }
-  &::selection {
-    background-color: @htColor;
+
+  @media @dark {
+    border-color: @lightHtColor;
+    color: @lightHtColor;
+    &:hover {
+      background-color: @lightHtColor;
+      &::selection {
+        color: @lightHtColor;
+      }
+    }
+    &::selection {
+      background-color: @lightHtColor;
+    }
   }
 }
 
 .regButton {
   .button();
-  border-color: @regColor;
-  color: @regColor;
-  &:hover {
-    background-color: @regColor;
+
+  @media @light {
+    border-color: @darkRegColor;
+    color: @darkRegColor;
+    &:hover {
+      background-color: @darkRegColor;
+      &::selection {
+        color: @darkRegColor;
+      }
+    }
     &::selection {
-      color: @regColor;
+      background-color: @darkRegColor;
     }
   }
-  &::selection {
-    background-color: @regColor;
+
+  @media @dark {
+    border-color: @lightRegColor;
+    color: @lightRegColor;
+    &:hover {
+      background-color: @lightRegColor;
+      &::selection {
+        color: @lightRegColor;
+      }
+    }
+    &::selection {
+      background-color: @lightRegColor;
+    }
   }
 }
 
 .nsButton {
   .button();
-  border-color: @nsColor;
-  color: @nsColor;
-  &:hover {
-    background-color: @nsColor;
+
+  @media @light {
+    border-color: @darkNsColor;
+    color: @darkNsColor;
+    &:hover {
+      background-color: @darkNsColor;
+      &::selection {
+        color: @darkNsColor;
+      }
+    }
     &::selection {
-      color: @nsColor;
+      background-color: @darkNsColor;
     }
   }
-  &::selection {
-    background-color: @nsColor;
+
+  @media @dark {
+    border-color: @lightNsColor;
+    color: @lightNsColor;
+    &:hover {
+      background-color: @lightNsColor;
+      &::selection {
+        color: @lightNsColor;
+      }
+    }
+    &::selection {
+      background-color: @lightNsColor;
+    }
   }
 }
 
 .authButton {
   .button();
-  border-color: @authColor;
-  color: @authColor;
-  &:hover {
-    background-color: @authColor;
+
+  @media @light {
+    border-color: @darkAuthColor;
+    color: @darkAuthColor;
+    &:hover {
+      background-color: @darkAuthColor;
+      &::selection {
+        color: @darkAuthColor;
+      }
+    }
     &::selection {
-      color: @authColor;
+      background-color: @darkAuthColor;
     }
   }
-  &::selection {
-    background-color: @authColor;
+
+  @media @dark {
+    border-color: @lightAuthColor;
+    color: @lightAuthColor;
+    &:hover {
+      background-color: @lightAuthColor;
+      &::selection {
+        color: @lightAuthColor;
+      }
+    }
+    &::selection {
+      background-color: @lightAuthColor;
+    }
   }
 }