●ご参考

汚いコードですが、参考までに。

add_action('wp_footer', function() {
  // ↓設定画面で設定した値を反映
  $dark  = get_theme_file_uri('/plugins/highlight-js/styles/tomorrow-night-bright.css');
  $light = get_theme_file_uri('/plugins/highlight-js/styles/tomorrow.css');

echo <<< EOF
<script id="my-darkmode">
// メディアクエリ
const osDark = window.matchMedia("(prefers-color-scheme: dark)");

// イベント発生
const listener = (event) => {
  // highlight.jsのCSSを切替
  if (event.matches) {

    // ダークモード用CSS切替
    var style = '<link id="my-dark" rel="stylesheet" href="{$dark}">';
    $('head link:last').after(style);
    $('#my-light').remove();

  } else {
    // ライトモード用CSS切替
    var style = '<link id="my-light" rel="stylesheet" href="{$light}">';
    $('head link:last').after(style);
    $('#my-dark').remove();
  }
};

// メディアクエリ監視
osDark.addEventListener("change", listener);
listener(osDark);
</script>

EOF;
});

返信ありがとうございます。

自分の知識不足でこのコードが何なのかを教えてほしいです。

コードを一つ一つ解説するのはかなり大変かと思います。
今はChatGPTみたいなものも無料で使えるので、ChatGPTにコードの内容を質問してみてはどうでしょうか。

例えば「以下のコードの意味を解説してください。」と書いてコードを貼れば添付画像みたいな感じに回答をくれます。
ここの細かなところが分からなければ同一スレッド内でさらに質問してみるかと良いかと思います。

投稿者:: @nanasina8

↑

コードのテーマを2つ設定できるようにできませんか？

＞わいひらさん

[Cocoon設定]→[コード]→ハイライトスタイル
をダークモード、ライトモードと2つ設定できたら、と言う要望です。
サポート有無の回答願います。

@nanasina8 さん

環境情報のご提示は可能でしょうか？

参考：不具合報告の際に添えていただけると嬉しい環境情報の取得方法

もしご提示が無理な場合は、何かスキンをお使いか教えていただけると助かります。もしかしたら、スキンの不具合かもしれません。

例えば、スキンの Simple‐Darkmode を使っている時は、Cocoon 設定 > コードの「ハイライトスタイル」で設定した色が反映されません。背景色と文字色が変になります。これはスキンの不具合のように思えます。

不具合箇所： https://github.com/xserver-inc/cocoon/blob/master/skins/simple-darkmode/scss/style.scss#L284-L289

Cocoon 設定 > コードのハイライト表示を反映するには、セレクターの修正が必要です。

/*ソースコード*/
pre.wp-block-code:where(:not(.hljs)),
pre:where(:not(.hljs)) {
  color: var(--text-main);
  background-color: var(--bg1);
}

了解です。simple - Dark モードを使っていました。

----------------------------------------------
サイト名：ななしのななしな
サイトURL： https://nanasina.com
ホームURL： https://nanasina.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/simple-darkmode/style.css
WordPressバージョン：6.4.1
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja-JP,ja;q=0.9,en-AU;q=0.8,en;q=0.7,en-US;q=0.6
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.8.4

投稿者:: @chu-ya

↑

●ご参考

汚いコードですが、参考までに。

add_action('wp_footer', function() {
  // ↓設定画面で設定した値を反映
  $dark  = get_theme_file_uri('/plugins/highlight-js/styles/tomorrow-night-bright.css');
  $light = get_theme_file_uri('/plugins/highlight-js/styles/tomorrow.css');

echo <<< EOF
<script id="my-darkmode">
// メディアクエリ
const osDark = window.matchMedia("(prefers-color-scheme: dark)");

// イベント発生
const listener = (event) => {
  // highlight.jsのCSSを切替
  if (event.matches) {

    // ダークモード用CSS切替
    var style = '<link id="my-dark" rel="stylesheet" href="{$dark}">';
    $('head link:last').after(style);
    $('#my-light').remove();

  } else {
    // ライトモード用CSS切替
    var style = '<link id="my-light" rel="stylesheet" href="{$light}">';
    $('head link:last').after(style);
    $('#my-dark').remove();
  }
};

// メディアクエリ監視
osDark.addEventListener("change", listener);
listener(osDark);
</script>

EOF;
});

変更できました！！ありがとうございます。でも背景が変わってないのでたしかに不具合かもしれません

@nanasina8 さん

スキン Simple‐Darkmode をお使いであれば、スキンの不具合だと思います。

修正が入ると思いますので、お待ちになるのがいいように思えます。少なくとも最初におっしゃっていた見づらくなるのは解消します。

ただ、「ライトモード用とダークモード用でコードのテーマを2つ設定できるようにできませんか？」は、カスタマイズで対応する必要があると思います。そもそも Cocoon デフォルトでは、ライトモードやダークモードはありません。

修正前と修正後を比較します。添付画像は、ハイライトスタイルで選択していらっしゃる tomorrow のケースです。

・現状のライトモード。文字は見えやすいですが、一部の文字色、そして背景色は tomorrow の色とは異なります。

投稿者:: @nanasina8

↑

ライトモード用とダークモード用でコードのテーマを2つ設定できるようにできませんか？

今のところこういった機能追加は考えておりません。
ライトモードとダークモードでテーマを切り替えるとなるとPHPででライトかダークを判別する必要があります。
ただ現在のところPHPオンリーでのそういう方法はないのではないかと思います。
JavaScriptを使用すれば可能といえば可能なのかもしれませんが、個人的にあまり良い方法には思えません。

Simple‐Darkmodeに関しては修正をしておきました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------