Nüshu

TL;DR

Nüshu is a fork of the VSCode Github theme. The World isn't so Black or White, so why should our code backgrounds be.

About

Nüshu (this theme) is a fork of the VSCode Github theme, specifically the GitHub Light Default and GitHub Dark Default themes. This theme uses alternative background colors, which effectively reduce overall contrast. This theme uses the same Primer palette used in the GitHub Default themes for syntax, so both the Light and Dark variants of this theme should seem "familiar".

Theme Previews

Light / Dark

Classic

Hints

Italic Fonts

You can opt-in to italicizing certain tokens for Nüshu Light and Dark within settings.json, for example you can render Comments and Types in italic with the following VSCode settings:

{
  "editor.tokenColorCustomizations": {
    "[Nüshu Light][Nüshu Dark]": {
      "textMateRules": [
        {
          "name": "Italic Comments and Types",
          "scope": [
            "comment",
            "punctuation.definition.comment",
            "string.comment",
            "entity.name.type"
          ],
          "settings": {
            "fontStyle": "italic"
          }
        }
      ]
    }
  }
}

Note, Nüshu Classic italicizes certain tokens by default. You can opt-out of that if you wish with a similar approach to setting "editor.tokenColorCustomizations" as shown above.

Preferred Themes

Set Light / Dark Theme preferences in settings.json for toggling and detection with OS appearance.

{
  "workbench.preferredDarkColorTheme": "Nüshu Dark",
  "workbench.preferredLightColorTheme": "Nüshu Light"
}

Variable Font Goodness

If you are using a variable font with VSCode consider using "editor.fontVariations": true. Below is a code snippet that utilizes another extension called Settings on Theme Switch to switch font weights out based on light/dark theme settings.

{
  "editor.fontVariations": true,
  "settingsOnThemeSwitch.darkColorThemeSettings": {
    "editor.fontWeight": 375
  },
  "settingsOnThemeSwitch.lightColorThemeSettings": {
    "editor.fontWeight": 400
  }
}

Opinions

The Light/Dark themes do not color the following tokens (deviating from the GitHub Default Light/Dark themes in this regard):

"variable"
"punctuation.definition.list.begin.markdown"
"markup.changed" & "punctuation.definition.changed"
"entity.name", "meta.export.default", & "meta.definition.variable"

The rational for this change is to decrease the amount of colors being displayed on screen at once, with the aim being to keep syntax coloring meaningful in most use cases. IMHO, front end web development (eg. .tsx) can often yield too many colors, so by default this theme will default to a shade of gray (slightly lighter than the foreground color) for those tokens listed above. To customize this to your liking, you can simply patch the theme in settings.json any manner as follows to suit the desired appearance either "across the board", or conversely, just for specific file extensions/languages.

Additionally, comments are shown in color by default (cause I love to hear what people have to say I suppose 😊) in both the light/dark themes. If that isn't to your liking there is a snippet shown below to opt out of this behavior.

// Example: Orange Variables, similar to Github Default Light/Dark Syntax
{
  "editor.tokenColorCustomizations": {
    "[Nüshu Light]": {
      "textMateRules": [
        {
          "name": "Orange LightThm Syntax",
          "scope": [
            "variable",
            "punctuation.definition.list.begin.markdown",
            "markup.changed",
            "punctuation.definition.changed",
            "markup.changed",
            "punctuation.definition.changed",
            "entity.name",
            "meta.export.default",
            "meta.definition.variable"
          ],
          "settings": {
            "foreground": "#953800"
          }
        }
      ]
    },
    "[Nüshu Dark]": {
      "textMateRules": [
        {
          "name": "Orange DarkThm Syntax",
          "scope": [
            "variable",
            "punctuation.definition.list.begin.markdown",
            "markup.changed",
            "punctuation.definition.changed",
            "markup.changed",
            "punctuation.definition.changed",
            "entity.name",
            "meta.export.default",
            "meta.definition.variable"
          ],
          "settings": {
            "foreground": "#FFA657"
          }
        }
      ]
    }
  }
}

// Example: Bold Props with C Files
{
  "editor.tokenColorCustomizations": {
    "[Nüshu Light][Nüshu Dark]": {
      "textMateRules": [
        {
          "name": "Bold C Props",
          "scope": ["variable.parameter.c"],
          "settings": {
            "fontStyle": "bold"
          }
        }
      ]
    }
  }
}

// Example: Gray comments, similar to Github Default Light/Dark Syntax
{
  "editor.tokenColorCustomizations": {
    "[Nüshu Light]": {
      "textMateRules": [
        {
          "name": "Gray LightThm Comments",
          "scope": [
            "comment",
            "punctuation.definition.comment",
            "string.comment"
          ],
          "settings": {
            "foreground": "#6E7781"
          }
        }
      ]
    },
    "[Nüshu Dark]": {
      "textMateRules": [
        {
          "name": "Gray DarkThm Comments",
          "scope": [
            "comment",
            "punctuation.definition.comment",
            "string.comment"
          ],
          "settings": {
            "foreground": "#8B949E"
          }
        }
      ]
    }
  }
}

Extra

I'll likely be maintaining iTerm, One Markdown, and other such themes too that compliment the light/dark Nüshu themes. Find this repo on GitHub at link and take a look at the extra folder if those are of interest to you. Note, any Terminal themes I post in there will likely use the respective themes editor background color, not the background color used within the embedded VSCode terminal; it just makes more sense to me this way due to how the programs are used.

Attribution

The project name references Remembering Nüshu, the 19th-Century Chinese Script Only Women Could Write.

The font used in the Light/Dark code previews is Maple, and the font used in the Classic code preview is Sudo.

App Icon by Chase Lean, via OpenAI Logo Creator OpenAI

GitHub Theme VSCode theme, Pen Paper Coffee Atom theme, & Earthsong monkeytype theme.

wheredoesyourmindgo