Merge pull request #1977 from viviicat/dark-theme

Dark theme

bookwyrm/static/css/bookwyrm/_all.scss

@@ -115,7 +115,7 @@ button .button-invisible-overlay {
     align-items: center;
     flex-direction: column;
     justify-content: center;
-    background: rgba($scheme-invert, 0.66);
+    background: $invisible-overlay-background-color;
     color: white;
     opacity: 0;
     transition: opacity 0.2s ease;

bookwyrm/static/css/bookwyrm/components/_details.scss

@@ -53,7 +53,7 @@ details.dropdown .dropdown-menu a:focus-visible {
 
 @media only screen and (max-width: 768px) {
     details.dropdown[open] summary.dropdown-trigger::before {
-        background-color: rgba($scheme-invert, 0.5);
+        background-color: $modal-background-background-color;
         z-index: 30;
     }
 

bookwyrm/static/css/bookwyrm/components/_toggle.scss

@@ -3,7 +3,7 @@
 
 .toggle-button[aria-pressed="true"],
 .toggle-button[aria-pressed="true"]:hover {
-    background-color: hsl(171deg, 100%, 41%);
+    background-color: $primary;
     color: white;
 }
 

bookwyrm/static/css/themes/bookwyrm-dark.scss

@@ -1,24 +1,32 @@
-@import "../vendor/bulma/sass/utilities/derived-variables.sass";
+@import "../vendor/bulma/sass/utilities/initial-variables.sass";
+
 
 /* Colors
  ******************************************************************************/
 
 /* states */
-$primary: #016a5b;
+$primary: #005e50;
+$primary-light: #1d2b28;
 $info: #1f4666;
 $success: #246447;
 $warning: #8b6c15;
 $danger: #872538;
+$danger-light: #481922;
+$light: #393939;
+$red: #ffa1b4;
 
 /* book cover standins */
 $no-cover-color: #002549;
 
 /* background colors */
-$scheme-main: $grey-darker;
-$scheme-main-bis: $black-ter;
-$background-body: $grey-darker;
-$background-secondary: $grey-dark;
-$background-tertiary: #555;
+$scheme-main: rgb(24, 27, 28);
+$scheme-invert: #fff;
+$scheme-main-bis: rgb(28, 30, 32);
+$scheme-main-ter: rgb(32, 34, 36);
+$background-body: rgb(24, 27, 28);
+$background-secondary: rgb(28, 30, 32);
+$background-tertiary: rgb(32, 34, 36);
+$modal-background-background-color: rgba($black, 0.8);
 
 /* highlight colors */
 $primary-highlight: $primary;
@@ -26,10 +34,9 @@ $info-highlight: $info;
 $success-highlight: $success;
 
 /* borders */
-$border: $grey;
-$border-hover: $grey-light;
-$border-light: $grey;
-$border-light-hover: $grey-light;
+$border: #2b3031;
+$border-light: #444;
+$border-hover: #51595d;
 
 /* text */
 $text: $grey-lightest;
@@ -37,22 +44,42 @@ $text-light: $grey-lighter;
 $text-strong: $white-ter;
 
 /* links */
-$link: $white;
+$link: #2e7eb9;
 $link-background: $background-tertiary;
 $link-hover: $white-bis;
+$link-hover-border: #51595d;
 $link-focus: $white-bis;
 $link-active: $white-bis;
 
-/* misc */
-
 /* bulma overrides */
 $background: $background-secondary;
 $menu-item-active-background-color: $link-background;
+$navbar-dropdown-item-hover-color: $white;
+
+/* These element's colors are hardcoded, probably a bug in bulma? */
+@media screen and (min-width: 769px) {
+    .navbar-dropdown {
+        box-shadow: 0 8px 8px rgba($black, 0.2) !important;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .navbar-menu {
+        box-shadow: 0 8px 8px rgba($black, 0.2) !important;
+    }
+}
+
+/* misc */
+$shadow: 0 0.5em 1em -0.125em rgba($black, 0.2), 0 0px 0 1px rgba($black, 0.02);
+$card-header-shadow: 0 0.125em 0.25em rgba($black, 0.1);
+$invisible-overlay-background-color: rgba($black, 0.66);
+$progress-value-background-color: $border-light;
 
 /* Fonts
  ******************************************************************************/
 $family-primary: $family-sans-serif;
 $family-secondary: $family-sans-serif;
 
+
 @import "../bookwyrm.scss";
 @import "../vendor/icons.css";

bookwyrm/static/css/themes/bookwyrm-light.scss

@@ -47,6 +47,9 @@ $link-active: $grey-darker;
 $background: $background-secondary;
 $menu-item-active-background-color: $link-background;
 
+/* misc */
+$invisible-overlay-background-color: rgba($scheme-invert, 0.66);
+
 /* Fonts
  ******************************************************************************/
 $family-primary: $family-sans-serif;