Browse Source

add nice and soothing fade transition when dark/light mode is toggled

pull/574/head
Jake Jarvis 4 weeks ago
parent
commit
7353f0b95e
Signed by: jake GPG Key ID: 2B0C9CF251E69A39
  1. 19
      assets/js/src/dark-mode.js
  2. 5
      assets/sass/abstracts/_settings.scss
  3. 33
      assets/sass/abstracts/_themes.scss
  4. 3
      assets/sass/components/_global.scss
  5. 5
      assets/sass/components/_header.scss
  6. 2
      package.json
  7. 4
      webpack.config.js
  8. 6
      yarn.lock

19
assets/js/src/dark-mode.js

@ -1,9 +1,24 @@
import { init } from "dark-mode-switcheroo";
import { init as darkModeInit } from "dark-mode-switcheroo";
init({
// HACK: disable theme transition until user's preference is auto-restored (1/2)
const disableTransitionCSSHack = document.createElement("style");
disableTransitionCSSHack.innerHTML = `
*,
::before,
::after {
transition-property: none !important;
}`;
document.head.appendChild(disableTransitionCSSHack);
darkModeInit({
toggle: document.querySelector(".dark-mode-toggle"),
onInit: function (t) {
// make toggle visible now that we know JS is enabled
t.style.display = "block";
// HACK: re-enable theme transitions after a very short delay, otherwise there's a weird race condition (2/2)
setTimeout(() => {
document.head.removeChild(disableTransitionCSSHack);
}, 250);
},
});

5
assets/sass/abstracts/_settings.scss

@ -27,3 +27,8 @@ $responsive-width: 800px;
$link-underline-opacity: 40%;
$link-underline-size: 2px;
$link-opacity-color: #ffffff;
// Elements to fade on dark/light theme toggle:
$theme-transition-elements: ("color", "background-color", "border-color");
$theme-transition-duration: 0.15s;
$theme-transition-function: linear;

33
assets/sass/abstracts/_themes.scss

@ -1,14 +1,41 @@
@use "sass:map";
@use "sass:string";
@use "sass:list";
@use "../abstracts/functions" as *;
@use "settings";
@use "functions" as *;
// Takes a single CSS property and theme key (see abstracts/_themes) and sets
// both body.light and body.dark selectors.
@mixin themed($property, $key) {
// hack to allow root (body) theming
@mixin themed($property, $key, $moreTransitions: "") {
// allow root element (body) theming
$selectors: str-split("#{&}");
// fade colors on theme toggle
$transitions: ();
@each $element in settings.$theme-transition-elements {
$transitions: list.append(
$transitions,
string.unquote(
"#{$element} #{settings.$theme-transition-duration} #{settings.$theme-transition-function}"
)
);
}
@if $moreTransitions != "" {
// HACK: $moreTransitions is passed in and appended here because joining multiple transitions is hard :(
$transitions: list.append($transitions, string.unquote($moreTransitions));
}
@each $selector in $selectors {
@if $selector == "" {
// support root body element
$selector: "body";
}
@at-root #{$selector} {
transition: list.join($transitions, (), $separator: comma);
}
}
// set the actual light/dark properties
@each $theme, $map in $themes {
@each $selector in $selectors {
@at-root body.#{$theme} #{$selector} {

3
assets/sass/components/_global.scss

@ -77,9 +77,8 @@ a {
background-repeat: no-repeat;
background-size: 0% settings.$link-underline-size;
padding-bottom: settings.$link-underline-size;
transition: background-size 0.25s ease-in-out;
@include themes.themed(color, "links");
@include themes.themed(color, "links", ("background-size 0.25s ease-in-out"));
// cool link underlines (via messy SCSS hacking):
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/

5
assets/sass/components/_header.scss

@ -62,15 +62,14 @@ header {
a {
display: inline-block;
transition: transform 0.15s ease-in-out;
will-change: transform;
@include themes.themed(color, "medium-dark");
@include themes.themed(color, "medium-dark", ("transform 0.15s ease-in-out"));
&:hover {
transform: scale(1.1);
@include themes.themed(color, "links");
@include themes.themed(color, "links", ("transform 0.15s ease-in-out"));
}
span.icon {

2
package.json

@ -96,8 +96,10 @@
"postcss-cli": "^8.3.1",
"postcss-color-rgba-fallback": "^4.0.0",
"postcss-combine-duplicated-selectors": "^10.0.3",
"postcss-discard-duplicates": "^5.0.1",
"postcss-focus": "^5.0.1",
"postcss-loader": "^6.1.1",
"postcss-merge-rules": "^5.0.2",
"postcss-normalize-charset": "^5.0.1",
"postcss-reporter": "^7.0.2",
"postcss-svgo": "^5.0.2",

4
webpack.config.js

@ -12,6 +12,8 @@ import autoprefixer from "autoprefixer";
import postcssSvgo from "postcss-svgo";
import postcssFocus from "postcss-focus";
import postcssColorRgbaFallback from "postcss-color-rgba-fallback";
import postcssMergeRules from "postcss-merge-rules";
import postcssDiscardDuplicates from "postcss-discard-duplicates";
import postcssCombineDuplicatedSelectors from "postcss-combine-duplicated-selectors";
import postcssNormalizeCharset from "postcss-normalize-charset";
@ -144,6 +146,8 @@ export default {
],
}),
postcssCombineDuplicatedSelectors(),
postcssMergeRules(),
postcssDiscardDuplicates(),
postcssNormalizeCharset(),
],
},

6
yarn.lock

@ -7298,9 +7298,9 @@ node-fetch@2.6.1:
integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
node-fetch@^2.6.1:
version "2.6.4"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.4.tgz#7f1d13b8f9ff0c1a994dc6f73c69f7d652c7ace2"
integrity sha512-aD1fO+xtLiSCc9vuD+sYMxpIuQyhHscGSkBEo2o5LTV/3bTEAYvdUii29n8LlO5uLCmWdGP7uVUVXFo5SRdkLA==
version "2.6.5"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd"
integrity sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==
dependencies:
whatwg-url "^5.0.0"

Loading…
Cancel
Save