Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Color scheme toolbar button does not apply to code samples

未关闭
  • 哪里不对？
#2,209 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
58/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
冷清
技术栈
css, typescript
领域
documentation, frontend

调研方向

未指定项目文件或测试。首先定位工具栏中的配色方案切换器，以及由 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 小时 43 分钟
30 天内合并 PR
12

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

nushell/nushell.github.io 的其他 Issue

查看 nushell/nushell.github.io 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。