From 2b4e0aa05adaa24ffd7375e094ef2f35e20ec9e0 Mon Sep 17 00:00:00 2001 From: matr1x-hackmud Date: Wed, 28 May 2025 14:41:12 +0100 Subject: [PATCH 1/3] Implement light mode, its toggle and color shadowing --- docusaurus.config.js | 2 +- src/css/custom.css | 64 +++++++++++++++++++++++++++++---- src/plugins/rehype/autocolor.js | 18 +++++----- 3 files changed, 68 insertions(+), 16 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 13986836..1e4b19c7 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -75,7 +75,7 @@ const config = { // Supported and default color modes colorMode: { defaultMode: "dark", - disableSwitch: true, + disableSwitch: false, respectPrefersColorScheme: false, }, // Theme configuration specific to the docs plugin diff --git a/src/css/custom.css b/src/css/custom.css index 742fc0fe..736d0ca2 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -16,6 +16,12 @@ html[data-theme="dark"] { --ifm-color-primary-lightest: #dfedfc; --ifm-background-color: #101215; + --scan-line-1: #0e0e0e; + --scan-line-2: #101215; + + --ifm-a11y-button-color: var(--ifm-color-primary-dark); + --ifm-a11y-button-hover-color: var(--ifm-color-primary-darkest); + --ifm-color-info-contrast-background: rgb(25 60 71 / 50%); --ifm-color-warning-contrast-background: rgb(77 56 0 / 50%); --ifm-color-danger-contrast-background: rgb(75 17 19 / 50%); @@ -36,6 +42,45 @@ html[data-theme="dark"] { --ifm-global-radius: 0; } +/* covers both accessibility states */ +html[data-theme="light"] { + --ifm-color-primary: #161616; + --ifm-color-primary-dark: #5796e4; + --ifm-color-primary-darker: #060f18; + --ifm-color-primary-darkest: #0d59c4; + --ifm-color-primary-light: #56585a; + --ifm-color-primary-lighter: #323335; + --ifm-color-primary-lightest: #1a1818; + --ifm-background-color: #c6c8cc; + + --scan-line-1: #c6c8cc; + --scan-line-2: #c6c8cc; + + --ifm-a11y-button-color: var(--ifm-color-primary-light); + --ifm-a11y-button-hover-color: var(--ifm-color-primary-lightest); + + --ifm-color-info-contrast-background: rgba(78, 193, 228, 0.5); + --ifm-color-warning-contrast-background: rgba(206, 151, 0, 0.5); + --ifm-color-danger-contrast-background: rgba(204, 47, 52, 0.5); + + --ifm-navbar-background-color: var(--ifm-background-color); + --ifm-footer-background-color: var(--ifm-background-color); + --ifm-dropdown-background-color: var(--ifm-background-color); + --ifm-card-background-color: var(--ifm-background-color); + + --ifm-link-color: var(--ifm-color-primary); + + --ifm-heading-color: var(--ifm-color-primary-darker); + --ifm-color-content: var(--ifm-color-primary); + --ifm-link-color: var(--ifm-color-primary-darkest); + --ifm-navbar-link-hover-color: var(--ifm-color-primary-darker); + --ifm-menu-color: var(--ifm-color-primary); + --ifm-toc-link-color: var(--ifm-color-primary); + + --ifm-breadcrumb-border-radius: 0; + --ifm-global-radius: 0; +} + html:not([data-accessible="true"]) { --ifm-font-family-base: "whiterabbit-webfont"; } @@ -93,8 +138,9 @@ a.wikilink-new { width: 36px; height: 36px; display: flex; - background-color: var(--ifm-navbar-link-color); + background-color: var(--ifm-a11y-button-color); border: none; + margin-right: 10px; mask-image: url("../../assets/universal-access.svg"); mask-size: 100% auto; transition: background-color var(--ifm-transition-fast) @@ -102,19 +148,25 @@ a.wikilink-new { } .navbar-a11y:hover::before { - background-color: var(--ifm-navbar-link-hover-color); + background-color: var(--ifm-a11y-button-hover-color); } .main-wrapper:not([data-accessible="true"]) { background-image: repeating-linear-gradient( - #0e0e0e, - #0e0e0e 2px, - #101215 2px, - #101215 4px + var(--scan-line-1), + var(--scan-line-1) 2px, + var(--scan-line-2) 2px, + var(--scan-line-2) 4px ); background-size: 100% 4px; } +.color-tag { /* isnt visible in dark mode, but may be nice to toggle this in the future */ + text-shadow: 0.5px 0.5px 1px rgb(0, 0, 0), + 0 0 0.1em rgb(0, 0, 0), + 0 0 0.1em rgb(0, 0, 0); +} + .color-tag[data-tag="a"] { color: #000000; } diff --git a/src/plugins/rehype/autocolor.js b/src/plugins/rehype/autocolor.js index 90fab92b..9765d7fb 100644 --- a/src/plugins/rehype/autocolor.js +++ b/src/plugins/rehype/autocolor.js @@ -49,9 +49,9 @@ const regexGC = function colorScript(_fullMatch, user, script) { const isTrust = trustUsers.includes(user); return [ - h("span", { class: `color-${isTrust ? "trust" : "user"}` }, user), + h("span", { class: `color-tag color-${isTrust ? "trust" : "user"}` }, user), u("text", "."), - h("span", { class: "color-script" }, script), + h("span", { class: "color-tag color-script" }, script), ]; } @@ -61,12 +61,12 @@ function colorTag(_fullMatch, tag, inner) { function colorKvp(_fullMatch, key, value) { if (!value) { - return h("span", { class: "color-key" }, key); + return h("span", { class: "color-tag color-key" }, key); } return [ - h("span", { class: "color-key" }, key), + h("span", { class: "color-tag color-key" }, key), u("text", ": "), - h("span", { class: "color-value" }, value), + h("span", { class: "color-tag color-value" }, value), ]; } @@ -82,16 +82,16 @@ function colorGC(_fullMatch, q, t, b, m, k, units) { for (const [letter, value] of letters_and_values) { if (value) { - out.push(h("span", { class: "color-gc-text" }, value)); + out.push(h("span", { class: "color-tag color-gc-text" }, value)); out.push( - h("span", { class: `color-gc-${letter}` }, letter.toUpperCase()), + h("span", { class: `color-tag color-gc-${letter}` }, letter.toUpperCase()), ); } } if (units) { - out.push(h("span", { class: "color-gc-text" }, units)); + out.push(h("span", { class: "color-tag color-gc-text" }, units)); } - out.push(h("span", { class: "color-gc-end" }, "GC")); + out.push(h("span", { class: "color-tag color-gc-end" }, "GC")); return out; } From 835c86bb613482abb49900c95bf884f5c47654f9 Mon Sep 17 00:00:00 2001 From: matr1x-hackmud Date: Wed, 28 May 2025 14:48:01 +0100 Subject: [PATCH 2/3] Linter fixes --- src/css/custom.css | 14 ++++++++------ src/plugins/rehype/autocolor.js | 6 +++++- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 736d0ca2..dd30c892 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -20,7 +20,7 @@ html[data-theme="dark"] { --scan-line-2: #101215; --ifm-a11y-button-color: var(--ifm-color-primary-dark); - --ifm-a11y-button-hover-color: var(--ifm-color-primary-darkest); + --ifm-a11y-button-hover-color: var(--ifm-color-primary-darkest); --ifm-color-info-contrast-background: rgb(25 60 71 / 50%); --ifm-color-warning-contrast-background: rgb(77 56 0 / 50%); @@ -57,7 +57,7 @@ html[data-theme="light"] { --scan-line-2: #c6c8cc; --ifm-a11y-button-color: var(--ifm-color-primary-light); - --ifm-a11y-button-hover-color: var(--ifm-color-primary-lightest); + --ifm-a11y-button-hover-color: var(--ifm-color-primary-lightest); --ifm-color-info-contrast-background: rgba(78, 193, 228, 0.5); --ifm-color-warning-contrast-background: rgba(206, 151, 0, 0.5); @@ -161,10 +161,12 @@ a.wikilink-new { background-size: 100% 4px; } -.color-tag { /* isnt visible in dark mode, but may be nice to toggle this in the future */ - text-shadow: 0.5px 0.5px 1px rgb(0, 0, 0), - 0 0 0.1em rgb(0, 0, 0), - 0 0 0.1em rgb(0, 0, 0); +.color-tag { + /* isnt visible in dark mode, but may be nice to toggle this in the future */ + text-shadow: + 0.5px 0.5px 1px rgb(0, 0, 0), + 0 0 0.1em rgb(0, 0, 0), + 0 0 0.1em rgb(0, 0, 0); } .color-tag[data-tag="a"] { diff --git a/src/plugins/rehype/autocolor.js b/src/plugins/rehype/autocolor.js index 9765d7fb..990b8b4d 100644 --- a/src/plugins/rehype/autocolor.js +++ b/src/plugins/rehype/autocolor.js @@ -84,7 +84,11 @@ function colorGC(_fullMatch, q, t, b, m, k, units) { if (value) { out.push(h("span", { class: "color-tag color-gc-text" }, value)); out.push( - h("span", { class: `color-tag color-gc-${letter}` }, letter.toUpperCase()), + h( + "span", + { class: `color-tag color-gc-${letter}` }, + letter.toUpperCase(), + ), ); } } From bf3a4f006d006d273602f15a37b99955021e9d8a Mon Sep 17 00:00:00 2001 From: matr1x-hackmud Date: Wed, 28 May 2025 14:54:05 +0100 Subject: [PATCH 3/3] Create 'spacer' navbar item instead of a margin for the button --- docusaurus.config.js | 4 ++++ src/components/NavbarItem/Spacer.js | 9 +++++++++ src/css/custom.css | 7 ++++++- src/theme/NavbarItem/ComponentTypes.js | 2 ++ 4 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 src/components/NavbarItem/Spacer.js diff --git a/docusaurus.config.js b/docusaurus.config.js index 1e4b19c7..5f8c4d90 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -179,6 +179,10 @@ const config = { type: "custom-AccessibilityOptions", position: "right", }, + { + type: "custom-Spacer", + position: "right", + }, ], }, footer: { diff --git a/src/components/NavbarItem/Spacer.js b/src/components/NavbarItem/Spacer.js new file mode 100644 index 00000000..9ed04f5f --- /dev/null +++ b/src/components/NavbarItem/Spacer.js @@ -0,0 +1,9 @@ +import React from "react"; + +export default function Spacer({ mobile }) { + if (mobile) { + return null; + } + + return
; +} diff --git a/src/css/custom.css b/src/css/custom.css index dd30c892..af31728c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -133,6 +133,12 @@ a.wikilink-new { color: var(--ifm-color-danger); } +.navbar-spacer { + content: ""; + width: 12px; + height: 36px; +} + .navbar-a11y::before { content: ""; width: 36px; @@ -140,7 +146,6 @@ a.wikilink-new { display: flex; background-color: var(--ifm-a11y-button-color); border: none; - margin-right: 10px; mask-image: url("../../assets/universal-access.svg"); mask-size: 100% auto; transition: background-color var(--ifm-transition-fast) diff --git a/src/theme/NavbarItem/ComponentTypes.js b/src/theme/NavbarItem/ComponentTypes.js index f00afbb0..2ab37e0c 100644 --- a/src/theme/NavbarItem/ComponentTypes.js +++ b/src/theme/NavbarItem/ComponentTypes.js @@ -8,6 +8,7 @@ import DocSidebarNavbarItem from "@theme/NavbarItem/DocSidebarNavbarItem"; import DocsVersionNavbarItem from "@theme/NavbarItem/DocsVersionNavbarItem"; import DocsVersionDropdownNavbarItem from "@theme/NavbarItem/DocsVersionDropdownNavbarItem"; import AccessibilityOptions from "@site/src/components/NavbarItem/AccessibilityOptions"; +import Spacer from "@site/src/components/NavbarItem/Spacer"; const ComponentTypes = { default: DefaultNavbarItem, @@ -23,4 +24,5 @@ const ComponentTypes = { export default { ...ComponentTypes, "custom-AccessibilityOptions": AccessibilityOptions, + "custom-Spacer": Spacer, };