Visual Studio Code

Yotei Midnight

A cross-application theme rendered from source files where available. Switch between code samples to see how the editor palette behaves in real snippets.

Appearance dark Source Visual Studio Code

Yotei Midnight

yotei / preview / theme-preview.ts

type Theme = {
  name: string;
  accent: string;
  previewable: boolean;
};

const yotei: Theme = {
  name: "Yotei",
  accent: "#FD4200",
  previewable: true
};

export function describe(theme: Theme) {
  return `${theme.name} glows at dawn.`;
}

---
const { name, accent } = Astro.props;
---

<article class="theme-card" style={`--accent: ${accent}`}>
  <p>Featured theme</p>
  <h2>{name}</h2>
  <a href={`/themes/${name.toLowerCase()}`}>Preview</a>
</article>

#[derive(Debug)]
struct Color<'a> {
    name: &'a str,
    value: &'a str,
}

fn main() {
    let accent = Color {
        name: "sunrise",
        value: "#FD4200",
    };

    println!("{:?}", accent);
}

{
  "name": "Yotei",
  "type": "dark",
  "colors": {
    "editor.background": "#211925",
    "editor.foreground": "#FEF7FF",
    "focusBorder": "#FD4200"
  }
}

# Yotei

A **dark theme** inspired by a purple/red sky at dawn.

- Editor UI preview
- Syntax highlighting
- Terminal palette

> Built to feel warm, calm, and sharp.

Terminal

➜ yotei git:(main) npm run build
✓ Generated previews from theme source

Yotei Midnight UTF-8 dark

Beyond the editor

Yotei across applications

const theme = "Yotei";

editor

Visual Studio Code

The original editor theme with full UI and syntax colors.

Install guide

Yotei Docs

Google Chrome

browser

Google Chrome

Browser frame, toolbar, tab text, and new tab colors.

Open store Install guide

Yotei Docs

Firefox

browser

Firefox

Firefox frame, toolbar, bookmark, and active tab colors.

Open store Install guide

➜ yotei echo "dawn"
dawn

terminal

Windows Terminal

Terminal foreground, background, cursor, selection, and ANSI palette.

Install guide

Zenky

Yotei is now available everywhere.

chat

Slack

Slack sidebar theme values ready to paste into Slack preferences. #211925,#4D4352,#CC65FF,#B45BCF

Install guide

Palette

Core colors

editor.background #120D15

editor.foreground #FEF7FF

editor.selectionBackground #30213B

sideBar.background #0F0A12

titleBar.activeBackground #0D0710

tab.activeForeground #CC65FF

focusBorder #FD4200

button.background #8117c7

terminal.ansiRed #EA51B2

terminal.ansiGreen #FD4200

terminal.ansiBlue #62D6E8

terminal.ansiMagenta #de71ff

terminal.ansiCyan #A1EFE4

terminal.ansiYellow #77cdff