[clang-doc] Add button a toggle for light/dark theme#181587
Draft
[clang-doc] Add button a toggle for light/dark theme#181587
Conversation
ALso fixes a typo that caused some overflow issues even when there was no content to cause an overflow.
Member
|
@llvm/pr-subscribers-clang-tools-extra Author: Erick Velez (evelez7) ChangesAlso fixes a typo that caused some overflow issues even when there was no content to cause an overflow. Full diff: https://github.com/llvm/llvm-project/pull/181587.diff 3 Files Affected:
diff --git a/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css b/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css
index 19fba2f9eae76..69d1dad6d4b67 100644
--- a/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css
+++ b/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css
@@ -1,7 +1,7 @@
/* css for clang-doc mustache backend */
@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
-*,*::before *::after {
+*,*::before, *::after {
box-sizing:border-box
}
* {
@@ -88,6 +88,7 @@ html, body {
margin: 0;
padding: 0;
width: 100%;
+ overflow-x: scroll;
}
.container {
@@ -179,6 +180,13 @@ header {
justify-self:center
}
+#theme-toggle {
+ grid-column: 3;
+ justify-self: end;
+ color: var(--text1);
+ border: none;
+}
+
@media(max-width:768px) {
.navbar__menu {
flex-direction:column;
diff --git a/clang-tools-extra/clang-doc/assets/head-template.mustache b/clang-tools-extra/clang-doc/assets/head-template.mustache
index 2ee4823fb77c1..67fcfc565f2da 100644
--- a/clang-tools-extra/clang-doc/assets/head-template.mustache
+++ b/clang-tools-extra/clang-doc/assets/head-template.mustache
@@ -8,8 +8,9 @@
<script src="{{.}}"></script>
{{/Scripts}}
{{! Highlight.js dependency for syntax highlighting }}
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" media="(prefers-color-scheme: light)">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css" media="(prefers-color-scheme: dark)">
+ <link id="hljs-light-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
+ <link id="hljs-dark-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css" />
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=routine" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js"></script>
</head>
diff --git a/clang-tools-extra/clang-doc/assets/navbar-template.mustache b/clang-tools-extra/clang-doc/assets/navbar-template.mustache
index 666a4c3e93739..810fccf919942 100644
--- a/clang-tools-extra/clang-doc/assets/navbar-template.mustache
+++ b/clang-tools-extra/clang-doc/assets/navbar-template.mustache
@@ -12,6 +12,7 @@
</li>
</ul>
</div>
+ <button id="theme-toggle"><span class="material-symbols-rounded">routine</span></button>
</div>
{{#HasContexts}}
<div class="navbar-breadcrumb-container">
@@ -21,3 +22,53 @@
</div>
{{/HasContexts}}
</nav>
+<script>
+ const root = document.documentElement;
+ const toggle = document.getElementById("theme-toggle");
+ const hlLight = document.getElementById("hljs-light-theme");
+ const hlDark = document.getElementById("hljs-dark-theme");
+
+ function changeHighlightJS(theme) {
+ if (theme === "dark") {
+ hlDark.disabled = false;
+ hlLight.disabled = true;
+ } else {
+ hlDark.disabled = true;
+ hlLight.disabled = false;
+ }
+ }
+
+ // Listen to system theme changes.
+ // If the user manually toggles the theme, the theme wont change according
+ // to system changes.
+ const themeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ themeQuery.addEventListener("change", (event) => {
+ if (savedTheme === null) {
+ return;
+ } else if (event.matches) {
+ changeHighlightJS("dark");
+ } else {
+ changeHighlightJS("light");
+ }
+ });
+
+ toggle.onclick = () => {
+ const currentTheme = root.getAttribute("color-scheme");
+ const next = currentTheme === "dark" ? "light" : "dark";
+ changeHighlightJS(next);
+ root.setAttribute("color-scheme", next);
+ localStorage.setItem("theme", next);
+ };
+
+ document.addEventListener("DOMContentLoaded", () => {
+ const savedTheme = localStorage.getItem("theme");
+ const currentTheme = root.getAttribute("color-scheme");
+ if (savedTheme !== null) {
+ root.setAttribute("color-scheme", savedTheme);
+ changeHighlightJS(savedTheme);
+ } else {
+ root.setAttribute("color-scheme", currentTheme);
+ changeHighlightJS(currentTheme);
+ }
+ });
+</script>
|
🪟 Windows x64 Test Results
Failed Tests(click on a test name to see its output) Clang ToolsClang Tools.clang-doc/basic-project.mustache.testIf these failures are unrelated to your changes (for example tests are broken or flaky at HEAD), please open an issue at https://github.com/llvm/llvm-project/issues and add the |
🐧 Linux x64 Test Results
Failed Tests(click on a test name to see its output) Clang ToolsClang Tools.clang-doc/basic-project.mustache.testIf these failures are unrelated to your changes (for example tests are broken or flaky at HEAD), please open an issue at https://github.com/llvm/llvm-project/issues and add the |
Member
Author
|
This currently works, but I'm trying to prevent a flash of the unstyled content if the user toggles a manual theme change. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Also fixes a typo that caused some overflow issues even when there was no content to cause an overflow.