From f783e6f2af0128fa86ee924843714045dcd6b2e5 Mon Sep 17 00:00:00 2001 From: krymtkts Date: Fri, 22 Mar 2024 13:52:33 +0900 Subject: [PATCH 1/8] Bump Bulma to 1.0.0. --- package-lock.json | 49 +++++++++++++++++++++++++---------------------- package.json | 2 +- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 72fbba3..b0687cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "yaml": "^2.4.1" }, "devDependencies": { - "bulma": "^0.9.4", + "bulma": "^1.0.0", "sass": "^1.72.0", "ts2fable": "^0.7.1" } @@ -36,12 +36,15 @@ } }, "node_modules/binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", "dev": true, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/braces": { @@ -57,22 +60,19 @@ } }, "node_modules/bulma": { - "version": "0.9.4", - "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", - "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==", - "dev": true + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.0.tgz", + "integrity": "sha512-7n49v/gdHXaHcU9fVobqGXO2OguiCoMh6CLbeX7jq00XrZ5vOSE4LNS0S/0Q6rlBbckY6kk6W7LwqxS0nu4bug==", + "dev": true, + "dependencies": { + "sass": "^1.71.1" + } }, "node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -85,6 +85,9 @@ "engines": { "node": ">= 8.10.0" }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, "optionalDependencies": { "fsevents": "~2.3.2" } @@ -136,9 +139,9 @@ } }, "node_modules/immutable": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", - "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", "dev": true }, "node_modules/is-binary-path": { @@ -308,9 +311,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "dev": true, "engines": { "node": ">=0.10.0" diff --git a/package.json b/package.json index 58eb920..6692da2 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ }, "version": "1.0.0", "devDependencies": { - "bulma": "^0.9.4", + "bulma": "^1.0.0", "sass": "^1.72.0", "ts2fable": "^0.7.1" }, From ddeac4bf4ed06aecc1286dfb24348cb7c29f2a1c Mon Sep 17 00:00:00 2001 From: krymtkts Date: Fri, 22 Mar 2024 13:53:44 +0900 Subject: [PATCH 2/8] Resolve sass build errors. --- sass/style.scss | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/sass/style.scss b/sass/style.scss index 373d6c2..6666ec5 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -67,20 +67,20 @@ $section-padding: 1.5rem; $section-padding-desktop: 1.5rem; $body-line-height: 1.7; -@import "../node_modules/bulma/sass/utilities/_all.sass"; -@import "../node_modules/bulma/sass/base/_all.sass"; -@import "../node_modules/bulma/sass/components/navbar.sass"; -@import "../node_modules/bulma/sass/components/tabs.sass"; -@import "../node_modules/bulma/sass/elements/button.sass"; -@import "../node_modules/bulma/sass/elements/container.sass"; -@import "../node_modules/bulma/sass/elements/content.sass"; -@import "../node_modules/bulma/sass/elements/image.sass"; -@import "../node_modules/bulma/sass/elements/tag.sass"; -@import "../node_modules/bulma/sass/elements/title.sass"; -@import "../node_modules/bulma/sass/form/shared.sass"; -@import "../node_modules/bulma/sass/form/checkbox-radio.sass"; -@import "../node_modules/bulma/sass/layout/footer.sass"; -@import "../node_modules/bulma/sass/layout/section.sass"; +@import "../node_modules/bulma/sass/utilities/_index.scss"; +@import "../node_modules/bulma/sass/base/_index.scss"; +@import "../node_modules/bulma/sass/components/navbar.scss"; +@import "../node_modules/bulma/sass/components/tabs.scss"; +@import "../node_modules/bulma/sass/elements/button.scss"; +@import "../node_modules/bulma/sass/elements/content.scss"; +@import "../node_modules/bulma/sass/elements/image.scss"; +@import "../node_modules/bulma/sass/elements/tag.scss"; +@import "../node_modules/bulma/sass/elements/title.scss"; +@import "../node_modules/bulma/sass/form/shared.scss"; +@import "../node_modules/bulma/sass/form/checkbox-radio.scss"; +@import "../node_modules/bulma/sass/layout/container.scss"; +@import "../node_modules/bulma/sass/layout/footer.scss"; +@import "../node_modules/bulma/sass/layout/section.scss"; // NOTE: adjust non-parameterized styles. .content a { From dc9b75c7591e6aaaf24c11a2131c4418eda30f29 Mon Sep 17 00:00:00 2001 From: krymtkts Date: Sat, 23 Mar 2024 20:51:22 +0900 Subject: [PATCH 3/8] Rewrite style.scss to apply automatic light and dark mode. --- sass/style.scss | 222 ++++++++++++++++++++++++++++++------------------ 1 file changed, 140 insertions(+), 82 deletions(-) diff --git a/sass/style.scss b/sass/style.scss index 6666ec5..83289d5 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,86 +1,144 @@ @charset "utf-8"; // NOTE: based on https://ethanschoonover.com/solarized/ -$base03: #002b36; -$base02: #073642; -$base01: #586e75; -$base00: #657b83; -$base0: #839496; -$base1: #93a1a1; -$base2: #eee8d5; -$base3: #fdf6e3; -$yellow: #b58900; -$orange: #cb4b16; -$red: #dc322f; -$magenta: #d33682; -$violet: #6c71c4; -$blue: #268bd2; -$cyan: #2aa198; -$green: #859900; - -// // NOTE: Solarized Light. -// $black: $base03, -// $black-bis: $base02, -// $black-ter: $base02, -// $grey-darker: $base00, -// $grey-dark: $base00, -// $grey: $base01, -// $grey-light: $base0, -// $grey-lighter: $base1, -// $grey-lightest: $base1, -// $white-ter: $base2, -// $white-bis: $base2, -// $white: $base3, -// $background: $base3, -// $code: $base01, -// $tag-background-color: $base3, -// NOTE: Solarized Dark. -$black: $base3; -$black-bis: $base2; -$black-ter: $base2; -$grey-darker: $base1; -$grey-dark: $base1; -$grey: $base0; -$grey-light: $base00; -$grey-lighter: $base01; -$grey-lightest: $base01; -$white-ter: $base02; -$white-bis: $base02; -$white: $base03; -$background: $base03; -$code: $base0; -$tag-background-color: $base03; -$hr-background-color: $base01; - -$orange: $orange; -$yellow: $yellow; -$green: $green; -$turquoise: $cyan; -$cyan: $cyan; -$blue: $blue; -$purple: $violet; -$red: $red; - -$code-size: 1em; -$link-hover: $violet; -$section-padding: 1.5rem; -$section-padding-desktop: 1.5rem; -$body-line-height: 1.7; - -@import "../node_modules/bulma/sass/utilities/_index.scss"; -@import "../node_modules/bulma/sass/base/_index.scss"; -@import "../node_modules/bulma/sass/components/navbar.scss"; -@import "../node_modules/bulma/sass/components/tabs.scss"; -@import "../node_modules/bulma/sass/elements/button.scss"; -@import "../node_modules/bulma/sass/elements/content.scss"; -@import "../node_modules/bulma/sass/elements/image.scss"; -@import "../node_modules/bulma/sass/elements/tag.scss"; -@import "../node_modules/bulma/sass/elements/title.scss"; -@import "../node_modules/bulma/sass/form/shared.scss"; -@import "../node_modules/bulma/sass/form/checkbox-radio.scss"; -@import "../node_modules/bulma/sass/layout/container.scss"; -@import "../node_modules/bulma/sass/layout/footer.scss"; -@import "../node_modules/bulma/sass/layout/section.scss"; +$sl-base03: #002b36; +$sl-base02: #073642; +$sl-base01: #586e75; +$sl-base00: #657b83; +$sl-base0: #839496; +$sl-base1: #93a1a1; +$sl-base2: #eee8d5; +$sl-base3: #fdf6e3; +$sl-yellow: #b58900; +$sl-orange: #cb4b16; +$sl-red: #dc322f; +$sl-magenta: #d33682; +$sl-violet: #6c71c4; +$sl-blue: #268bd2; +$sl-cyan: #2aa198; +$sl-green: #859900; + +@use "../node_modules/bulma/sass" as * with ( + $black: $sl-base03, + $black-bis: $sl-base02, + $black-ter: $sl-base02, + $grey-darker: $sl-base00, + $grey-dark: $sl-base00, + $grey: $sl-base01, + $grey-light: $sl-base0, + $grey-lighter: $sl-base1, + $grey-lightest: $sl-base1, + $white-ter: $sl-base2, + $white-bis: $sl-base2, + $white: $sl-base3, + + $background: $sl-base3, + $code: $sl-base01, + + $orange: $sl-orange, + $yellow: $sl-yellow, + $green: $sl-green, + $turquoise: $sl-cyan, + $cyan: $sl-cyan, + $blue: $sl-blue, + $purple: $sl-violet, + $red: $sl-red, + + $code-size: 1em, + + $body-line-height: 1.7, + + $section-padding: 1.5rem, + $section-padding-desktop: 1.5rem +); + +@media (prefers-color-scheme: light) { + :root { + // NOTE: Solarized Light. + --bulma-black: #{$sl-base03}; + --bulma-black-bis: #{$sl-base02}; + --bulma-black-ter: #{$sl-base02}; + --bulma-grey-darker: #{$sl-base00}; + --bulma-grey-dark: #{$sl-base00}; + --bulma-grey: #{$sl-base01}; + --bulma-grey-light: #{$sl-base0}; + --bulma-grey-lighter: #{$sl-base1}; + --bulma-grey-lightest: #{$sl-base1}; + --bulma-white-ter: #{$sl-base2}; + --bulma-white-bis: #{$sl-base2}; + --bulma-white: #{$sl-base3}; + + --bulma-text: #{$sl-base01}; + --bulma-text-strong: #{$sl-base01}; + + --bulma-scheme-main: #{$sl-base3}; + --bulma-scheme-main-bis: #{$sl-base2}; + --bulma-scheme-main-ter: #{$sl-base2}; + + --bulma-scheme-s: 100; + --bulma-scheme-l: 100; + + --bulma-scheme-main-s: 100; + --bulma-scheme-main-bis-s: 100; + --bulma-scheme-main-ter-s: 100; + --bulma-scheme-main-l: 100; + --bulma-scheme-main-bis-l: 100; + --bulma-scheme-main-ter-l: 100; + + --bulma-tag-s: 100; + --bulma-tag-background-l: 100; + + --bulma-code: #{$sl-base00}; + + --bulma-hr-background-color: #{$sl-base1}; + + --bulma-border: #{$sl-base1}; + } +} + +@media (prefers-color-scheme: dark) { + :root { + // NOTE: Solarized Dark. + --bulma-black: #{$sl-base3}; + --bulma-black-bis: #{$sl-base2}; + --bulma-black-ter: #{$sl-base2}; + --bulma-grey-darker: #{$sl-base1}; + --bulma-grey-dark: #{$sl-base1}; + --bulma-grey: #{$sl-base0}; + --bulma-grey-light: #{$sl-base00}; + --bulma-grey-lighter: #{$sl-base01}; + --bulma-grey-lightest: #{$sl-base01}; + --bulma-white-ter: #{$sl-base02}; + --bulma-white-bis: #{$sl-base02}; + --bulma-white: #{$sl-base03}; + + --bulma-text: #{$sl-base1}; + --bulma-text-strong: #{$sl-base1}; + + --bulma-scheme-s: 100; + --bulma-scheme-l: 100; + + --bulma-scheme-main: #{$sl-base03}; + --bulma-scheme-main-bis: #{$sl-base02}; + --bulma-scheme-main-ter: #{$sl-base02}; + + --bulma-scheme-main-s: 100; + --bulma-scheme-main-bis-s: 100; + --bulma-scheme-main-ter-s: 100; + --bulma-scheme-main-l: 100; + --bulma-scheme-main-bis-l: 100; + --bulma-scheme-main-ter-l: 100; + + --bulma-tag-s: 100; + --bulma-tag-background-l: 100; + + --bulma-code: #{$sl-base0}; + + --bulma-hr-background-color: #{$sl-base01}; + + --bulma-border: #{$sl-base01}; + } +} // NOTE: adjust non-parameterized styles. .content a { @@ -101,7 +159,7 @@ code { code, pre, .tag:not(body) { - border: 1px solid $grey-lighter; + border: 1px solid $sl-base01; border-radius: $radius; } pre code { @@ -114,7 +172,7 @@ pre code { } } .date { - color: $base01; + color: $sl-base01; } .prev a:before { content: "\2190"; From 3c25f5797bc7fe4a7f97bd060629fe0c4b2695c9 Mon Sep 17 00:00:00 2001 From: krymtkts Date: Sat, 23 Mar 2024 20:55:36 +0900 Subject: [PATCH 4/8] Add the force dark mode using data-theme=dark. --- sass/style.scss | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/sass/style.scss b/sass/style.scss index 83289d5..2eb29ff 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -140,6 +140,48 @@ $sl-green: #859900; } } +[data-theme="dark"] { + // NOTE: Solarized Dark. + --bulma-black: #{$sl-base3}; + --bulma-black-bis: #{$sl-base2}; + --bulma-black-ter: #{$sl-base2}; + --bulma-grey-darker: #{$sl-base1}; + --bulma-grey-dark: #{$sl-base1}; + --bulma-grey: #{$sl-base0}; + --bulma-grey-light: #{$sl-base00}; + --bulma-grey-lighter: #{$sl-base01}; + --bulma-grey-lightest: #{$sl-base01}; + --bulma-white-ter: #{$sl-base02}; + --bulma-white-bis: #{$sl-base02}; + --bulma-white: #{$sl-base03}; + + --bulma-text: #{$sl-base1}; + --bulma-text-strong: #{$sl-base1}; + + --bulma-scheme-s: 100; + --bulma-scheme-l: 100; + + --bulma-scheme-main: #{$sl-base03}; + --bulma-scheme-main-bis: #{$sl-base02}; + --bulma-scheme-main-ter: #{$sl-base02}; + + --bulma-scheme-main-s: 100; + --bulma-scheme-main-bis-s: 100; + --bulma-scheme-main-ter-s: 100; + --bulma-scheme-main-l: 100; + --bulma-scheme-main-bis-l: 100; + --bulma-scheme-main-ter-l: 100; + + --bulma-tag-s: 100; + --bulma-tag-background-l: 100; + + --bulma-code: #{$sl-base0}; + + --bulma-hr-background-color: #{$sl-base01}; + + --bulma-border: #{$sl-base01}; +} + // NOTE: adjust non-parameterized styles. .content a { text-decoration: underline; From c7741de274a8049f92a5579b95365b651140ba91 Mon Sep 17 00:00:00 2001 From: krymtkts Date: Sun, 24 Mar 2024 13:43:46 +0900 Subject: [PATCH 5/8] Update force light/dark mode. --- sass/style.scss | 185 +++++++++++++++++++++++++++--------------------- 1 file changed, 106 insertions(+), 79 deletions(-) diff --git a/sass/style.scss b/sass/style.scss index 2eb29ff..595e4d6 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -19,22 +19,6 @@ $sl-cyan: #2aa198; $sl-green: #859900; @use "../node_modules/bulma/sass" as * with ( - $black: $sl-base03, - $black-bis: $sl-base02, - $black-ter: $sl-base02, - $grey-darker: $sl-base00, - $grey-dark: $sl-base00, - $grey: $sl-base01, - $grey-light: $sl-base0, - $grey-lighter: $sl-base1, - $grey-lightest: $sl-base1, - $white-ter: $sl-base2, - $white-bis: $sl-base2, - $white: $sl-base3, - - $background: $sl-base3, - $code: $sl-base01, - $orange: $sl-orange, $yellow: $sl-yellow, $green: $sl-green, @@ -75,18 +59,18 @@ $sl-green: #859900; --bulma-scheme-main-bis: #{$sl-base2}; --bulma-scheme-main-ter: #{$sl-base2}; - --bulma-scheme-s: 100; - --bulma-scheme-l: 100; + --bulma-scheme-h: 44; + --bulma-scheme-s: 87%; + --bulma-scheme-l: 94%; - --bulma-scheme-main-s: 100; - --bulma-scheme-main-bis-s: 100; - --bulma-scheme-main-ter-s: 100; - --bulma-scheme-main-l: 100; - --bulma-scheme-main-bis-l: 100; - --bulma-scheme-main-ter-l: 100; + --bulma-background-l: 94%; - --bulma-tag-s: 100; - --bulma-tag-background-l: 100; + --bulma-scheme-main-s: 87%; + --bulma-scheme-main-bis-s: 87%; + --bulma-scheme-main-ter-s: 87%; + --bulma-scheme-main-l: 94%; + --bulma-scheme-main-bis-l: 94%; + --bulma-scheme-main-ter-l: 94%; --bulma-code: #{$sl-base00}; @@ -94,6 +78,48 @@ $sl-green: #859900; --bulma-border: #{$sl-base1}; } + + [data-theme="dark"] { + // NOTE: Solarized Dark. + --bulma-black: #{$sl-base3}; + --bulma-black-bis: #{$sl-base2}; + --bulma-black-ter: #{$sl-base2}; + --bulma-grey-darker: #{$sl-base1}; + --bulma-grey-dark: #{$sl-base1}; + --bulma-grey: #{$sl-base0}; + --bulma-grey-light: #{$sl-base00}; + --bulma-grey-lighter: #{$sl-base01}; + --bulma-grey-lightest: #{$sl-base01}; + --bulma-white-ter: #{$sl-base02}; + --bulma-white-bis: #{$sl-base02}; + --bulma-white: #{$sl-base03}; + + --bulma-text: #{$sl-base1}; + --bulma-text-strong: #{$sl-base1}; + + --bulma-scheme-main: #{$sl-base03}; + --bulma-scheme-main-bis: #{$sl-base02}; + --bulma-scheme-main-ter: #{$sl-base02}; + + --bulma-scheme-h: 192; + --bulma-scheme-s: 100%; + --bulma-scheme-l: 11%; + + --bulma-background-l: 11%; + + --bulma-scheme-main-s: 100%; + --bulma-scheme-main-bis-s: 100%; + --bulma-scheme-main-ter-s: 100%; + --bulma-scheme-main-l: 11%; + --bulma-scheme-main-bis-l: 11%; + --bulma-scheme-main-ter-l: 11%; + + --bulma-code: #{$sl-base0}; + + --bulma-hr-background-color: #{$sl-base01}; + + --bulma-border: #{$sl-base01}; + } } @media (prefers-color-scheme: dark) { @@ -115,22 +141,22 @@ $sl-green: #859900; --bulma-text: #{$sl-base1}; --bulma-text-strong: #{$sl-base1}; - --bulma-scheme-s: 100; - --bulma-scheme-l: 100; - --bulma-scheme-main: #{$sl-base03}; --bulma-scheme-main-bis: #{$sl-base02}; --bulma-scheme-main-ter: #{$sl-base02}; - --bulma-scheme-main-s: 100; - --bulma-scheme-main-bis-s: 100; - --bulma-scheme-main-ter-s: 100; - --bulma-scheme-main-l: 100; - --bulma-scheme-main-bis-l: 100; - --bulma-scheme-main-ter-l: 100; + --bulma-scheme-h: 192; + --bulma-scheme-s: 100%; + --bulma-scheme-l: 11%; - --bulma-tag-s: 100; - --bulma-tag-background-l: 100; + --bulma-background-l: 11%; + + --bulma-scheme-main-s: 100%; + --bulma-scheme-main-bis-s: 100%; + --bulma-scheme-main-ter-s: 100%; + --bulma-scheme-main-l: 11%; + --bulma-scheme-main-bis-l: 11%; + --bulma-scheme-main-ter-l: 11%; --bulma-code: #{$sl-base0}; @@ -138,48 +164,48 @@ $sl-green: #859900; --bulma-border: #{$sl-base01}; } -} -[data-theme="dark"] { - // NOTE: Solarized Dark. - --bulma-black: #{$sl-base3}; - --bulma-black-bis: #{$sl-base2}; - --bulma-black-ter: #{$sl-base2}; - --bulma-grey-darker: #{$sl-base1}; - --bulma-grey-dark: #{$sl-base1}; - --bulma-grey: #{$sl-base0}; - --bulma-grey-light: #{$sl-base00}; - --bulma-grey-lighter: #{$sl-base01}; - --bulma-grey-lightest: #{$sl-base01}; - --bulma-white-ter: #{$sl-base02}; - --bulma-white-bis: #{$sl-base02}; - --bulma-white: #{$sl-base03}; - - --bulma-text: #{$sl-base1}; - --bulma-text-strong: #{$sl-base1}; - - --bulma-scheme-s: 100; - --bulma-scheme-l: 100; - - --bulma-scheme-main: #{$sl-base03}; - --bulma-scheme-main-bis: #{$sl-base02}; - --bulma-scheme-main-ter: #{$sl-base02}; - - --bulma-scheme-main-s: 100; - --bulma-scheme-main-bis-s: 100; - --bulma-scheme-main-ter-s: 100; - --bulma-scheme-main-l: 100; - --bulma-scheme-main-bis-l: 100; - --bulma-scheme-main-ter-l: 100; - - --bulma-tag-s: 100; - --bulma-tag-background-l: 100; - - --bulma-code: #{$sl-base0}; - - --bulma-hr-background-color: #{$sl-base01}; - - --bulma-border: #{$sl-base01}; + [data-theme="light"] { + // NOTE: Solarized Light. + --bulma-black: #{$sl-base03}; + --bulma-black-bis: #{$sl-base02}; + --bulma-black-ter: #{$sl-base02}; + --bulma-grey-darker: #{$sl-base00}; + --bulma-grey-dark: #{$sl-base00}; + --bulma-grey: #{$sl-base01}; + --bulma-grey-light: #{$sl-base0}; + --bulma-grey-lighter: #{$sl-base1}; + --bulma-grey-lightest: #{$sl-base1}; + --bulma-white-ter: #{$sl-base2}; + --bulma-white-bis: #{$sl-base2}; + --bulma-white: #{$sl-base3}; + + --bulma-text: #{$sl-base01}; + --bulma-text-strong: #{$sl-base01}; + + --bulma-scheme-main: #{$sl-base3}; + --bulma-scheme-main-bis: #{$sl-base2}; + --bulma-scheme-main-ter: #{$sl-base2}; + + --bulma-scheme-h: 44; + --bulma-scheme-s: 87%; + --bulma-scheme-l: 94%; + + --bulma-background-l: 94%; + + --bulma-scheme-main-s: 87%; + --bulma-scheme-main-bis-s: 87%; + --bulma-scheme-main-ter-s: 87%; + --bulma-scheme-main-l: 94%; + --bulma-scheme-main-bis-l: 94%; + --bulma-scheme-main-ter-l: 94%; + + --bulma-code: #{$sl-base00}; + + --bulma-hr-background-color: #{$sl-base1}; + + --bulma-border: #{$sl-base1}; + } } // NOTE: adjust non-parameterized styles. @@ -200,7 +226,8 @@ code { } code, pre, -.tag:not(body) { +.tag:not(body), +a.button { border: 1px solid $sl-base01; border-radius: $radius; } From aa668a3e991a46e9b3b3d0302bdbc717d146665e Mon Sep 17 00:00:00 2001 From: krymtkts Date: Sun, 24 Mar 2024 14:35:18 +0900 Subject: [PATCH 6/8] Refactor light/dark mode. --- sass/style.scss | 244 +++++++++++++++++------------------------------- 1 file changed, 88 insertions(+), 156 deletions(-) diff --git a/sass/style.scss b/sass/style.scss index 595e4d6..fa0bf63 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -36,175 +36,107 @@ $sl-green: #859900; $section-padding-desktop: 1.5rem ); +@mixin light-theme { + // NOTE: Solarized Light. + --bulma-black: #{$sl-base03}; + --bulma-black-bis: #{$sl-base02}; + --bulma-black-ter: #{$sl-base02}; + --bulma-grey-darker: #{$sl-base00}; + --bulma-grey-dark: #{$sl-base00}; + --bulma-grey: #{$sl-base01}; + --bulma-grey-light: #{$sl-base0}; + --bulma-grey-lighter: #{$sl-base1}; + --bulma-grey-lightest: #{$sl-base1}; + --bulma-white-ter: #{$sl-base2}; + --bulma-white-bis: #{$sl-base2}; + --bulma-white: #{$sl-base3}; + + --bulma-text: #{$sl-base01}; + --bulma-text-strong: #{$sl-base01}; + + --bulma-scheme-main: #{$sl-base3}; + --bulma-scheme-main-bis: #{$sl-base2}; + --bulma-scheme-main-ter: #{$sl-base2}; + + --bulma-scheme-h: 44; + --bulma-scheme-s: 87%; + --bulma-scheme-l: 94%; + + --bulma-background-l: 94%; + + --bulma-scheme-main-s: 87%; + --bulma-scheme-main-bis-s: 87%; + --bulma-scheme-main-ter-s: 87%; + --bulma-scheme-main-l: 94%; + --bulma-scheme-main-bis-l: 94%; + --bulma-scheme-main-ter-l: 94%; + + --bulma-code: #{$sl-base00}; + + --bulma-hr-background-color: #{$sl-base1}; + + --bulma-border: #{$sl-base1}; +} + +@mixin dark-theme { + // NOTE: Solarized Dark. + --bulma-black: #{$sl-base3}; + --bulma-black-bis: #{$sl-base2}; + --bulma-black-ter: #{$sl-base2}; + --bulma-grey-darker: #{$sl-base1}; + --bulma-grey-dark: #{$sl-base1}; + --bulma-grey: #{$sl-base0}; + --bulma-grey-light: #{$sl-base00}; + --bulma-grey-lighter: #{$sl-base01}; + --bulma-grey-lightest: #{$sl-base01}; + --bulma-white-ter: #{$sl-base02}; + --bulma-white-bis: #{$sl-base02}; + --bulma-white: #{$sl-base03}; + + --bulma-text: #{$sl-base1}; + --bulma-text-strong: #{$sl-base1}; + + --bulma-scheme-main: #{$sl-base03}; + --bulma-scheme-main-bis: #{$sl-base02}; + --bulma-scheme-main-ter: #{$sl-base02}; + + --bulma-scheme-h: 192; + --bulma-scheme-s: 100%; + --bulma-scheme-l: 11%; + + --bulma-background-l: 11%; + + --bulma-scheme-main-s: 100%; + --bulma-scheme-main-bis-s: 100%; + --bulma-scheme-main-ter-s: 100%; + --bulma-scheme-main-l: 11%; + --bulma-scheme-main-bis-l: 11%; + --bulma-scheme-main-ter-l: 11%; + + --bulma-code: #{$sl-base0}; + + --bulma-hr-background-color: #{$sl-base01}; + + --bulma-border: #{$sl-base01}; +} + @media (prefers-color-scheme: light) { :root { - // NOTE: Solarized Light. - --bulma-black: #{$sl-base03}; - --bulma-black-bis: #{$sl-base02}; - --bulma-black-ter: #{$sl-base02}; - --bulma-grey-darker: #{$sl-base00}; - --bulma-grey-dark: #{$sl-base00}; - --bulma-grey: #{$sl-base01}; - --bulma-grey-light: #{$sl-base0}; - --bulma-grey-lighter: #{$sl-base1}; - --bulma-grey-lightest: #{$sl-base1}; - --bulma-white-ter: #{$sl-base2}; - --bulma-white-bis: #{$sl-base2}; - --bulma-white: #{$sl-base3}; - - --bulma-text: #{$sl-base01}; - --bulma-text-strong: #{$sl-base01}; - - --bulma-scheme-main: #{$sl-base3}; - --bulma-scheme-main-bis: #{$sl-base2}; - --bulma-scheme-main-ter: #{$sl-base2}; - - --bulma-scheme-h: 44; - --bulma-scheme-s: 87%; - --bulma-scheme-l: 94%; - - --bulma-background-l: 94%; - - --bulma-scheme-main-s: 87%; - --bulma-scheme-main-bis-s: 87%; - --bulma-scheme-main-ter-s: 87%; - --bulma-scheme-main-l: 94%; - --bulma-scheme-main-bis-l: 94%; - --bulma-scheme-main-ter-l: 94%; - - --bulma-code: #{$sl-base00}; - - --bulma-hr-background-color: #{$sl-base1}; - - --bulma-border: #{$sl-base1}; + @include light-theme(); } [data-theme="dark"] { - // NOTE: Solarized Dark. - --bulma-black: #{$sl-base3}; - --bulma-black-bis: #{$sl-base2}; - --bulma-black-ter: #{$sl-base2}; - --bulma-grey-darker: #{$sl-base1}; - --bulma-grey-dark: #{$sl-base1}; - --bulma-grey: #{$sl-base0}; - --bulma-grey-light: #{$sl-base00}; - --bulma-grey-lighter: #{$sl-base01}; - --bulma-grey-lightest: #{$sl-base01}; - --bulma-white-ter: #{$sl-base02}; - --bulma-white-bis: #{$sl-base02}; - --bulma-white: #{$sl-base03}; - - --bulma-text: #{$sl-base1}; - --bulma-text-strong: #{$sl-base1}; - - --bulma-scheme-main: #{$sl-base03}; - --bulma-scheme-main-bis: #{$sl-base02}; - --bulma-scheme-main-ter: #{$sl-base02}; - - --bulma-scheme-h: 192; - --bulma-scheme-s: 100%; - --bulma-scheme-l: 11%; - - --bulma-background-l: 11%; - - --bulma-scheme-main-s: 100%; - --bulma-scheme-main-bis-s: 100%; - --bulma-scheme-main-ter-s: 100%; - --bulma-scheme-main-l: 11%; - --bulma-scheme-main-bis-l: 11%; - --bulma-scheme-main-ter-l: 11%; - - --bulma-code: #{$sl-base0}; - - --bulma-hr-background-color: #{$sl-base01}; - - --bulma-border: #{$sl-base01}; + @include dark-theme(); } } @media (prefers-color-scheme: dark) { :root { - // NOTE: Solarized Dark. - --bulma-black: #{$sl-base3}; - --bulma-black-bis: #{$sl-base2}; - --bulma-black-ter: #{$sl-base2}; - --bulma-grey-darker: #{$sl-base1}; - --bulma-grey-dark: #{$sl-base1}; - --bulma-grey: #{$sl-base0}; - --bulma-grey-light: #{$sl-base00}; - --bulma-grey-lighter: #{$sl-base01}; - --bulma-grey-lightest: #{$sl-base01}; - --bulma-white-ter: #{$sl-base02}; - --bulma-white-bis: #{$sl-base02}; - --bulma-white: #{$sl-base03}; - - --bulma-text: #{$sl-base1}; - --bulma-text-strong: #{$sl-base1}; - - --bulma-scheme-main: #{$sl-base03}; - --bulma-scheme-main-bis: #{$sl-base02}; - --bulma-scheme-main-ter: #{$sl-base02}; - - --bulma-scheme-h: 192; - --bulma-scheme-s: 100%; - --bulma-scheme-l: 11%; - - --bulma-background-l: 11%; - - --bulma-scheme-main-s: 100%; - --bulma-scheme-main-bis-s: 100%; - --bulma-scheme-main-ter-s: 100%; - --bulma-scheme-main-l: 11%; - --bulma-scheme-main-bis-l: 11%; - --bulma-scheme-main-ter-l: 11%; - - --bulma-code: #{$sl-base0}; - - --bulma-hr-background-color: #{$sl-base01}; - - --bulma-border: #{$sl-base01}; + @include dark-theme(); } [data-theme="light"] { - // NOTE: Solarized Light. - --bulma-black: #{$sl-base03}; - --bulma-black-bis: #{$sl-base02}; - --bulma-black-ter: #{$sl-base02}; - --bulma-grey-darker: #{$sl-base00}; - --bulma-grey-dark: #{$sl-base00}; - --bulma-grey: #{$sl-base01}; - --bulma-grey-light: #{$sl-base0}; - --bulma-grey-lighter: #{$sl-base1}; - --bulma-grey-lightest: #{$sl-base1}; - --bulma-white-ter: #{$sl-base2}; - --bulma-white-bis: #{$sl-base2}; - --bulma-white: #{$sl-base3}; - - --bulma-text: #{$sl-base01}; - --bulma-text-strong: #{$sl-base01}; - - --bulma-scheme-main: #{$sl-base3}; - --bulma-scheme-main-bis: #{$sl-base2}; - --bulma-scheme-main-ter: #{$sl-base2}; - - --bulma-scheme-h: 44; - --bulma-scheme-s: 87%; - --bulma-scheme-l: 94%; - - --bulma-background-l: 94%; - - --bulma-scheme-main-s: 87%; - --bulma-scheme-main-bis-s: 87%; - --bulma-scheme-main-ter-s: 87%; - --bulma-scheme-main-l: 94%; - --bulma-scheme-main-bis-l: 94%; - --bulma-scheme-main-ter-l: 94%; - - --bulma-code: #{$sl-base00}; - - --bulma-hr-background-color: #{$sl-base1}; - - --bulma-border: #{$sl-base1}; + @include light-theme(); } } From a74494c488e60a527567940ea364c241840141e6 Mon Sep 17 00:00:00 2001 From: krymtkts Date: Sun, 24 Mar 2024 19:21:33 +0900 Subject: [PATCH 7/8] Add a prototype of light/dark theme selector. --- src/App.fsproj | 2 + src/Common.fs | 104 ++++++++++++++++++++++++++++------------------- src/Generator.fs | 28 ++++++++----- src/Handler.fs | 37 +++++++++++++++++ 4 files changed, 119 insertions(+), 52 deletions(-) create mode 100644 src/Handler.fs diff --git a/src/App.fsproj b/src/App.fsproj index 7125b7c..0697a11 100644 --- a/src/App.fsproj +++ b/src/App.fsproj @@ -9,12 +9,14 @@ + + diff --git a/src/Common.fs b/src/Common.fs index 62966fa..1d4472e 100644 --- a/src/Common.fs +++ b/src/Common.fs @@ -499,7 +499,7 @@ module Component = type FrameConfiguration = { lang: string - navbar: ReactElement + navItems: ReactElement list name: string title: string description: string @@ -508,50 +508,72 @@ module Component = favicon: string style: string highlightStyle: string - devInjection: string option } + scriptInjection: string list } let frame (conf: FrameConfiguration) (content: Fable.React.ReactElement list) = - Html.html [ prop.lang conf.lang - prop.children [ Html.head [ Html.title [ prop.text conf.title ] - Html.meta [ prop.charset "utf-8" ] - Html.meta [ prop.name "description" - prop.content conf.description ] - Html.meta [ prop.name "viewport" - prop.content "width=device-width, initial-scale=1" ] - Html.meta [ prop.custom ("property", "og:site_name") - prop.content conf.name ] - Html.meta [ prop.custom ("property", "og:title") - prop.content conf.title ] - Html.meta [ prop.custom ("property", "og:description") - prop.content conf.description ] - Html.meta [ prop.custom ("property", "og:url") - prop.content conf.url ] - Html.link [ prop.rel "canonical" - prop.href conf.url ] - Html.link [ prop.rel "icon" - prop.href conf.favicon ] - Html.link [ prop.rel "stylesheet" - prop.type' "text/css" - prop.href conf.style ] - Html.link [ prop.rel "stylesheet" - prop.type' "text/css" - prop.href conf.highlightStyle ] ] - Html.body [ Html.nav [ prop.className "tabs" - prop.children conf.navbar ] - Html.main [ prop.className "container" - prop.children [ Html.div [ prop.className "content" - prop.children content ] ] ] ] - Html.footer [ prop.className "footer" - prop.children [ Html.div [ prop.className "container" - prop.text ( - $"Copyright © %s{conf.copyright}" - ) ] ] ] - match conf.devInjection with - | Some src -> + let themeSelector = [ + Html.li [ + prop.children [ + Html.button [ + prop.className "theme-toggle" + prop.custom ("data-theme", "light") + prop.text "🌞" + prop.title "Light theme" ] + Html.button [ + prop.className "theme-toggle" + prop.custom ("data-theme", "dark") + prop.text "🌙" + prop.title "Dark theme"] + Html.button [ + prop.className "theme-toggle" + prop.custom ("data-theme", "system") + prop.text "🖥️" + prop.title "System Default" ] ] ] ] + + let navbar = Html.ul [ + prop.children (conf.navItems @ themeSelector) + ] + + let main =[ Html.head [ Html.title [ prop.text conf.title ] + Html.meta [ prop.charset "utf-8" ] + Html.meta [ prop.name "description" + prop.content conf.description ] + Html.meta [ prop.name "viewport" + prop.content "width=device-width, initial-scale=1" ] + Html.meta [ prop.custom ("property", "og:site_name") + prop.content conf.name ] + Html.meta [ prop.custom ("property", "og:title") + prop.content conf.title ] + Html.meta [ prop.custom ("property", "og:description") + prop.content conf.description ] + Html.meta [ prop.custom ("property", "og:url") + prop.content conf.url ] + Html.link [ prop.rel "canonical" + prop.href conf.url ] + Html.link [ prop.rel "icon" + prop.href conf.favicon ] + Html.link [ prop.rel "stylesheet" + prop.type' "text/css" + prop.href conf.style ] + Html.link [ prop.rel "stylesheet" + prop.type' "text/css" + prop.href conf.highlightStyle ] ] + Html.body [ Html.nav [ prop.className "tabs" + prop.children [ navbar ] ] + Html.main [ prop.className "container" + prop.children [ Html.div [ prop.className "content" + prop.children content ] ] ] ] + Html.footer [ prop.className "footer" + prop.children [ Html.div [ prop.className "container" + prop.text ( + $"Copyright © %s{conf.copyright}" + ) ] ] ] ] + let scripts = conf.scriptInjection |> List.map (fun src -> Html.script [ prop.lang "javascript" prop.type' "text/javascript" - prop.src src ] - | None -> null ] ] + prop.src src ]) + Html.html [ prop.lang conf.lang + prop.children (main @ scripts) ] type FooterButton = | Prev diff --git a/src/Generator.fs b/src/Generator.fs index 0cf5fbc..6d74f04 100644 --- a/src/Generator.fs +++ b/src/Generator.fs @@ -171,8 +171,7 @@ module Generation = | Title navi -> liA $"%s{pathRoot}%s{navi.path}" <| Element(navi.text, Html.h1 [ prop.text navi.text ]) - | Link navi -> liA $"%s{pathRoot}%s{navi.path}" <| Text navi.text) - |> Html.ul, + | Link navi -> liA $"%s{pathRoot}%s{navi.path}" <| Text navi.text), navs |> Seq.map toSitemap |> Seq.filter (function @@ -552,6 +551,7 @@ module RenderOptions = $"%s{opts.pathRoot}/css/%s{IO.leaf opts.highlightStyle}" let devScriptPath opts = $"%s{opts.pathRoot}/js/dev.js" + let handlerScriptPath opts = $"%s{opts.pathRoot}/js/handler.js" let faviconPath opts = $"%s{opts.pathRoot}%s{opts.favicon}" let postsRootPath opts = $"%s{opts.pathRoot}%s{opts.posts.root}" @@ -564,6 +564,7 @@ module RenderOptions = let pagesSourceRoot opts = $"%s{opts.src}%s{opts.pages.root}" let devScriptSourcePath = "src/Dev.fs.js" + let handlerScriptSourcePath = "src/Handler.fs.js" let imagesSourcePath opts = $"%s{opts.src}/%s{opts.images}" let destinationRoot opts = $"%s{opts.dst}%s{opts.pathRoot}" @@ -591,6 +592,7 @@ module RenderOptions = $"%s{destinationRoot opts}%s{feedPath opts}" let devScriptDestinationPath opts = $"%s{opts.dst}%s{devScriptPath opts}" + let handlerScriptDestinationPath opts = $"%s{opts.dst}%s{handlerScriptPath opts}" let imagesDestinationPath opts = $"%s{destinationRoot opts}/%s{opts.images}" @@ -626,12 +628,16 @@ let private buildNavList opts = path = feed sitemap = No } ] ] -let private buildDevScript opts = +let private buildBundledScripts opts = match opts.stage with | Development -> - Some(RenderOptions.devScriptPath opts), - [ (RenderOptions.devScriptSourcePath, RenderOptions.devScriptDestinationPath opts) ] - | Production -> None, [] + [ RenderOptions.devScriptPath opts + RenderOptions.handlerScriptPath opts ], + [ (RenderOptions.devScriptSourcePath, RenderOptions.devScriptDestinationPath opts) + (RenderOptions.handlerScriptSourcePath, RenderOptions.handlerScriptDestinationPath opts) ] + | Production -> + [ RenderOptions.handlerScriptPath opts], + [ (RenderOptions.handlerScriptSourcePath, RenderOptions.handlerScriptDestinationPath opts) ] let private buildHighlightStyle opts = RenderOptions.highlightStylePath opts, [ (opts.highlightStyle, RenderOptions.highlightStyleDestinationPath opts) ] @@ -640,10 +646,10 @@ let render (opts: RenderOptions) = promise { let feed, navs = buildNavList opts - let (navbar: Fable.React.ReactElement), navSitemap = + let navItems, navSitemap = generateNavbar opts.pathRoot navs - let devInjection, devScript = buildDevScript opts + let jsInjection, scripts = buildBundledScripts opts let highlightInjection, highlightStyle = buildHighlightStyle opts let site: PathConfiguration = @@ -654,7 +660,7 @@ let render (opts: RenderOptions) = let conf: FrameConfiguration = { lang = opts.lang - navbar = navbar + navItems = navItems name = opts.siteName title = opts.siteName description = opts.description @@ -663,7 +669,7 @@ let render (opts: RenderOptions) = favicon = RenderOptions.faviconPath opts style = RenderOptions.stylePath opts highlightStyle = highlightInjection - devInjection = devInjection } + scriptInjection = jsInjection } let renderPostAndPages = renderMarkdowns conf site @@ -738,7 +744,7 @@ let render (opts: RenderOptions) = do! copyResources - <| devScript @ paths @ highlightStyle + <| scripts @ paths @ highlightStyle printfn "Render complete!" } diff --git a/src/Handler.fs b/src/Handler.fs new file mode 100644 index 0000000..85d98a9 --- /dev/null +++ b/src/Handler.fs @@ -0,0 +1,37 @@ +module Handler + +open Browser.Dom +open Browser.WebStorage + +// NOTE: Don't use Fable library in this file because it is directly bundled int HTML files. +// This includes, discriminated union, List, etc. + +let private themeKey = "theme-mode" +let private themeAttributeName = "data-theme" + +let private setThemeMode (t: string) = + match t with + | "light" + | "dark" -> + localStorage.setItem (themeKey, t) + document.documentElement.setAttribute (themeAttributeName, t) + | _ -> + localStorage.removeItem themeKey + document.documentElement.removeAttribute themeAttributeName + +let private restoreThemeMode _ = + localStorage.getItem "theme-mode" |> setThemeMode + () + + +let private init () = + let els = document.querySelectorAll (".theme-toggle") + + for i = 0 to els.length - 1 do + let el = els.item (i) + let themeMode = el.getAttribute "data-theme" + el.addEventListener ("click", (fun _ -> setThemeMode themeMode)) + + window.addEventListener ("load", restoreThemeMode) + +init () From 62a751e286974d64c648bb141544f1f20680b3e8 Mon Sep 17 00:00:00 2001 From: krymtkts Date: Sun, 24 Mar 2024 19:41:54 +0900 Subject: [PATCH 8/8] Adjust the timing of restoring the selected color theme. --- src/Common.fs | 2 +- src/Handler.fs | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/Common.fs b/src/Common.fs index 1d4472e..5e807c8 100644 --- a/src/Common.fs +++ b/src/Common.fs @@ -573,7 +573,7 @@ module Component = prop.type' "text/javascript" prop.src src ]) Html.html [ prop.lang conf.lang - prop.children (main @ scripts) ] + prop.children (scripts @ main ) ] type FooterButton = | Prev diff --git a/src/Handler.fs b/src/Handler.fs index 85d98a9..62bce7b 100644 --- a/src/Handler.fs +++ b/src/Handler.fs @@ -19,10 +19,7 @@ let private setThemeMode (t: string) = localStorage.removeItem themeKey document.documentElement.removeAttribute themeAttributeName -let private restoreThemeMode _ = - localStorage.getItem "theme-mode" |> setThemeMode - () - +localStorage.getItem "theme-mode" |> setThemeMode let private init () = let els = document.querySelectorAll (".theme-toggle") @@ -32,6 +29,4 @@ let private init () = let themeMode = el.getAttribute "data-theme" el.addEventListener ("click", (fun _ -> setThemeMode themeMode)) - window.addEventListener ("load", restoreThemeMode) - init ()