From 38689e5cdfff6f44190aefbab89f7e9be70aa6b3 Mon Sep 17 00:00:00 2001 From: Paul Mucur Date: Thu, 27 Mar 2025 15:24:06 +0000 Subject: [PATCH 1/2] Only respect system colour scheme preferences Rather than implementing a JavaScript-based override on top of the default user preferences for colour schemes, rely entirely on the user preferences reported by the browser. This way, we can implement dark mode support in pure CSS and remove the dependency on JavaScript (without which, the site mistakenly would render in dark mode by default). --- jekyll-assets/_includes/theme.html | 3 - jekyll-assets/_layouts/boxes.html | 4 +- jekyll-assets/_layouts/docs.html | 2 - jekyll-assets/css/style.css | 138 +++++++++-------------------- jekyll-assets/scripts/theme.js | 38 -------- 5 files changed, 43 insertions(+), 142 deletions(-) delete mode 100644 jekyll-assets/_includes/theme.html delete mode 100644 jekyll-assets/scripts/theme.js diff --git a/jekyll-assets/_includes/theme.html b/jekyll-assets/_includes/theme.html deleted file mode 100644 index 7f5f4add2..000000000 --- a/jekyll-assets/_includes/theme.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
\ No newline at end of file diff --git a/jekyll-assets/_layouts/boxes.html b/jekyll-assets/_layouts/boxes.html index e82849b15..1dbdc9d81 100644 --- a/jekyll-assets/_layouts/boxes.html +++ b/jekyll-assets/_layouts/boxes.html @@ -4,14 +4,12 @@ {% include head.html %} - {% include header.html %}

Raspberry Pi Documentation

-
+
- {% include theme.html %}
{% include tabs.html %}
diff --git a/jekyll-assets/_layouts/docs.html b/jekyll-assets/_layouts/docs.html index 64d3237b0..7ea9e79af 100644 --- a/jekyll-assets/_layouts/docs.html +++ b/jekyll-assets/_layouts/docs.html @@ -4,7 +4,6 @@ {% include head.html %} - {% include header.html %}
@@ -20,7 +19,6 @@

- {% include theme.html %}

diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css index 96c618977..3caba1e13 100644 --- a/jekyll-assets/css/style.css +++ b/jekyll-assets/css/style.css @@ -1,44 +1,4 @@ :root { - --bg: #000000; - --near-bg: #111; - --top-title-colour: #343434; - --red-tint: #d75a64; - --brand-colour: #cd2355; - --code-bg-colour: #121212; - --code-bg-colour-transparent: rgba(18, 18, 18, 0.9); - --tab-bg-colour: #252535; - --toc-hover-colour: #353545; - --subtle: #707070; - --less-subtle: #333; - --home: #cd2355; - --rp2040-context-tag: #50C878; - --accent: #d75a64; - --docsearch-primary-color: var(--accent); - --docsearch-logo-color: var(--red-tint); - --copy-button-bg: #707070; - --copy-button-text: #CCC; - --textcolor: white; - --subtle-text: #CCC; - --theme-toggle-label: url("data:image/svg+xml;utf8,"); - --mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%23FFF' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E"); - - /* header and footer styling */ - --rptl-header-background-color: var(--bg); - --rptl-header-border-bottom-color: var(--code-bg-colour); - --rptl-header-text-color: var(--textcolor); - --rptl-header-burger-stroke-color: var(--textcolor); - --rptl-header-subnav-background-color: var(--near-bg); - --rptl-header-logo-text-fill: var(--textcolor); - --rptl-header-logo-leaf-fill: var(--bg); - --rptl-header-logo-berry-fill: var(--bg); - --rptl-cookiebanner-background-color: var(--code-bg-colour); - --rptl-cookiebanner-text-color: var(--textcolor); - --rptl-footer-background-color: #13131B; - --rptl-footer-text-color: var(--subtle-text); - - color: var(--textcolor); -} -.light { --bg: #fff; --near-bg: #f6f6f6; --red-tint: #d75a64; @@ -59,7 +19,6 @@ --copy-button-text: #444; --textcolor: black; --subtle-text: #444; - --theme-toggle-label: url("data:image/svg+xml;utf8,"); --mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='var(--textcolor)' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E"); /* header and footer styling */ @@ -77,7 +36,48 @@ --rptl-footer-text-color: var(--less-subtle); color: var(--textcolor); +} +@media (prefers-color-scheme: dark) { + :root { + --bg: #000000; + --near-bg: #111; + --top-title-colour: #343434; + --red-tint: #d75a64; + --brand-colour: #cd2355; + --code-bg-colour: #121212; + --code-bg-colour-transparent: rgba(18, 18, 18, 0.9); + --tab-bg-colour: #252535; + --toc-hover-colour: #353545; + --subtle: #707070; + --less-subtle: #333; + --home: #cd2355; + --rp2040-context-tag: #50C878; + --accent: #d75a64; + --docsearch-primary-color: var(--accent); + --docsearch-logo-color: var(--red-tint); + --copy-button-bg: #707070; + --copy-button-text: #CCC; + --textcolor: white; + --subtle-text: #CCC; + --mobile-menu-label: url("data:image/svg+xml,%3Csvg width='30px' height='40px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%23FFF' d='M20 5V2H0v3h20zm0 6V8H0v3h20zm0 6v-3H0v3h20z'/%3E%3C/g%3E%3C/svg%3E"); + + /* header and footer styling */ + --rptl-header-background-color: var(--bg); + --rptl-header-border-bottom-color: var(--code-bg-colour); + --rptl-header-text-color: var(--textcolor); + --rptl-header-burger-stroke-color: var(--textcolor); + --rptl-header-subnav-background-color: var(--near-bg); + --rptl-header-logo-text-fill: var(--textcolor); + --rptl-header-logo-leaf-fill: var(--bg); + --rptl-header-logo-berry-fill: var(--bg); + --rptl-cookiebanner-background-color: var(--code-bg-colour); + --rptl-cookiebanner-text-color: var(--textcolor); + --rptl-footer-background-color: #13131B; + --rptl-footer-text-color: var(--subtle-text); + + color: var(--textcolor); + } } body { @@ -213,17 +213,12 @@ div.subtitle p { justify-content: center; } -/* boxes page, constrain search bar/theme toggle line to a reasonable size */ -body > .toptitle > #search-theme-toggle-container { +#search-container { width: 50%; margin: auto; max-width: 900px; } -body > .toptitle > #search-theme-toggle-container > #theme-toggle-container { - flex-grow: 0; -} - #docs-container { position: relative; flex-grow: 1; @@ -285,53 +280,10 @@ pre { align-content: center; } -#theme-toggle { - border-radius: 3px; - padding: 5px; -} - -#theme-toggle:hover { - background-color: var(--toc-hover-colour); - text-decoration: none; -} - -#search-theme-toggle-container { - display: flex; - flex-direction: row; - gap: 20px; - align-items: center; - justify-content: center; -} - -#theme-toggle-container { - align-self: center; - align-items: start; - display: block; -} - #docsearch { flex-grow: 1; } -#search-theme-toggle-container #theme-toggle-container::after { - height: 100%; -} - -#theme-toggle-header { - font-family: monospace; -} - -#theme-toggle-header { - content: var(--theme-toggle-label); -} - -#theme-toggle span { - display: none; -} -#theme-toggle { - content: var(--theme-toggle-label); -} - .toc-toggle-container { display: flex; align-items: center; @@ -1503,12 +1455,6 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 { padding-right: 5px; } - #theme-toggle-container { - display: block; - padding-left: 5px; - padding-right: 5px; - } - .toc { height: auto; } diff --git a/jekyll-assets/scripts/theme.js b/jekyll-assets/scripts/theme.js deleted file mode 100644 index 42f110893..000000000 --- a/jekyll-assets/scripts/theme.js +++ /dev/null @@ -1,38 +0,0 @@ -// toggles the site theme between dark and light -function toggleTheme() { - var cookiePermission = document.cookie.indexOf("cookiebanner_accepted=1"); - - // fetch the theme from local storage (if it exists) - var theme = localStorage.getItem('theme'); - // if the theme has never been set, or is light, set the theme to the dark symbol in local storage to change it - if (localStorage.getItem('theme') !== null && theme == '🌝' ) { - if (cookiePermission != -1) { - localStorage.setItem('theme', '🌚'); - } - } else { - if (cookiePermission != -1) { - // otherwise, the theme is currently set to dark, so set the theme to the light symbol in local storage to change it - localStorage.setItem('theme', '🌝'); - } - } - // finally, toggle the light option off or on the body to change the display of the theme - document.body.classList.toggle('light'); -} - -// initialises the site theme display -// of key interest here: from the user's perspective, the site defaults to the light theme... -// ...unless your browser uses prefers-color-scheme to ask for a dark theme -// from the site's perspective, we default to a dark theme, but toggle it to a light theme on load if the user doesn't ask for dark. -// why do this? To prevent an annoying light 'flash' for dark theme users. light theme users don't really notice or care if there's a dark anti-flash. -function initTheme() { - // fetch the theme from local storage (if it exists) - var theme = localStorage.getItem('theme'); - // if the theme has been set to light (null check to short circuit if not set) - if(theme !== null && theme === '🌝' - // if we can use matchMedia and the browser supports the dark color scheme - || (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) - && theme !== '🌚') { - // toggles the theme from the default dark mode to the light version (which actually _shows_ by default to many users) - document.body.classList.toggle('light'); - } -} \ No newline at end of file From 4853d9eba478f2d8b6690f1ed717cf2ee2d429a5 Mon Sep 17 00:00:00 2001 From: Paul Mucur Date: Thu, 27 Mar 2025 15:30:03 +0000 Subject: [PATCH 2/2] Add spacing around top-level header Rather than squashing the "Raspberry Pi Documentation" header, search bar and tab menu altogether, add some spacing between each element to be more consistent with our other sites. --- jekyll-assets/css/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css index 3caba1e13..ee355de6e 100644 --- a/jekyll-assets/css/style.css +++ b/jekyll-assets/css/style.css @@ -134,13 +134,12 @@ code { .toptitle h1 { font-size: 2.5em; - font-weight: lighter; - letter-spacing: 1px; + font-weight: 300; color: var(--bg); position: relative; margin-top: 0px; text-align: center; - padding-top: 10px; + padding-top: 40px; margin-left: 10px; flex-grow: 1; } @@ -215,7 +214,7 @@ div.subtitle p { #search-container { width: 50%; - margin: auto; + margin: 20px auto 0; max-width: 900px; } @@ -1665,6 +1664,7 @@ div#tab-menu { width: 100%; height: 80px; margin-bottom: -28px; + margin-top: 20px; } ul#tab-container {