From f8d1f02f412333a239ec70794368a895be3740a6 Mon Sep 17 00:00:00 2001 From: Wim Looman Date: Mon, 18 Mar 2024 10:59:14 +0100 Subject: [PATCH 1/6] Fix indentation --- templates/theme.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/theme.js b/templates/theme.js index 6563213ef..011f0cabb 100644 --- a/templates/theme.js +++ b/templates/theme.js @@ -1,18 +1,18 @@ function applyTheme(theme) { - document.documentElement.dataset.theme = theme; + document.documentElement.dataset.theme = theme; } window.addEventListener('storage', function (ev) { - if (ev.key === 'rustdoc-theme') { - applyTheme(ev.newValue); - } + if (ev.key === 'rustdoc-theme') { + applyTheme(ev.newValue); + } }); // see ./storage-change-detection.html for details window.addEventListener('message', function (ev) { - if (ev.data && ev.data.storage && ev.data.storage.key === 'rustdoc-theme') { - applyTheme(ev.data.storage.value); - } + if (ev.data && ev.data.storage && ev.data.storage.key === 'rustdoc-theme') { + applyTheme(ev.data.storage.value); + } }); applyTheme(window.localStorage.getItem('rustdoc-theme')); From 493b622c116f290513ae0cfd6ff3a7a526ff2f58 Mon Sep 17 00:00:00 2001 From: Wim Looman Date: Mon, 18 Mar 2024 11:03:44 +0100 Subject: [PATCH 2/6] Don't pollute the global function namespace with theme functions --- templates/theme.js | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/templates/theme.js b/templates/theme.js index 011f0cabb..208abfce5 100644 --- a/templates/theme.js +++ b/templates/theme.js @@ -1,18 +1,20 @@ -function applyTheme(theme) { - document.documentElement.dataset.theme = theme; -} - -window.addEventListener('storage', function (ev) { - if (ev.key === 'rustdoc-theme') { - applyTheme(ev.newValue); +(function() { + function applyTheme(theme) { + document.documentElement.dataset.theme = theme; } -}); -// see ./storage-change-detection.html for details -window.addEventListener('message', function (ev) { - if (ev.data && ev.data.storage && ev.data.storage.key === 'rustdoc-theme') { - applyTheme(ev.data.storage.value); - } -}); + window.addEventListener('storage', function (ev) { + if (ev.key === 'rustdoc-theme') { + applyTheme(ev.newValue); + } + }); + + // see ./storage-change-detection.html for details + window.addEventListener('message', function (ev) { + if (ev.data && ev.data.storage && ev.data.storage.key === 'rustdoc-theme') { + applyTheme(ev.data.storage.value); + } + }); -applyTheme(window.localStorage.getItem('rustdoc-theme')); + applyTheme(window.localStorage.getItem('rustdoc-theme')); +})() From 3f74bca54c1f1d48de9f61db2936a41d15cec22e Mon Sep 17 00:00:00 2001 From: Wim Looman Date: Mon, 18 Mar 2024 11:04:04 +0100 Subject: [PATCH 3/6] Only set theme if configured --- templates/theme.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/templates/theme.js b/templates/theme.js index 208abfce5..ddb4a5396 100644 --- a/templates/theme.js +++ b/templates/theme.js @@ -1,6 +1,8 @@ (function() { function applyTheme(theme) { - document.documentElement.dataset.theme = theme; + if (theme) { + document.documentElement.dataset.theme = theme; + } } window.addEventListener('storage', function (ev) { From 276ecce7441b835d85179daaadb84364643fbd9a Mon Sep 17 00:00:00 2001 From: Wim Looman Date: Mon, 18 Mar 2024 11:05:15 +0100 Subject: [PATCH 4/6] Use namespaced data variable to store docs.rs' theme --- templates/style/_syntax-themes.scss | 6 +++--- templates/style/_themes.scss | 6 +++--- templates/theme.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/style/_syntax-themes.scss b/templates/style/_syntax-themes.scss index ac6dc076e..039769de2 100644 --- a/templates/style/_syntax-themes.scss +++ b/templates/style/_syntax-themes.scss @@ -17,10 +17,10 @@ html { --color-syntax-string: #718c00; } -// To add a new theme, copy the above theme into a new `html[data-theme="name"]` +// To add a new theme, copy the above theme into a new `html[data-docs-rs-theme="name"]` // block below and change the colors -html[data-theme="dark"] { +html[data-docs-rs-theme="dark"] { --color-syntax-foreground: inherit; --color-syntax-attribute: #ee6868; --color-syntax-background: #2a2a2a; @@ -39,7 +39,7 @@ html[data-theme="dark"] { --color-syntax-string: #83a300; } -html[data-theme="ayu"] { +html[data-docs-rs-theme="ayu"] { --color-syntax-foreground: #e6e1cf; --color-syntax-attribute: #e6e1cf; --color-syntax-background: #191f26; diff --git a/templates/style/_themes.scss b/templates/style/_themes.scss index 2559f1e10..5530ebdca 100644 --- a/templates/style/_themes.scss +++ b/templates/style/_themes.scss @@ -32,10 +32,10 @@ html { --chart-grid: #ddd; } -// To add a new theme, copy the above theme into a new `html[data-theme="name"]` +// To add a new theme, copy the above theme into a new `html[data-docs-rs-theme="name"]` // block below and change the colors -html[data-theme="dark"] { +html[data-docs-rs-theme="dark"] { color-scheme: dark; --color-background-code: #2a2a2a; --color-background: #353535; @@ -68,7 +68,7 @@ html[data-theme="dark"] { --chart-grid: #4e4e4e; } -html[data-theme="ayu"] { +html[data-docs-rs-theme="ayu"] { color-scheme: dark; --color-background-code: #191f26; --color-background: #0f1419; diff --git a/templates/theme.js b/templates/theme.js index ddb4a5396..ec199fab8 100644 --- a/templates/theme.js +++ b/templates/theme.js @@ -1,7 +1,7 @@ (function() { function applyTheme(theme) { if (theme) { - document.documentElement.dataset.theme = theme; + document.documentElement.dataset.docsRsTheme = theme; } } From cf814b179ee4f95e6aedd08ac9cce7a511f344a4 Mon Sep 17 00:00:00 2001 From: Wim Looman Date: Mon, 18 Mar 2024 11:05:45 +0100 Subject: [PATCH 5/6] Don't lazy-load storage-change-detection Lazy loading combined with display:none results in it never actually getting loaded --- templates/rustdoc/body.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/rustdoc/body.html b/templates/rustdoc/body.html index 7fa746bf6..edf35f4ad 100644 --- a/templates/rustdoc/body.html +++ b/templates/rustdoc/body.html @@ -1,4 +1,4 @@ {# see comment in ../storage-change-detection.html for details #} - + From 3c90b37ac3eb624dd77fb60175ff101acfe95017 Mon Sep 17 00:00:00 2001 From: Wim Looman Date: Mon, 18 Mar 2024 11:48:41 +0100 Subject: [PATCH 6/6] Add gui-test for theme changing --- gui-tests/theme.goml | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 gui-tests/theme.goml diff --git a/gui-tests/theme.goml b/gui-tests/theme.goml new file mode 100644 index 000000000..8684cc2cc --- /dev/null +++ b/gui-tests/theme.goml @@ -0,0 +1,18 @@ +// setting local-storage emulates how we detect rustdoc changing the theme, we +// only run this detection on rustdoc pages so must change there before visiting +// other pages + +// on rustdoc pages we only control the .nav-container and its descendants, on +// the crate page we control the whole page + +go-to: |DOC_PATH| + "/sysinfo" +set-local-storage: { "rustdoc-theme": null } +wait-for-css: (".nav-container", { "background-color": "rgb(255, 255, 255)" }) +go-to: |DOC_PATH| + "/crate/sysinfo" +wait-for-css: ("body", { "background-color": "rgb(255, 255, 255)" }) + +go-to: |DOC_PATH| + "/sysinfo" +set-local-storage: { "rustdoc-theme": "ayu" } +wait-for-css: (".nav-container", { "background-color": "rgb(15, 20, 25)" }) +go-to: |DOC_PATH| + "/crate/sysinfo" +wait-for-css: ("body", { "background-color": "rgb(15, 20, 25)" })