Author: Erick Velez Date: 2026-02-13T14:42:12-08:00 New Revision: 7b01c69ccd659c3df250804a213212b66ba1cc56
URL: https://github.com/llvm/llvm-project/commit/7b01c69ccd659c3df250804a213212b66ba1cc56 DIFF: https://github.com/llvm/llvm-project/commit/7b01c69ccd659c3df250804a213212b66ba1cc56.diff LOG: [clang-doc] Change highlight.js theme for light or dark themes (#181317) Adds another `<link>` tag to load in a dark theme for highlight.js. The appropriate theme is then loaded for the current system theme. Using a dark theme for highlight.js in dark mode makes for a much better user experience since declaration text has a higher contrast compared to the dark background. Added: Modified: clang-tools-extra/clang-doc/assets/head-template.mustache clang-tools-extra/test/clang-doc/basic-project.mustache.test Removed: ################################################################################ diff --git a/clang-tools-extra/clang-doc/assets/head-template.mustache b/clang-tools-extra/clang-doc/assets/head-template.mustache index f0a8057a9c3dc..2ee4823fb77c1 100644 --- a/clang-tools-extra/clang-doc/assets/head-template.mustache +++ b/clang-tools-extra/clang-doc/assets/head-template.mustache @@ -8,7 +8,8 @@ <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";> + <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)"> <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/test/clang-doc/basic-project.mustache.test b/clang-tools-extra/test/clang-doc/basic-project.mustache.test index 4c882ef2e8384..8950f66068078 100644 --- a/clang-tools-extra/test/clang-doc/basic-project.mustache.test +++ b/clang-tools-extra/test/clang-doc/basic-project.mustache.test @@ -13,7 +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";> +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: <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> @@ -123,7 +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";> +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: <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> @@ -337,7 +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";> +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: <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> @@ -451,7 +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";> +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: <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
