mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-07-01 19:30:45 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1977 from viviicat/dark-theme

Browse source 
Dark theme
This commit is contained in:
Mouse Reeve 2022-03-01 11:00:05 -08:00 committed by GitHub
parent 9422a07414 8e9bacc527
commit 4cdbdd8d0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bookwyrm/static/css/bookwyrm/_all.scss
View file

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

2
bookwyrm/static/css/bookwyrm/components/_details.scss
View file

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

2
bookwyrm/static/css/bookwyrm/components/_toggle.scss
View file

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

55
bookwyrm/static/css/themes/bookwyrm-dark.scss
View file

@ -1,24 +1,32 @@
@import "../vendor/bulma/sass/utilities/derived-variables.sass"; @import "../vendor/bulma/sass/utilities/initial-variables.sass";
/* Colors /* Colors
******************************************************************************/ ******************************************************************************/
/* states */ /* states */
$primary: #016a5b; $primary: #005e50;
$primary-light: #1d2b28;
$info: #1f4666; $info: #1f4666;
$success: #246447; $success: #246447;
$warning: #8b6c15; $warning: #8b6c15;
$danger: #872538; $danger: #872538;
$danger-light: #481922;
$light: #393939;
$red: #ffa1b4;
/* book cover standins */ /* book cover standins */
$no-cover-color: #002549; $no-cover-color: #002549;
/* background colors */ /* background colors */
$scheme-main: $grey-darker; $scheme-main: rgb(24, 27, 28);
$scheme-main-bis: $black-ter; $scheme-invert: #fff;
$background-body: $grey-darker; $scheme-main-bis: rgb(28, 30, 32);
$background-secondary: $grey-dark; $scheme-main-ter: rgb(32, 34, 36);
$background-tertiary: #555; $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 */ /* highlight colors */
$primary-highlight: $primary; $primary-highlight: $primary;
@ -26,10 +34,9 @@ $info-highlight: $info;
$success-highlight: $success; $success-highlight: $success;
/* borders */ /* borders */
$border: $grey; $border: #2b3031;
$border-hover: $grey-light; $border-light: #444;
$border-light: $grey; $border-hover: #51595d;
$border-light-hover: $grey-light;
/* text */ /* text */
$text: $grey-lightest; $text: $grey-lightest;
@ -37,22 +44,42 @@ $text-light: $grey-lighter;
$text-strong: $white-ter; $text-strong: $white-ter;
/* links */ /* links */
$link: $white; $link: #2e7eb9;
$link-background: $background-tertiary; $link-background: $background-tertiary;
$link-hover: $white-bis; $link-hover: $white-bis;
$link-hover-border: #51595d;
$link-focus: $white-bis; $link-focus: $white-bis;
$link-active: $white-bis; $link-active: $white-bis;
/* misc */
/* bulma overrides */ /* bulma overrides */
$background: $background-secondary; $background: $background-secondary;
$menu-item-active-background-color: $link-background; $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 /* Fonts
******************************************************************************/ ******************************************************************************/
$family-primary: $family-sans-serif; $family-primary: $family-sans-serif;
$family-secondary: $family-sans-serif; $family-secondary: $family-sans-serif;
@import "../bookwyrm.scss"; @import "../bookwyrm.scss";
@import "../vendor/icons.css"; @import "../vendor/icons.css";

3
bookwyrm/static/css/themes/bookwyrm-light.scss
View file

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