Tokyo Night Lod

A darker version of the Tokyo Night theme with slightly more muted syntax highlighting.

🎨 Features

• Deep dark background - reduces eye strain
• Muted accents - soft syntax highlighting
• High contrast - excellent readability
• TypeScript-generated - modern theme architecture

📸 Screenshots

🚀 Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Tokyo Night Lod"
4. Click Install

From the command line

code --install-extension lod-inc.tokyo-night-lod

🛠️ Development

This theme is built using a modern TypeScript approach for better maintainability and extensibility.

Quick start

# Clone the repository
git clone https://github.com/darqus/tokyo-night-vscode-theme-lod.git
cd tokyo-night-vscode-theme-lod

# Install dependencies
npm install

# Build the theme
npm run build:theme

# Testing
npm run test:smoke

Project structure

src/
├── palette.ts             # 🎨 Color palette
├── build.ts               # 🔧 Theme generator
├── tokenColors.ts         # 🌈 Syntax colors
├── semanticTokenColors.ts # 🎯 Semantic colors
└── utils/color.ts         # 🛠️ Color utilities

Documentation

• 📋 Architecture - How the theme is structured
• 🛠️ Development - Developer's guide
• 🎨 Examples - Customization examples

🎨 Color Palette

The Tokyo Night Darqus theme uses a carefully selected color palette to provide a comfortable and visually appealing coding experience. Below are some of the key color categories and their representative hex values.

Accent Colors

These colors are primarily used for syntax highlighting and provide visual distinction for different code elements.

Token Colors (Examples)

These are examples of colors used for specific syntax tokens, providing fine-grained control over code readability.

Original Theme

https://github.com/enkia/tokyo-night-vscode-theme

Development: Palette and build (TypeScript)

This theme is now generated from a small TypeScript build pipeline to keep color values in one place.

• src/palette.ts — typed palette (bg/fg/brand/accent/ansi)
• src/utils/color.ts — helpers like withAlpha('#RRGGBB', 'AA' | 0..1)
• src/build.ts — reads the existing theme JSON and fully regenerates the "colors", "tokenColors" and "semanticTokenColors" sections from code using the palette and typed sources
• src/tokenColors.ts — typed source of truth for TextMate token colors (scopes and settings)
• src/semanticTokenColors.ts — typed source of truth for semantic token colors

How to edit colors and token colors:

• Change values in src/palette.ts (UI/editor colors)
• Edit token colors in src/tokenColors.ts (scopes and foreground/background/fontStyle)
• Edit semantic token colors in src/semanticTokenColors.ts
• Optionally adjust build logic in src/build.ts if you want to map new keys or use helpers
• Regenerate theme JSON:

npm run build:theme

The output file themes/tokyo-night-dark-color-theme.json is updated in-place.