[clang-tools-extra] [clang-doc] Change highlight.js theme for light or dark themes (PR #181317)
Erick Velez via cfe-commits
cfe-commits at lists.llvm.org
Thu Feb 12 22:49:06 PST 2026
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 <erickvelez7 at gmail.com>
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>
More information about the cfe-commits
mailing list