From ba6373377914e6daa2634948b9a1f7d2483baeba Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Sat, 15 Jun 2024 01:59:41 -0400 Subject: [PATCH 1/8] updates theme to be closer to One Dark Pro Darker vs code theme --- _sass/_base.scss | 2 +- _sass/_themes.scss | 3 ++- _sass/_variables.scss | 6 +++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/_sass/_base.scss b/_sass/_base.scss index 1c605d56bbfe..926644a1de97 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -828,7 +828,7 @@ figure.highlight { pre { color: var(--global-theme-color); - background-color: var(--global-code-bg-color); + background-color: var(--global-code-bg-color) !important; border-radius: 6px; padding: 6px 12px; diff --git a/_sass/_themes.scss b/_sass/_themes.scss index e4d05d65e7a7..e75005accf1f 100644 --- a/_sass/_themes.scss +++ b/_sass/_themes.scss @@ -79,7 +79,8 @@ html[data-theme="dark"] { --global-distill-app-color: #{$grey-color-light}; --global-divider-color: #424246; --global-card-bg-color: #{$grey-900}; - --global-back-to-top-bg-color: rgba(#{red($white-color)}, #{green($white-color)}, #{blue($white-color)}, 0.5); + // --global-back-to-top-bg-color: rgba(#{red($white-color)}, #{green($white-color)}, #{blue($white-color)}, 0.5); + --global-back-to-top-bg-color: rgba(198, 120, 221, 0.85); // #c678dd --global-back-to-top-text-color: #{$black-color}; --global-tip-block: #42b983; diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 85b6c72624f1..2d8d8a64e2dd 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -9,7 +9,7 @@ $red-color-dark: #b71c1c !default; $orange-color: #f29105 !default; $blue-color: #0076df !default; $blue-color-dark: #00369f !default; -$cyan-color: #2698ba !default; +$cyan-color: #61afef !default; $light-cyan-color: lighten($cyan-color, 25%); $green-color: #00ab37 !default; $green-color-lime: #b7d12a !default; @@ -24,7 +24,7 @@ $yellow-color: #efcc00 !default; $grey-color: #828282 !default; $grey-color-light: lighten($grey-color, 40%); -$grey-color-dark: #1c1c1d; +$grey-color-dark: #1e2227; $grey-900: #212529; $white-color: #ffffff !default; @@ -33,7 +33,7 @@ $black-color: #000000 !default; // Theme colors $code-bg-color-light: rgba($purple-color, 0.05); -$code-bg-color-dark: #2c3237 !default; +$code-bg-color-dark: #23272e !default; // Font awesome location $fa-font-path: "../webfonts"; From 13006ac97863c2b76873628bc89976850ab828bf Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Sat, 15 Jun 2024 02:53:19 -0400 Subject: [PATCH 2/8] adds initial particles --- _config.yml | 6 +++ _layouts/default.liquid | 9 ++++ _sass/_base.scss | 9 ++++ particles-config.json | 110 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 134 insertions(+) create mode 100644 particles-config.json diff --git a/_config.yml b/_config.yml index fa048f195317..cdf679c67469 100644 --- a/_config.yml +++ b/_config.yml @@ -555,6 +555,12 @@ third_party_libraries: url: js: "https://cdn.jsdelivr.net/npm/mermaid@{{version}}/dist/mermaid.min.js" version: "10.7.0" + particles-js: + integrity: + js: "sha256-4CVKTLmrkrCVvcp7cJhhBq7+PUdDjbXA3x3HI/cudR0=" + url: + js: "https://cdn.jsdelivr.net/npm/particles.js@{{version}}/particles.min.js" + version: "2.0.0" polyfill: url: js: "https://cdnjs.cloudflare.com/polyfill/v{{version}}/polyfill.min.js?features=es6" diff --git a/_layouts/default.liquid b/_layouts/default.liquid index e519ec2d93ef..9041497e0988 100644 --- a/_layouts/default.liquid +++ b/_layouts/default.liquid @@ -17,6 +17,9 @@ + +
+ {% include header.liquid %} @@ -74,5 +77,11 @@ {% include scripts/back_to_top.liquid %} {% include scripts/search.liquid %} + + + + diff --git a/_sass/_base.scss b/_sass/_base.scss index 926644a1de97..0cb5f1ba515f 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -1133,3 +1133,12 @@ ninja-keys::part(ninja-input) { ninja-keys::part(ninja-input-wrapper) { background: var(--global-bg-color); } + +#particles-js { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: -1; +} diff --git a/particles-config.json b/particles-config.json new file mode 100644 index 000000000000..764d7c62bc32 --- /dev/null +++ b/particles-config.json @@ -0,0 +1,110 @@ +{ + "particles": { + "number": { + "value": 50, + "density": { + "enable": true, + "value_area": 800 + } + }, + "color": { + "value": "#ffffff" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#000000" + }, + "polygon": { + "nb_sides": 5 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.25, + "random": false, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 2, + "random": true, + "anim": { + "enable": false, + "speed": 40, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 125, + "color": "#ffffff", + "opacity": 0.2, + "width": 1 + }, + "move": { + "enable": true, + "speed": 0.25, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": false, + "mode": "repulse" + }, + "onclick": { + "enable": false, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true +} From 0ed5c0f1d0be834eef2e498eee67cb2a8ef1dcb5 Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Sat, 15 Jun 2024 03:32:33 -0400 Subject: [PATCH 3/8] updates white color to slightly off white --- _sass/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 2d8d8a64e2dd..4649f100994b 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -27,7 +27,7 @@ $grey-color-light: lighten($grey-color, 40%); $grey-color-dark: #1e2227; $grey-900: #212529; -$white-color: #ffffff !default; +$white-color: #f4f3f2 !default; $black-color: #000000 !default; // Theme colors From b284f90d610a2809b63a80c3301dd96d932f2e19 Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Sat, 15 Jun 2024 03:32:54 -0400 Subject: [PATCH 4/8] adds particles config for light and dark themes --- _layouts/default.liquid | 16 ++- ...-config.json => particles-config-dark.json | 0 particles-config-light.json | 110 ++++++++++++++++++ 3 files changed, 125 insertions(+), 1 deletion(-) rename particles-config.json => particles-config-dark.json (100%) create mode 100644 particles-config-light.json diff --git a/_layouts/default.liquid b/_layouts/default.liquid index 9041497e0988..c41df26e7358 100644 --- a/_layouts/default.liquid +++ b/_layouts/default.liquid @@ -80,8 +80,22 @@ + diff --git a/particles-config.json b/particles-config-dark.json similarity index 100% rename from particles-config.json rename to particles-config-dark.json diff --git a/particles-config-light.json b/particles-config-light.json new file mode 100644 index 000000000000..1ea6fd37cf6c --- /dev/null +++ b/particles-config-light.json @@ -0,0 +1,110 @@ +{ + "particles": { + "number": { + "value": 50, + "density": { + "enable": true, + "value_area": 800 + } + }, + "color": { + "value": "#23272e" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#23272e" + }, + "polygon": { + "nb_sides": 5 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.2, + "random": false, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 2, + "random": true, + "anim": { + "enable": false, + "speed": 40, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 125, + "color": "#23272e", + "opacity": 0.15, + "width": 1 + }, + "move": { + "enable": true, + "speed": 0.25, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": false, + "mode": "repulse" + }, + "onclick": { + "enable": false, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true +} From c470efeb407f515740e351983f0e004d6df2ebbd Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Sat, 15 Jun 2024 03:49:59 -0400 Subject: [PATCH 5/8] removes system theme --- assets/js/theme.js | 38 +++++++++----------------------------- 1 file changed, 9 insertions(+), 29 deletions(-) diff --git a/assets/js/theme.js b/assets/js/theme.js index 9fa1db762970..4f5e58dea04a 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1,23 +1,19 @@ // Has to be in the head tag, otherwise a flicker effect will occur. -// Toggle through light, dark, and system theme settings. +// Toggle between light and dark theme settings. let toggleThemeSetting = () => { let themeSetting = determineThemeSetting(); - if (themeSetting == "system") { - setThemeSetting("light"); - } else if (themeSetting == "light") { + if (themeSetting == "light") { setThemeSetting("dark"); } else { - setThemeSetting("system"); + setThemeSetting("light"); } }; // Change the theme setting and apply the theme. let setThemeSetting = (themeSetting) => { localStorage.setItem("theme", themeSetting); - document.documentElement.setAttribute("data-theme-setting", themeSetting); - applyTheme(); }; @@ -78,7 +74,7 @@ let applyTheme = () => { // Updates the background of medium-zoom overlay. if (typeof medium_zoom !== "undefined") { medium_zoom.update({ - background: getComputedStyle(document.documentElement).getPropertyValue("--global-bg-color") + "ee", // + 'ee' for trasparency. + background: getComputedStyle(document.documentElement).getPropertyValue("--global-bg-color") + "ee", // + 'ee' for transparency. }); } }; @@ -205,30 +201,19 @@ let transTheme = () => { }, 500); }; -// Determine the expected state of the theme toggle, which can be "dark", "light", or -// "system". Default is "system". +// Determine the expected state of the theme toggle, which can be "dark" or "light". Default is "light". let determineThemeSetting = () => { let themeSetting = localStorage.getItem("theme"); - if (themeSetting != "dark" && themeSetting != "light" && themeSetting != "system") { - themeSetting = "system"; + if (themeSetting != "dark" && themeSetting != "light") { + themeSetting = "light"; } return themeSetting; }; -// Determine the computed theme, which can be "dark" or "light". If the theme setting is -// "system", the computed theme is determined based on the user's system preference. +// Determine the computed theme, which can be "dark" or "light". let determineComputedTheme = () => { let themeSetting = determineThemeSetting(); - if (themeSetting == "system") { - const userPref = window.matchMedia; - if (userPref && userPref("(prefers-color-scheme: dark)").matches) { - return "dark"; - } else { - return "light"; - } - } else { - return themeSetting; - } + return themeSetting; }; let initTheme = () => { @@ -244,9 +229,4 @@ let initTheme = () => { toggleThemeSetting(); }); }); - - // Add event listener to the system theme preference change. - window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => { - applyTheme(); - }); }; From b59af189d9b0a4914491541be0f16d23c20e11be Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Sat, 15 Jun 2024 03:51:35 -0400 Subject: [PATCH 6/8] removes unnecessary theme function --- assets/js/theme.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/assets/js/theme.js b/assets/js/theme.js index 4f5e58dea04a..07a7fe248000 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -19,7 +19,7 @@ let setThemeSetting = (themeSetting) => { // Apply the computed dark or light theme to the website. let applyTheme = () => { - let theme = determineComputedTheme(); + let theme = determineThemeSetting(); transTheme(); setHighlight(theme); @@ -210,12 +210,6 @@ let determineThemeSetting = () => { return themeSetting; }; -// Determine the computed theme, which can be "dark" or "light". -let determineComputedTheme = () => { - let themeSetting = determineThemeSetting(); - return themeSetting; -}; - let initTheme = () => { let themeSetting = determineThemeSetting(); From 28892b8e4f7f864f16960ea43bb6fa89087c9047 Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Sat, 15 Jun 2024 03:53:19 -0400 Subject: [PATCH 7/8] removes changing to system theme as option from search --- _includes/scripts/search.liquid | 9 --------- 1 file changed, 9 deletions(-) diff --git a/_includes/scripts/search.liquid b/_includes/scripts/search.liquid index b1540a9ee6a8..533a72f96701 100644 --- a/_includes/scripts/search.liquid +++ b/_includes/scripts/search.liquid @@ -584,15 +584,6 @@ setThemeSetting("dark"); }, }, - { - id: 'system-theme', - title: 'Use system default theme', - description: 'Change the theme of the site to System Default', - section: 'Theme', - handler: () => { - setThemeSetting("system"); - }, - }, {%- endif -%} ]; From 600b7f9f422b6ac49421447d2b02010567a86bd1 Mon Sep 17 00:00:00 2001 From: Andrew Leonard Date: Sat, 15 Jun 2024 04:02:33 -0400 Subject: [PATCH 8/8] removes duplicate comment --- _layouts/default.liquid | 1 - 1 file changed, 1 deletion(-) diff --git a/_layouts/default.liquid b/_layouts/default.liquid index c41df26e7358..c9ac57ef3360 100644 --- a/_layouts/default.liquid +++ b/_layouts/default.liquid @@ -80,7 +80,6 @@ -