https://github.com/evelez7 updated https://github.com/llvm/llvm-project/pull/181587
>From e64e2bc8f1c4fdf77a403f2a13cf2676f792536e Mon Sep 17 00:00:00 2001 From: Erick Velez <[email protected]> Date: Fri, 13 Feb 2026 19:14:54 -0800 Subject: [PATCH 1/3] [clang-doc] Add button a toggle for light/dark theme ALso fixes a typo that caused some overflow issues even when there was no content to cause an overflow. --- .../clang-doc/assets/clang-doc-mustache.css | 10 +++- .../clang-doc/assets/head-template.mustache | 5 +- .../clang-doc/assets/navbar-template.mustache | 51 +++++++++++++++++++ 3 files changed, 63 insertions(+), 3 deletions(-) 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> >From b4f31e4233737e1cf2f12f4b5b13d89b826e678f Mon Sep 17 00:00:00 2001 From: Erick Velez <[email protected]> Date: Sun, 15 Feb 2026 22:36:11 -0800 Subject: [PATCH 2/3] update dark light toggle --- .../clang-doc/assets/clang-doc-mustache.css | 2 +- .../clang-doc/assets/head-template.mustache | 45 +++++++++++++++++++ .../clang-doc/assets/navbar-template.mustache | 45 +------------------ 3 files changed, 48 insertions(+), 44 deletions(-) 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 69d1dad6d4b67..caaac3ef375f9 100644 --- a/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css +++ b/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css @@ -180,7 +180,7 @@ header { justify-self:center } -#theme-toggle { +#themeToggle { grid-column: 3; justify-self: end; color: var(--text1); diff --git a/clang-tools-extra/clang-doc/assets/head-template.mustache b/clang-tools-extra/clang-doc/assets/head-template.mustache index 67fcfc565f2da..d1aba0ada335e 100644 --- a/clang-tools-extra/clang-doc/assets/head-template.mustache +++ b/clang-tools-extra/clang-doc/assets/head-template.mustache @@ -10,6 +10,51 @@ {{! Highlight.js dependency for syntax highlighting }} <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"; /> + <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; + } + } + + const savedTheme = localStorage.getItem("theme"); + const themeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + if (savedTheme !== null) { + root.setAttribute("color-scheme", savedTheme); + changeHighlightJS(savedTheme); + } else { + let initialTheme; + if (themeQuery.matches) { + initialTheme = "dark"; + } else { + initialTheme = "light"; + } + root.setAttribute("color-scheme", initialTheme); + changeHighlightJS(initialTheme); + } + + // Listen to system theme changes. + // If the user manually toggles the theme, the theme wont change according + // to system changes. + themeQuery.addEventListener("change", (event) => { + if (savedTheme === null) { + return; + } else if (event.matches) { + changeHighlightJS("dark"); + } else { + changeHighlightJS("light"); + } + }); + </script> <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> diff --git a/clang-tools-extra/clang-doc/assets/navbar-template.mustache b/clang-tools-extra/clang-doc/assets/navbar-template.mustache index 810fccf919942..f8182f7afddb0 100644 --- a/clang-tools-extra/clang-doc/assets/navbar-template.mustache +++ b/clang-tools-extra/clang-doc/assets/navbar-template.mustache @@ -12,7 +12,7 @@ </li> </ul> </div> - <button id="theme-toggle"><span class="material-symbols-rounded">routine</span></button> + <button id="themeToggle"><span class="material-symbols-rounded">routine</span></button> </div> {{#HasContexts}} <div class="navbar-breadcrumb-container"> @@ -23,52 +23,11 @@ {{/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 = () => { + themeToggle.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> >From 02ee0e9c19c04d11086816e8f6c7b2da44a8c0bb Mon Sep 17 00:00:00 2001 From: Erick Velez <[email protected]> Date: Thu, 5 Mar 2026 16:41:42 -0800 Subject: [PATCH 3/3] fix flashing --- .../clang-doc/assets/head-template.mustache | 36 ++++++++----------- .../clang-doc/basic-project.mustache.test | 16 ++++----- 2 files changed, 23 insertions(+), 29 deletions(-) diff --git a/clang-tools-extra/clang-doc/assets/head-template.mustache b/clang-tools-extra/clang-doc/assets/head-template.mustache index d1aba0ada335e..7a0095f0e947c 100644 --- a/clang-tools-extra/clang-doc/assets/head-template.mustache +++ b/clang-tools-extra/clang-doc/assets/head-template.mustache @@ -1,6 +1,15 @@ <head> <meta charset="utf-8"/> <title>{{Name}}</title> + <script data-cfasync="false"> + (function() { + const root = document.documentElement; + const savedTheme = localStorage.getItem("theme"); + const theme = savedTheme || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); + root.setAttribute("color-scheme", theme); + window.__clangDocTheme = theme; + })(); + </script> {{#Stylesheets}} <link rel="stylesheet" type="text/css" href="{{.}}"/> {{/Stylesheets}} @@ -12,7 +21,6 @@ <link id="hljs-dark-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"; /> <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"); @@ -26,33 +34,19 @@ } } - const savedTheme = localStorage.getItem("theme"); + changeHighlightJS(window.__clangDocTheme); const themeQuery = window.matchMedia("(prefers-color-scheme: dark)"); - if (savedTheme !== null) { - root.setAttribute("color-scheme", savedTheme); - changeHighlightJS(savedTheme); - } else { - let initialTheme; - if (themeQuery.matches) { - initialTheme = "dark"; - } else { - initialTheme = "light"; - } - root.setAttribute("color-scheme", initialTheme); - changeHighlightJS(initialTheme); - } - // Listen to system theme changes. // If the user manually toggles the theme, the theme wont change according // to system changes. themeQuery.addEventListener("change", (event) => { - if (savedTheme === null) { + if (localStorage.getItem("theme") !== null) { return; - } else if (event.matches) { - changeHighlightJS("dark"); - } else { - changeHighlightJS("light"); } + + const theme = event.matches ? "dark" : "light"; + root.setAttribute("color-scheme", theme); + changeHighlightJS(theme); }); </script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=routine"; /> diff --git a/clang-tools-extra/test/clang-doc/basic-project.mustache.test b/clang-tools-extra/test/clang-doc/basic-project.mustache.test index 8950f66068078..d3e8a4b6d57d6 100644 --- a/clang-tools-extra/test/clang-doc/basic-project.mustache.test +++ b/clang-tools-extra/test/clang-doc/basic-project.mustache.test @@ -13,8 +13,8 @@ HTML-SHAPE: <meta charset="utf-8"/> HTML-SHAPE: <title>Shape</title> HTML-SHAPE: <link rel="stylesheet" type="text/css" href="../clang-doc-mustache.css"/> HTML-SHAPE: <script src="../mustache-index.js"></script> -HTML-SHAPE: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"; media="(prefers-color-scheme: light)"> -HTML-SHAPE: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"; media="(prefers-color-scheme: dark)"> +HTML-SHAPE: <link id="hljs-light-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"; /> +HTML-SHAPE: <link id="hljs-dark-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"; /> HTML-SHAPE: <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js";></script> HTML-SHAPE: <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js";></script> HTML-SHAPE: </head> @@ -124,8 +124,8 @@ HTML-CALC: <meta charset="utf-8"/> HTML-CALC: <title>Calculator</title> HTML-CALC: <link rel="stylesheet" type="text/css" href="../clang-doc-mustache.css"/> HTML-CALC: <script src="../mustache-index.js"></script> -HTML-CALC: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"; media="(prefers-color-scheme: light)"> -HTML-CALC: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"; media="(prefers-color-scheme: dark)"> +HTML-CALC: <link id="hljs-light-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"; /> +HTML-CALC: <link id="hljs-dark-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"; /> HTML-CALC: <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js";></script> HTML-CALC: <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js";></script> HTML-CALC: </head> @@ -339,8 +339,8 @@ HTML-RECTANGLE: <meta charset="utf-8"/> HTML-RECTANGLE: <title>Rectangle</title> HTML-RECTANGLE: <link rel="stylesheet" type="text/css" href="../clang-doc-mustache.css"/> HTML-RECTANGLE: <script src="../mustache-index.js"></script> -HTML-RECTANGLE: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"; media="(prefers-color-scheme: light)"> -HTML-RECTANGLE: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"; media="(prefers-color-scheme: dark)"> +HTML-RECTANGLE: <link id="hljs-light-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"; /> +HTML-RECTANGLE: <link id="hljs-dark-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"; /> HTML-RECTANGLE: <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js";></script> HTML-RECTANGLE: <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js";></script> HTML-RECTANGLE: </head> @@ -454,8 +454,8 @@ HTML-CIRCLE: <meta charset="utf-8"/> HTML-CIRCLE: <title>Circle</title> HTML-CIRCLE: <link rel="stylesheet" type="text/css" href="../clang-doc-mustache.css"/> HTML-CIRCLE: <script src="../mustache-index.js"></script> -HTML-CIRCLE: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"; media="(prefers-color-scheme: light)"> -HTML-CIRCLE: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"; media="(prefers-color-scheme: dark)"> +HTML-CIRCLE: <link id="hljs-light-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"; /> +HTML-CIRCLE: <link id="hljs-dark-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"; /> HTML-CIRCLE: <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js";></script> HTML-CIRCLE: <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js";></script> HTML-CIRCLE: </head> _______________________________________________ cfe-commits mailing list [email protected] https://lists.llvm.org/cgi-bin/mailman/listinfo/cfe-commits
