nushell / nushell/nushell.github.io

Color scheme toolbar button does not apply to code samples

Open
#2,209 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
258
Forks
561
Avg merge
3h 20m
Merged PRs (30d)
15

Description

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();
  }
})();

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No project files or tests are named. Start by locating the toolbar color-scheme switcher and the Shiki code blocks identified by data-highlighter="shiki"; trace how their theme variables are applied. Done means switching schemes changes code-sample text and backgrounds to remain legible, including the shown dark-background case.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
documentation, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.