From d93fbc0f6b170ecdc7ed9af9f3eb33b7c6f7d06e Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Wed, 23 Oct 2024 18:16:52 +0200 Subject: [PATCH] Improve theme support when JS is disabled --- src/theme/css/chrome.css | 13 ++++++------- src/theme/css/variables.css | 6 ++++-- src/theme/index.hbs | 15 ++++++--------- 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css index 7a2b343222..b31ec6f303 100644 --- a/src/theme/css/chrome.css +++ b/src/theme/css/chrome.css @@ -40,9 +40,9 @@ a > .hljs { border-block-end-style: solid; } #menu-bar.sticky, -.js #menu-bar-hover-placeholder:hover + #menu-bar, -.js #menu-bar:hover, -.js.sidebar-visible #menu-bar { +#menu-bar-hover-placeholder:hover + #menu-bar, +#menu-bar:hover, +html.sidebar-visible #menu-bar { position: -webkit-sticky; position: sticky; top: 0 !important; @@ -91,7 +91,7 @@ a > .hljs { display: flex; margin: 0 5px; } -.no-js .left-buttons button { +html:not(.js) .left-buttons button { display: none; } @@ -107,7 +107,7 @@ a > .hljs { overflow: hidden; text-overflow: ellipsis; } -.js .menu-title { +.menu-title { cursor: pointer; } @@ -427,8 +427,7 @@ ul#searchresults span.teaser em { -ms-user-select: none; user-select: none; } -.no-js .sidebar, -.js:not(.sidebar-resizing) .sidebar { +html:not(.sidebar-resizing) .sidebar { transition: transform 0.3s; /* Animation: slide away */ } .sidebar code { diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css index afa974eb8d..12d1db7a33 100644 --- a/src/theme/css/variables.css +++ b/src/theme/css/variables.css @@ -112,7 +112,7 @@ --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); } -.light { +.light, html:not(.js) { --bg: hsl(0, 0%, 100%); --fg: hsl(0, 0%, 0%); @@ -258,7 +258,7 @@ } @media (prefers-color-scheme: dark) { - .light.no-js { + html:not(.js) { --bg: hsl(200, 7%, 8%); --fg: #98a3ad; @@ -299,6 +299,8 @@ --searchresults-li-bg: #2b2b2f; --search-mark-bg: #355c7d; + --color-scheme: dark; + /* Same as `--icons` */ --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); /* Same as `--sidebar-active` */ diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 080b78516a..86b824e6a1 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -1,5 +1,5 @@ - + @@ -53,7 +53,7 @@ {{/if}} - +