The code blocks are hard to read in dark mode.

Nodeloc

The issue

The code block is too hard to read in dark mode.

Example

I can modify /vendor/s9e/text-formatter/src/Plugins/BBCodes/Configurator/repository.xml to change the style to github-dark.css.But If I do like this it will be hard to read in light mode.

So how to use github.css for Highlight.js in light mode and github-dark.css in dark mode?

Thank you.

	<!-- [CODE] BBCode, uses highlight.js for highlighting: https://highlightjs.org/ -->
	<bbcode name="CODE">
		<usage>[CODE lang={IDENTIFIER?}]{TEXT}[/CODE]</usage>
		<template><![CDATA[
			<pre data-s9e-livepreview-hash="" data-s9e-livepreview-onupdate="if(window['hljsLoader'])window['hljsLoader']['highlightBlocks'](this)">
				<code>
					<xsl:if test="@lang">
						<xsl:attribute name="class">language-<xsl:value-of select="@lang"/></xsl:attribute>
					</xsl:if>
					<xsl:apply-templates />
				</code>
				<script async="" crossorigin="anonymous">
					<xsl:if test="'default' != ']]><var name='style' description='highlight.js style name (or &quot;none&quot;)'>github-dark</var><![CDATA['">
						<xsl:attribute name="data-hljs-style">]]>
							<var name='style'>github-dark</var>
						<![CDATA[</xsl:attribute>
					</xsl:if>
					<xsl:if test="'https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/' != ']]><var name='url' description='highlight.js CDN URL'>https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/</var><![CDATA['">
						<xsl:attribute name="data-hljs-url">]]>
							<var name='url'>https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/</var>
						<![CDATA[</xsl:attribute>
					</xsl:if>
					<xsl:attribute name="data-s9e-livepreview-onrender">if(window['hljsLoader'])this.parentNode.removeChild(this)</xsl:attribute>
					<xsl:attribute name="integrity">sha384-E9ssooeJ4kPel3JD7st0BgS50OLWFEdg4ZOp8lYPy52ctQazOIV37TCvzV8l4cYG</xsl:attribute>
					<xsl:attribute name="src">https://fastly.jsdelivr.net/gh/s9e/hljs-loader@1.0.34/loader.min.js</xsl:attribute>
				</script>
			</pre>
		]]></template>
	</bbcode>

Nodeloc

I fix it with change fof/nightmode .

Demo: https://www.nodeloc.com/d/670

Subarist

Nodeloc
Tks.
Then, where should I modify the code?

export function setStyle(type) {
    const lightUrl = 'https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css';
    const darkUrl = 'https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css';

    const highlightJsLink = document.querySelector('link[href*="highlightjs"]');

    const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const initialType = type === 'auto' ? (preferDark ? 'night' : 'day') : type;

    if (!highlightJsLink && type === 'night') {
        // 如果highlightJsLink不存在且type为'night'，则创建新的<link>元素
        const newCodeCssLink = document.createElement('link');
        newCodeCssLink.rel = 'stylesheet';
        newCodeCssLink.href = darkUrl;
        document.body.insertBefore(newCodeCssLink, document.body.firstChild);
    } else {
        const bodyHighlightJsLink = document.body.querySelector('link[href*="highlightjs"]');
        if (bodyHighlightJsLink) {
            // 从<body>中移除包含 highlightjs 的 <link> 元素
            bodyHighlightJsLink.parentNode.removeChild(bodyHighlightJsLink);
        }
    }

    const light = document.querySelector('link.nightmode-light[rel=stylesheet]');
    const dark = document.querySelector('link.nightmode-dark[rel=stylesheet]');

    const url = getUrls()[type];

    if (light && dark) {
        // 如果存在 light 和 dark 两种样式表，则替换为新的样式表
        highlightJsLink.href = darkUrl; // 切换到暗色模式的 highlight.js 样式表
        const newLink = document.createElement('link');
        newLink.rel = 'stylesheet';
        newLink.className = 'nightmode';
        newLink.href = url;

        // 根据浏览器支持情况进行样式表加载处理
        if ('onload' in newLink) {
            newLink.onload = function () {
                light.remove();
                dark.remove();
            };
        } else {
            light.remove();
            dark.remove();
        }

        document.head.append(newLink);
    } else {
        // 如果只存在单一的样式表，则更新其 href 属性即可
        const el = light || dark || document.querySelector('link.nightmode[rel=stylesheet]');
        if (url !== el.href) {
            el.href = url;
            el.className = 'nightmode';
            highlightJsLink.href = type === 'night' ? darkUrl : lightUrl; // 根据模式切换到对应的 highlight.js 样式表
        }
    }

    const colorScheme = document.querySelector('meta[name="color-scheme"]');
    if (colorScheme) {
        colorScheme.content = type === 'night' ? 'dark' : 'light';
    }

    // 触发自定义事件
    const event = new CustomEvent('fofnightmodechange', {detail: type});
    document.dispatchEvent(event);
}

Nodeloc

Subarist You should clone the project fof/nightmode and modify the file in js/src/common/setSelectedTheme.js and repack the JS.