https://github.com/evelez7 created https://github.com/llvm/llvm-project/pull/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. >From a8ef18bb72f178fa152e5e531316d437ebc6a95d Mon Sep 17 00:00:00 2001 From: Erick Velez <[email protected]> Date: Thu, 12 Feb 2026 22:46:54 -0800 Subject: [PATCH] [clang-doc] Change highlight.js theme for light or dark themes Adds another `<link>` tag to load in a dark theme for highlight.js. The appropriate theme is then loaded for the current system theme. --- .../clang-doc/assets/head-template.mustache | 3 ++- .../test/clang-doc/basic-project.mustache.test | 12 ++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) 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
