Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Color scheme toolbar button does not apply to code samples

Đang mở
  • Có gì không ổn?
#2,209 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
58/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
css, typescript
Lĩnh vực
documentation, frontend

Hướng nghiên cứu

Không có tệp dự án hoặc bài kiểm thử nào được nêu tên. Hãy bắt đầu bằng cách xác định bộ chuyển đổi bảng màu trên thanh công cụ và các khối mã Shiki được nhận diện bởi data-highlighter="shiki"; theo dõi cách các biến giao diện của chúng được áp dụng. Hoàn thành khi việc chuyển đổi bảng màu làm thay đổi văn bản và nền của các mẫu mã để chúng vẫn dễ đọc, bao gồm cả trường hợp nền tối được hiển thị.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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();
  }
})();
Ngôn ngữ chính
TypeScript
Star
260
Fork
563
Merge trung bình
5 giờ 9 phút
Pull request đã merge (30 ngày)
16

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của nushell/nushell.github.io

Tất cả issue của nushell/nushell.github.io

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.