Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Color scheme toolbar button does not apply to code samples

オープン
#2,209 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
58/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
css, typescript

調査の方向性

プロジェクトファイルやテストは指定されていません。まず、ツールバーのカラースキーム切り替えと、data-highlighter="shiki" によって識別される Shiki のコードブロックを見つけ、それらのテーマ変数がどのように適用されているかを追跡してください。スキームを切り替えるとコードサンプルのテキストと背景が変わり、表示されている暗い背景の場合も含めて、読みやすさが保たれれば完了です。

索引モデルが issue の本文から書いたものです。

説明

There's a color scheme switcher button in the toolbar that I found, but it doesn't do anything to the code samples. I'll use custom CSS to work around it, so not urgent for my use.

Picture - the text in the black box is not legible for me due to black background:

Image
User script to work around
// ==UserScript==
// @name         Nushell.sh readable code blocks (LLM-generated)
// @namespace    Violentmonkey Scripts
// @version      1.0.0
// @description  Force Nushell docs code blocks to use black text on white background
// @match        https://www.nushell.sh/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const STYLE_ID = 'vm-nushell-readable-code-blocks';

  function addStyle() {
    if (document.getElementById(STYLE_ID)) return;

    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = `
      /* Target Shiki blocks on nushell.sh */
      div[data-highlighter="shiki"],
      div[data-highlighter="shiki"] pre.shiki,
      div[data-highlighter="shiki"] code,
      div[data-highlighter="shiki"] span {
        color: #000 !important;
        background: #fff !important;
      }

      /* Override Shiki CSS variables used by theme switchers */
      div[data-highlighter="shiki"] {
        --shiki-light: #000 !important;
        --shiki-dark: #000 !important;
        --shiki-onedarkpro: #000 !important;
        --shiki-light-bg: #fff !important;
        --shiki-dark-bg: #fff !important;
        --shiki-onedarkpro-bg: #fff !important;
      }

      div[data-highlighter="shiki"] pre.shiki {
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
      }
    `;
    document.head.appendChild(style);
  }

  function fixInlineStyles(root = document) {
    const blocks = root.querySelectorAll('div[data-highlighter="shiki"]');
    for (const block of blocks) {
      block.style.setProperty('--shiki-light', '#000', 'important');
      block.style.setProperty('--shiki-dark', '#000', 'important');
      block.style.setProperty('--shiki-onedarkpro', '#000', 'important');
      block.style.setProperty('--shiki-light-bg', '#fff', 'important');
      block.style.setProperty('--shiki-dark-bg', '#fff', 'important');
      block.style.setProperty('--shiki-onedarkpro-bg', '#fff', 'important');

      const pre = block.querySelector('pre.shiki');
      if (pre) {
        pre.style.setProperty('color', '#000', 'important');
        pre.style.setProperty('background', '#fff', 'important');
      }

      const nodes = block.querySelectorAll('code, span');
      for (const node of nodes) {
        node.style.setProperty('color', '#000', 'important');
        node.style.setProperty('background', '#fff', 'important');
      }
    }
  }

  function init() {
    addStyle();
    fixInlineStyles();

    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        for (const node of mutation.addedNodes) {
          if (node.nodeType === 1) {
            fixInlineStyles(node);
          }
        }
      }
    });

    observer.observe(document.documentElement, {
      childList: true,
      subtree: true,
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init, { once: true });
  } else {
    init();
  }
})();
主要言語
TypeScript
スター
258
フォーク
561
平均マージ
3時間 20分
マージ済み PR(30日)
15

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nushell/nushell.github.io のほかの issue

nushell/nushell.github.io の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。