Add dark theme (#730)

frontend/src/index.scss

@@ -1,14 +1,372 @@
+:root {
+  --text-color: #333;
+  --background-color: #fff;
+  --terminal-background: #333;
+  --terminal-color: #fff;
+  --result-item-show-more-background: #fff;
+  --result-item-show-more-color: #666;
+  --search-sidebar-container-border-color: #ccc;
+  --search-sidebar-link-color: var(--text-color);
+  --search-sidebar-hovered-link-background: #eee;
+  --search-sidebar-selected-link-background: #0081c2;
+  --search-sidebar-selected-link-color: #fff;
+  /* Divider between search results */
+  --search-result-divider-line-color: #ccc;
+  /* Gets overwritten by bootstrap; has no effect */
+  --search-result-title-color: #08c;
+  /* Text color for the details in a search result (like name, version, outputs...) */
+  --search-result-short-details-color: #666;
+  /* When search results are expanded, they show tabbed help for installing the result. This is the border color for that tabbed thing.
+       It is only half of the border, the other half is styled by bootstrap. */
+  --search-result-expanded-tab-border: #ccc;
+  /* Color of the animation above the `Loading` text that is shown when searching */
+  --loader-color: #000;
+  /* Background color of the experimental badge next to the flakes search */
+  --info-label-background: #007dbb;
+  /* Text color for links. Probably overwritten by bootstrap */
+  --link-color: #007dbb;
+  /* Background color for the small badges with number in the sidebar */
+  --badge-background: #757575;
+}
+
+/* ------------------------------------------------------------------------- */
+/* -- Darkmode specific styles --------------------------------------------- */
+/* ------------------------------------------------------------------------- */
+
+@media (prefers-color-scheme: dark) {
+
+  // Define darkmode colors
+  :root {
+    --text-color: #ffffff;
+    --text-color-light: rgba(255, 255, 255, 0.5);
+    --text-color-warning: #f8e45c;
+    --background-color: #242424;
+    --hover-background: #ffffff13;
+    --button-background: #393939;
+    --button-hover-background: #454545;
+    --button-active-background: #656565;
+    --button-active-hover-background: #707070;
+    --terminal-background: #353535;
+    --terminal-color: var(--text-color);
+    --line-color: #ffffff26; // Color for separating lines
+    --dark-blue: #5277C3; // Blue background
+    --light-blue: #7EBAE4; // Blue text
+
+    --result-item-show-more-background: var(--background-color);
+    --result-item-show-more-color: var(--text-color);
+    --search-sidebar-container-border-color: var(--line-color);
+    --search-sidebar-link-color: var(--text-color);
+    --search-sidebar-hovered-link-background: var(--hover-background);
+    --search-sidebar-selected-link-background: var(--dark-blue); // #0081c2;
+    --search-sidebar-selected-link-color: var(--text-color);
+    /* Divider between search results */
+    --search-result-divider-line-color: var(--line-color);
+    /* Gets overwritten by bootstrap; has no effect */
+    --search-result-title-color: var(--text-color); // #08c;
+    /* Text color for the details in a search result (like name, version, outputs...) */
+    --search-result-short-details-color: var(--text-color-light); // #666;
+    /* When search results are expanded, they show tabbed help for installing the result. This is the border color for that tabbed thing.
+       It is only half of the border, the other half is styled by bootstrap. */
+    --search-result-expanded-tab-border: var(--line-color);
+    /* Color of the animation above the `Loading` text that is shown when searching */
+    --loader-color: var(--text-color);
+    /* Background color of the experimental badge next to the flakes search */
+    --info-label-background: var(--dark-blue); // #007dbb;
+    /* Text color for links. Probably overwritten by bootstrap */
+    --link-color: var(--light-blue); // #007dbb;
+    /* Background color for the small badges with number in the sidebar */
+    --badge-background: var(--button-active-hover-background);
+
+    --color-hover-tab: var(--hover-background);
+    --color-active-tab: #393939;
+    --color-active-hover-tab: #404040;
+
+    /* Headerbar background color */
+    --headerbar-background-color: var(--background-color);
+    // --headerbar-background-color: #303030;
+  }
+
+  // Override bootstrap styles for some common things.
+  code {
+    background-color: var(--terminal-background);
+    color: var(--terminal-color);
+    border: none;
+    padding: 4px;
+  }
+
+  pre {
+    color: var(--text-color);
+  }
+
+  * {
+    transition: background 0.2s;
+  }
+
+  @mixin outline-visible() {
+    border-radius: 4px !important;
+    outline-color: var(--light-blue) !important;
+    outline-style: solid !important;
+    outline-width: 2px !important;
+    outline-offset: -2px !important;
+  }
+
+  *:focus {
+    outline-width: 0 !important;
+  }
+
+  *:focus-visible {
+    @include outline-visible;
+  }
+
+  a:focus-visible {
+    outline-offset: 0 !important;
+  }
+
+  .label-warning {
+    background: transparent;
+    color: var(--text-color-warning);
+    text-shadow: none;
+  }
+
+  button.btn.btn {
+    margin: 0;
+    border-left: none;
+    border-right: none;
+    background: var(--button-background);
+    box-shadow: none;
+    text-shadow: none;
+    border-bottom: none;
+    color: var(--text-color);
+    transition: background 0.2s;
+    font-weight: bold;
+
+    &.active {
+      background: var(--button-active-background);
+
+      &:hover {
+        background: var(--button-active-hover-background);
+      }
+    }
+
+    &:hover {
+      background: var(--button-hover-background)
+    }
+
+    &:disabled {
+      background: var(--button-background);
+      color: var(--text-color-light);
+    }
+  }
+
+  // Override bootstrap colors for the sort dropdown
+  .search-results {
+    .dropdown {
+      &.open {
+        background: var(--button-background);
+      }
+
+      button.btn:hover {
+        background: var(--hover-background);
+      }
+
+      .caret {
+        border-top-color: var(--text-color) !important;
+      }
+
+      background: var(--background-color);
+      transition: background 0.2s;
+      border-radius: 4px;
+
+      button.btn {
+        &:focus:not(:focus-visible) {
+          outline: none !important;
+        }
+
+        border-radius: 4px;
+        background: inherit;
+        color: var(--text-color);
+        border: none;
+        text-shadow: none;
+        box-shadow: none;
+        transition: background 0.2s;
+      }
+    }
+
+    ul.dropdown-menu {
+      background: var(--button-background);
+      padding: 0;
+      margin-top: 4px;
+
+      li {
+        border-radius: 4px;
+        border-top-right-radius: 4px;
+        border-top-left-radius: 4px;
+        margin: 4px;
+
+        a {
+          color: var(--text-color);
+          background: inherit;
+          transition: background 0.2s;
+        }
+
+        a::before {
+          content: none !important;
+        }
+
+        overflow: hidden;
+      }
+
+      .header,
+      .divider {
+        display: none;
+      }
+
+      li:hover {
+        a {
+          background: var(--hover-background);
+        }
+      }
+
+      li.selected {
+        background: var(--button-active-background);
+      }
+    }
+  }
+
+  // Override bootstrap styles for the search box
+  .search-input {
+    >div:first-child:first-child:first-child {
+      display: flex;
+      gap: 2rem;
+
+      div {
+        flex-grow: 1;
+      }
+
+      input {
+        background: var(--button-background);
+        box-shadow: none;
+        border: 1px solid transparent;
+        color: var(--text-color);
+
+        &::placeholder {
+          font-weight: bold;
+          opacity: 1;
+          color: var(--text-color-light);
+        }
+      }
+
+    }
+
+    .btn-group {
+      border: none;
+      border-radius: 4px;
+      background: inherit;
+
+      button+button {
+        border-left: 1px solid var(--line-color);
+      }
+    }
+  }
+
+  // Override bootstrap styles for the header bar
+  // Very navbar to boost specificity
+  .navbar.navbar.navbar.navbar.navbar.navbar {
+    &>.navbar-inner {
+      .brand img {
+        filter: brightness(0) invert(1);
+      }
+
+      background: var(--headerbar-background-color);
+      border-bottom: none;
+
+      li>a {
+        color: var(--text-color);
+        background: var(--headerbar-background-color);
+        transition: background 0.2s;
+        text-shadow: none;
+        box-shadow: none;
+        border-radius: 4px;
+        margin: 4px;
+        padding: 6px 12px;
+
+        &:hover,
+        &:focus,
+        &:focus-visible,
+        &:active,
+        &.active {
+          color: var(--text-color);
+        }
+
+        &:hover {
+          background: var(--color-hover-tab);
+        }
+      }
+
+      li.active>a {
+        background: var(--color-active-tab);
+
+        &:hover {
+          background: var(--color-active-hover-tab);
+        }
+
+      }
+    }
+  }
+
+  // Style the tabs in expanded package search results
+  .nav-tabs {
+    border-bottom: 1px solid var(--line-color);
+    border-radius: 4px;
+
+    li {
+      background: transparent !important;
+      border-color: none !important;
+
+      &:hover,
+      &:focus {
+        background: transparent !important;
+        border-color: none !important;
+      }
+
+      a {
+        // border: none;
+        background: transparent;
+        color: var(--text-color);
+      }
+
+      a:hover,
+      a:focus {
+        border-color: transparent;
+        background: transparent !important;
+        color: var(--text-color) !important;
+      }
+
+      &.active {
+
+        a,
+        a:hover,
+        a:focus {
+          border: 1px solid var(--line-color);
+          border-bottom-color: transparent;
+          background: var(--background-color) !important;
+          color: var(--text-color);
+        }
+      }
+    }
+  }
+}
+
 /* ------------------------------------------------------------------------- */
 /* -- Utils ---------------------------------------------------------------- */
 /* ------------------------------------------------------------------------- */
 
 @mixin terminal() {
-  background: #333;
+  background: var(--terminal-background);
-  color: #fff;
+  color: var(--terminal-color);
   margin: 0;
 }
 
-
 @mixin search-result-item() {
   .result-item-show-more-wrapper {
       text-align: center;
@@ -21,8 +379,8 @@
     text-align: center;
     text-decoration: none;
     line-height: 1.5em;
-    color: #666;
+    color: var(--result-item-show-more-color);
-    background: #FFF;
+    background: var(--result-item-show-more-background);
     padding: 0 1em;
     position: relative;
     top: 0.75em;
@@ -48,6 +406,8 @@
 /* ------------------------------------------------------------------------- */
 
 body {
+  background: var(--background-color);
+  color: var(--text-color);
   position: relative;
   min-height: 100vh;
   overflow-y: auto;
@@ -208,7 +568,7 @@ header .navbar.navbar-static-top {
 
       & > li {
         margin-bottom: 1em;
-        border: 1px solid #ccc;
+        border: 1px solid var(--search-sidebar-container-border-color);
         padding: 1em;
         border-radius: 4px;
 
@@ -228,14 +588,14 @@ header .navbar.navbar-static-top {
             & > a {
               display: grid;
               grid-template-columns: auto max-content;
-              color: #333;
+              color: var(--search-sidebar-link-color);
               padding: 0.5em 0.5em 0.5em 1em;
               text-decoration: none;
+              border-radius: 4px;
 
               &:hover {
                 text-decoration: none;
-                background: #eee;
+                background: var(--search-sidebar-hovered-link-background);
-                border-radius: 4px;
               }
 
               & > span:first-child {
@@ -247,9 +607,8 @@ header .navbar.navbar-static-top {
               }
 
               &.selected {
-                background: #0081c2;
+                background: var(--search-sidebar-selected-link-background);
-                color: #FFF;
+                color: var(--search-sidebar-selected-link-color);
-                border-radius: 4px;
                 position: relative;
                   & > span:last-child {
                   display: none;
@@ -339,7 +698,7 @@ header .navbar.navbar-static-top {
 
         // Result item
         & > li {
-          border-bottom: 1px solid #ccc;
+          border-bottom: 1px solid var(--search-result-divider-line-color);
           padding-bottom: 2em;
           margin-bottom: 2em;
 
@@ -352,11 +711,14 @@ header .navbar.navbar-static-top {
             background: inherit;
             border: 0;
             padding: 0;
-            color: #08c;
+            color: var(--search-result-title-color) !important;
             font-size: 1.5em;
             margin-bottom: 0.5em;
             text-align: left;
             display: block;
+            a {
+              color: inherit !important;
+            }
           }
 
           &.package {
@@ -371,7 +733,7 @@ header .navbar.navbar-static-top {
 
             // short details of a pacakge
             & > :nth-child(3) {
-              color: #666;
+              color: var(--search-result-short-details-color);
               list-style: none;
               text-align: left;
               margin: 0;
@@ -414,8 +776,9 @@ header .navbar.navbar-static-top {
 
                 div.tab-content {
                   padding: 1em;
-                  border: 1px solid #ddd;
+                  border: 1px solid var(--search-result-expanded-tab-border);
                   border-top: 0;
+                  border-radius: 4px 0 4px 4px;
                 }
 
                 pre {
@@ -424,9 +787,9 @@ header .navbar.navbar-static-top {
 
               }
 
-              // programs
+              // // programs
-              & > :nth-child(3) {
+              // & > :nth-child(3) {
-              }
+              // }
 
               // maintainers and platforms
               & > :nth-child(4) {
@@ -461,6 +824,7 @@ header .navbar.navbar-static-top {
               & > div:nth-child(2n) {
                 pre {
                   background: transparent;
+                  color: var(--text-color);
                   margin: 0;
                   padding: 0;
                   border: 0;
@@ -469,8 +833,7 @@ header .navbar.navbar-static-top {
                 }
 
                 pre code {
-                  background: #333;
+                  @include terminal;
-                  color: #fff;
                   padding: 0.5em
                 }
               }
@@ -513,7 +876,7 @@ header .navbar.navbar-static-top {
   height: 4em;
 }
 .loader {
-  color: #000000;
+  color: var(--loader-color);
   text-indent: -9999em;
   margin: 88px auto;
   position: relative;
@@ -555,11 +918,11 @@ header .navbar.navbar-static-top {
 /* -- Accessibility overrides ---------------------------------------------- */
 /* ------------------------------------------------------------------------- */
 .label-info {
-  background: #007dbb;
+  background: var(--info-label-background);
 }
 
 a {
-  color: #007dbb;
+  color: var(--link-color);
 }
 
 .pager {
@@ -572,5 +935,5 @@ a {
 }
 
 .badge {
-  background-color: #757575
+  background-color: var(--badge-background)
 }