freyjagp/gdb.lgbtqi.app
1
0
Fork 0
forked from github.com/GenderDysphoria.fyi
Code Actions Packages Releases Activity

Dark Mode (#168)

Browse Source 
* Implement toggle button

* Dark mode mixins

* Dark mode color design

* Disable dark mode for prints

* Initial dark mode design

* Fix light mode mixin

* Disable dark mode on print style

* Move dark mode color scheme below the default style to allow referencing

* Fix dropdown

* Fix device-based dark mode

* Dark mode index page design

* Responsive auxiliary nav with dark mode toggle

* Remove box shadow when on smaller displays

* Prevent default on toggle click

* Move attribution/licensing to README.md

* Fix header padding on index page

* Background color transition animation

* Remove margin on index when on mobile displays

* Remove neon border when on mobile

* Fix post-header margin on mobile

* Lighten card headers in dark mode
This commit is contained in:
Dex
2025-06-08 19:26:27 -07:00
committed by GitHub
parent 0936e3718c
commit 26aba42e2f
17 changed files with 372 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
scss/_page.scss
View File

@@ -7,6 +7,10 @@ body.page, body.post {
header {
background: $gray-800;
&.active { background: white; }
@include dark-mode {
background: $gray-900;
}
}
}
@@ -27,15 +31,32 @@ body.post {
}
body.gdb {
transition: background-color 0.5s;
@include dark-mode {
background-color: $body-bg-dark;
}
#body {
background-color: $gutter-bg;
border-bottom: 1px solid $gutter-border;
@include dark-mode {
background-color: $gutter-bg-dark;
border-bottom: 1px solid $gutter-border-dark;
color: $body-color-dark;
box-shadow: 0px 6px 11px -6px $gutter-border-dark;
}
@media (max-width: 500px) {
border-left: 1px solid $gutter-border;
border-right: 1px solid $gutter-border;
@include dark-mode {
border-left: 0;
border-right: 0;
}
}
border-bottom: 1px solid $gutter-border;
max-width: 1200px;
margin-left: auto;
@@ -54,6 +75,11 @@ body.gdb {
background: $content-bg;
border-right: 1px solid $gutter-border;
@include dark-mode {
background: $content-bg-dark;
border-right: none;
}
padding: 1em 1em;
> h1:first-child {