github.com/GenderDysphoria.fyi
1
0
Fork 1
mirror of https://github.com/GenderDysphoria/GenderDysphoria.fyi.git synced 2025-11-25 12:32:42 +00:00
Code 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

3
README.md
View File

@@ -62,3 +62,6 @@ The file is in this format:
Publishing the site content requires AWS credentials which are not stored in this repository. Attempts to use the `gulp publish` command will fail.
## Attributions
Sun/moon svg icons forked from [glow-ui/glow-icons](https://github.com/glow-ui/glow-icons). Licensed under the [MIT license](https://github.com/glow-ui/glow-icons/blob/main/LICENSE).

25
js/_dark.js Normal file
View File

@@ -0,0 +1,25 @@
(function () {
// Check if local storage is available and if dark mode is set; overrides everything else
if (window.localStorage && window.localStorage.getItem('dark-mode') !== null) {
if (window.localStorage.getItem('dark-mode') === 'true') {
document.documentElement.classList.add('dark-mode');
}
// Evaluate device preferences
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark-mode');
}
}());
$(function () {
$('.dark-toggle').on('click', function toggleDarkMode (e) {
e.preventDefault();
if (document.documentElement.classList.contains('dark-mode')) {
document.documentElement.classList.remove('dark-mode');
window.localStorage.setItem('dark-mode', 'false');
} else {
document.documentElement.classList.add('dark-mode');
window.localStorage.setItem('dark-mode', 'true');
}
});
});

26
scss/_card.scss
View File

@@ -3,12 +3,30 @@
text-decoration: none;
background: white;
@include dark-mode {
background: $content-bg-dark;
border: 1px solid $primary;
box-shadow: 0 0 5px 2px rgba($primary, 0.5);
.card-header {
background: lighten($content-bg-dark, 5);
}
}
&.borderless {
border: none;
@include dark-mode {
box-shadow: none;
}
}
.card-img, .card-img-top {
// width: unset;
@include dark-mode {
// Some card images don't work on dark backgrounds
background-color: white;
}
}
.card-img-top + .card-img-top {
@@ -23,6 +41,10 @@
font-size: 12px;
font-family: $font-secondary;
@include dark-mode {
color: $body-color-dark;
}
ul { padding-left: 1.2em; }
}
@@ -70,6 +92,10 @@
font-family: Roboto, Helvetica, Arial,sans-serif;
text-decoration:none;
@include dark-mode {
background: $content-bg-dark;
color: $body-color-dark;
}
.ig-header {
display: flex;

17
scss/_dark.scss Normal file
View File

@@ -0,0 +1,17 @@
$disable-dark-mode: false !default;
@mixin dark-mode {
@if not $disable-dark-mode {
.dark-mode & {
@content
}
}
}
@mixin light-mode {
@if not $disable-dark-mode {
:root:not(.dark-mode) & {
@content
}
}
}

13
scss/_dropdown.scss Normal file
View File

@@ -0,0 +1,13 @@
.dropdown-menu {
@include dark-mode {
background-color: #2d2d2d;
.dropdown-item, .dropdown-item:hover:active:not(.active) {
color: white;
}
.dropdown-item:hover:not(:active) {
color: black;
}
}
}

17
scss/_global.scss
View File

@@ -1,6 +1,19 @@
a {
@include dark-mode {
color: lighten($primary, 10%);
&:hover {
color: lighten($primary, 20%);
}
}
}
body {
font-family: $font-primary;
@include dark-mode {
color: $body-color-dark;
}
}
// Prevents the page header from blocking view of
@@ -16,6 +29,10 @@ body {
}
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
background-color: yellow !important;
@include dark-mode {
color: black;
}
}
span.svg-icon {

108
scss/_header.scss
View File

@@ -10,6 +10,10 @@
text-decoration: none;
}
}
@include dark-mode {
color: $body-color-dark;
}
}
body.inner-page header {
@@ -63,6 +67,12 @@ header {
@media (max-width: 500px) {
font-size: 1.8em;
}
@include dark-mode {
abbr {
color: $primary;
}
}
}
&.active {
@@ -72,13 +82,16 @@ header {
.top-brand {
max-height: 0;
}
.top-nav.aux-nav {
display: none;
}
}
}
nav {
flex: 1;
max-width: 1200px;
display: flex;
justify-content: space-between;
@@ -92,6 +105,36 @@ header {
@media (max-width: 500px) {
font-size: 0.8rem;
}
@include dark-mode {
a {
color: inherit;
&:hover {
color: inherit;
text-decoration: none;
}
}
}
}
.top-nav {
&.main-nav {
margin-left: auto;
order: 2;
@media (max-width: 800px) {
margin-left: 0;
}
}
&.aux-nav {
order: 3;
@media (max-width: 800px) {
order: 1;
}
}
}
.top-nav-inner {
@@ -99,13 +142,9 @@ header {
justify-content: space-between;
align-items: center;
list-style: none;
margin: 0 0 0 1em;
margin: 0;
padding: 0;
@media (max-width: 800px) {
margin: 0;
}
.top-nav-item {
transition-property: color, padding, margin;
@@ -144,38 +183,49 @@ header {
}
}
@media (max-width: 400px) {
.disposable {
display: none;
}
}
.dropdown-menu {
max-height: 90vh;
overflow: auto;
}
}
@media (max-width: 500px) {
.dark-toggle {
display: grid;
.top-nav-inner .disposable {
transition: max-width 0.5s ease-out;
max-width: 50px;
}
> span {
grid-column: 1;
grid-row: 1;
transition: all 0.5s;
transition-behavior: allow-discrete;
}
&.active .top-nav-inner .disposable {
max-width: 0;
overflow: hidden;
.dark-toggle-sun {
opacity: 1;
}
.dark-toggle-moon {
opacity: 0;
}
@include dark-mode {
.dark-toggle-sun {
opacity: 0;
}
.dark-toggle-moon {
opacity: 1;
}
}
}
}
}
// @media (min-width: 500px) {
body:not(.front-page) header + * {
margin-top: $header-full-height;
body:not(.front-page) header + * {
margin-top: $header-mobile-height;
@media (min-width: 800px) {
margin-top: $header-desktop-height;
}
// }
}
.disclaimer {
$cwColor: darken($gray-100, 2%);
@@ -193,6 +243,12 @@ header {
background-color: $cwColor;
@include dark-mode {
background-color: $gray-800;
color: white;
border-bottom: 1px solid $primary;
}
font-size: 0.8rem;
font-weight: 300;

41
scss/_index.scss
View File

@@ -1,11 +1,25 @@
.front-page {
@include dark-mode {
background-color: #000;
}
header.active {
@include dark-mode {
background-color: $gray-900;
}
}
.top-fold {
min-height: 100vh;
background-color: $header-bg-mid;
background-image: linear-gradient(135deg, $header-bg-1, $header-bg-2);
padding-top: $header-full-height;
padding-top: 150px;
@include dark-mode {
background-color: inherit;
background-image: none;
}
@media (max-width: 400px) {
padding-top: 100px;
@@ -33,6 +47,13 @@
text-shadow: 0px 1px 3px rgba(black, 0.9);
color: $gray-100;
@include dark-mode {
background: darken($trans-blue-darkest, 10%);
border: 1px solid #0087bb;
box-shadow: 0 0 5px 2px rgba($trans-blue, .5);
color: $body-color-dark;
}
max-width: 500px;
width: 50vw;
font-family: $font-secondary;
@@ -60,6 +81,17 @@
box-shadow: inset 0px 1px 5px rgba(#000, 0.2), 0px 1px 5px rgba(#000, 0.9);
text-shadow: 0px 1px 3px rgba(#fff, 0.6);
@include dark-mode {
background-color: $content-bg-dark;
box-shadow: 0 0 1pc 6px $primary;
color: $body-color-dark;
text-shadow: none;
@media (max-width: 800px) {
box-shadow: none;
}
}
max-width: 850px;
margin-left: 0.5em;
}
@@ -83,6 +115,13 @@
}
}
@media (max-width: 500px) {
.copy {
margin-left: 0;
margin-right: 0;
}
}
}
.pager {

27
scss/_markup.scss
View File

@@ -1,16 +1,19 @@
.markup {
-webkit-font-smoothing: antialiased;
transition: background-color 0.5s;
p a {
transition-property: color, padding, margin;
transition-duration: 0.3s;
transition-timing-function: ease;
color: $primary;
text-decoration: underline;
&:hover {
color: #e84992;
@include light-mode {
color: $primary;
&:hover {
color: #e84992;
}
}
}
@@ -34,6 +37,13 @@
padding: 15px;
color: black;
@include dark-mode {
background: darken($trans-blue-darkest, 10%);
border: 1px solid #0087bb;
color: $body-color-dark;
box-shadow: 0 0 5px 2px rgba($trans-blue,0.5);
}
color-adjust: exact;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
@@ -87,6 +97,12 @@
img {
height: 1em;
}
@include dark-mode {
// Convert the black svg icon to the $primary color at runtime using CSS filters
// https://stackoverflow.com/a/43960991
filter: invert(34%) sepia(87%) saturate(2698%) hue-rotate(313deg) brightness(108%) contrast(98%);
}
}
+ {
@@ -152,6 +168,11 @@
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
@include dark-mode {
background-color: lighten($content-bg-dark, 5%);
color: #fff;
}
font-size: 0.8rem;
font-weight: 300;

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 {

6
scss/_pager.scss
View File

@@ -33,6 +33,12 @@
overflow: hidden;
text-overflow: ellipsis;
}
@include dark-mode {
&:hover {
color: white;
}
}
}
.btn.left {

43
scss/_tweet.scss
View File

@@ -8,6 +8,10 @@
$borderRadius: .35em;
$avatarSize: 36px;
$borderColorDark: $trans-blue-dark;
$textLightDark: #697882;
$textDarkDark: #b4d0dd;
font-size: 12px;
body.post & {
font-size: 15px;
@@ -22,6 +26,15 @@
overflow-x: hidden;
overflow-y: auto;
@include dark-mode {
background-color: $content-bg-dark;
border-color: $borderColorDark;
&:not(.grid-row) {
box-shadow: 0 0 5px 2px rgba($trans-blue, 0.5);
}
}
page-break-inside: avoid;
@include media-breakpoint-up(md) {
@@ -47,6 +60,10 @@
border-top: 1px solid $borderColor;
border-top-left-radius: 0;
border-top-right-radius: 0;
@include dark-mode {
border-top: 1px solid $borderColorDark;
}
}
.tweet-item:first-child .tweet-logo { display: block; }
@@ -69,6 +86,10 @@
margin-bottom: 1em;
line-height: 1;
@include dark-mode {
color: $textDarkDark;
}
&:hover {
color: $textHover;
}
@@ -348,6 +369,10 @@
.tweet-item {
border-top: none;
padding: 0;
@include dark-mode {
border-top: none;
}
}
.tweet-item + .tweet-item {
@@ -383,6 +408,13 @@
border: none;
max-height: unset;
@include dark-mode {
// Box shadow hackery
margin-left: -1em;
margin-right: -1em;
padding: 1em;
}
.tweet-item {
background-color: white;
border: 1px solid $borderColor;
@@ -391,6 +423,12 @@
border-top-left-radius: $borderRadius;
border-top-right-radius: $borderRadius;
@include dark-mode {
background-color: $content-bg-dark;
border: 1px solid $borderColorDark;
box-shadow: 0 0 5px 2px rgba($trans-blue, 0.5);
}
.tweet-logo { display: block; }
.tweet-text {
@@ -416,6 +454,11 @@
flex-direction: column;
margin: -1px;
@include dark-mode {
background-color: $content-bg-dark;
}
.tweet-logo { display: block; }
.tweet-text {

3
scss/print.scss
View File

@@ -11,6 +11,8 @@ $font-brand: 'Sriracha', Geneva, monospace;
$font-family-sans-serif: $font-primary;
$font-family-base: $font-primary;
$disable-dark-mode: true;
$grid-breakpoints: (
xs: 0,
sm: 500px,
@@ -94,6 +96,7 @@ $header-full-height: 100px;
@import "bootstrap/scss/utilities";
// @import "bootstrap/scss/print";
@import "./dark"; // Need to disable for print styles
@import "./global";
// @import "./header";
@import "./footer";

17
scss/style.scss
View File

@@ -52,7 +52,18 @@ $primary: #fc0a7e;
$header-bg-1: #E81179;
$header-bg-2: #281362;
$header-bg-mid: mix($header-bg-1, $header-bg-2);
$header-full-height: 100px;
$header-desktop-height: 100px;
$header-mobile-height: 142px;
/* -- Dark Mode -- */
$body-bg-dark: black;
$body-color-dark: #e2e2e2;
$content-bg-dark: #222;
$gutter-bg-dark: #171717;
$gutter-border-dark: #fc0a7e;
$primary-light-dark: lighten($primary, 10%);
$primary-lighter-dark: lighten($primary, 10%);
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@@ -94,8 +105,10 @@ $header-full-height: 100px;
@import "bootstrap/scss/utilities";
// @import "bootstrap/scss/print";
@import "./dark";
@import "./global";
@import "./header";
@import "./dropdown";
@import "./footer";
@import "./tweet";
@import "./index";
@@ -108,4 +121,4 @@ $header-full-height: 100px;
@import "./longform";
@import "./font-compatibility";
|node_modules/magnific-popup/dist/magnific-popup.css|
//|node_modules/magnific-popup/dist/magnific-popup.css|

4
svg/moon.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M12.0557 3.59974C12.2752 3.2813 12.2913 2.86484 12.0972 2.53033C11.9031 2.19582 11.5335 2.00324 11.1481 2.03579C6.02351 2.46868 2 6.76392 2 12C2 17.5228 6.47715 22 12 22C17.236 22 21.5313 17.9764 21.9642 12.8518C21.9967 12.4664 21.8041 12.0968 21.4696 11.9027C21.1351 11.7086 20.7187 11.7248 20.4002 11.9443C19.4341 12.6102 18.2641 13 17 13C13.6863 13 11 10.3137 11 6.99996C11 5.73589 11.3898 4.56587 12.0557 3.59974Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 602 B

12
svg/sun.svg Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.75 5.5C11.1977 5.5 10.75 5.05228 10.75 4.5V2C10.75 1.44772 11.1977 1 11.75 1H12.25C12.8023 1 13.25 1.44772 13.25 2V4.5C13.25 5.05228 12.8023 5.5 12.25 5.5H11.75Z"/>
<path fill="currentColor" d="M16.4194 7.22698C16.0289 6.83646 16.0289 6.20329 16.4194 5.81277L18.1872 4.045C18.5777 3.65447 19.2109 3.65447 19.6014 4.045L19.9549 4.39855C20.3455 4.78908 20.3455 5.42224 19.9549 5.81277L18.1872 7.58053C17.7967 7.97106 17.1635 7.97106 16.773 7.58053L16.4194 7.22698Z"/>
<path fill="currentColor" d="M18.5 11.75C18.5 11.1977 18.9477 10.75 19.5 10.75H22C22.5523 10.75 23 11.1977 23 11.75V12.25C23 12.8023 22.5523 13.25 22 13.25H19.5C18.9477 13.25 18.5 12.8023 18.5 12.25V11.75Z"/>
<path fill="currentColor" d="M16.7728 16.4194C17.1633 16.0289 17.7965 16.0289 18.187 16.4194L19.9548 18.1872C20.3453 18.5777 20.3453 19.2109 19.9548 19.6014L19.6012 19.9549C19.2107 20.3455 18.5775 20.3455 18.187 19.9549L16.4192 18.1872C16.0287 17.7967 16.0287 17.1635 16.4192 16.773L16.7728 16.4194Z"/>
<path fill="currentColor" d="M12.25 18.5C12.8023 18.5 13.25 18.9477 13.25 19.5V22C13.25 22.5523 12.8023 23 12.25 23H11.75C11.1977 23 10.75 22.5523 10.75 22V19.5C10.75 18.9477 11.1977 18.5 11.75 18.5H12.25Z"/>
<path fill="currentColor" d="M7.58059 16.773C7.97111 17.1635 7.97111 17.7967 7.58059 18.1872L5.81282 19.955C5.4223 20.3455 4.78913 20.3455 4.39861 19.955L4.04505 19.6014C3.65453 19.2109 3.65453 18.5778 4.04505 18.1872L5.81282 16.4195C6.20334 16.0289 6.83651 16.0289 7.22703 16.4195L7.58059 16.773Z"/>
<path fill="currentColor" d="M5.5 12.25C5.5 12.8023 5.05228 13.25 4.5 13.25H2C1.44772 13.25 1 12.8023 1 12.25V11.75C1 11.1977 1.44772 10.75 2 10.75H4.5C5.05228 10.75 5.5 11.1977 5.5 11.75V12.25Z"/>
<path fill="currentColor" d="M7.22722 7.58059C6.8367 7.97111 6.20353 7.97111 5.81301 7.58059L4.04524 5.81282C3.65472 5.4223 3.65472 4.78913 4.04524 4.39861L4.3988 4.04505C4.78932 3.65453 5.42248 3.65453 5.81301 4.04505L7.58078 5.81282C7.9713 6.20334 7.9713 6.83651 7.58078 7.22703L7.22722 7.58059Z"/>
<path fill="currentColor" d="M7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

19
templates/layout.hbs
View File

@@ -61,7 +61,7 @@
<nav>
<a href="/{{page.lang}}" class="top-brand">{{{lang 'HEADER_TITLE'}}}</a>
<div class="top-nav">
<div class="top-nav main-nav">
<ul class="top-nav-inner">
<li>{{import (join [ '/public/' page.lang '/_menu' ] "")}}</li>
<li>
@@ -69,9 +69,20 @@
{{import "~/language-menu"}}
</li>
<li><a href="/tweets/" class="top-nav-item" title="{{{lang 'TRANS_TWITTER_TOPICS'}}}"><img src="/images/transtwitter.png" width="24" height="24" alt=""></a></li>
<li class="disposable"><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi" class="top-nav-item">{{icon 'brands/github'}}</a></li>
<li class="disposable"><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
<li class="disposable"><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
</ul>
</div>
<div class="top-nav aux-nav">
<ul class="top-nav-inner">
<li><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi" class="top-nav-item">{{icon 'brands/github'}}</a></li>
<li><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
<li><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
<li>
<a href="#" class="top-nav-item dark-toggle" title="Dark Mode">
<span class="svg-icon dark-toggle-sun">{{icon 'sun'}}</span>
<span class="svg-icon dark-toggle-moon">{{icon 'moon'}}</span>
</a>
</li>
</ul>
</div>
</nav>