🌆 Tokyo Modern

A modern, balanced dark theme for VS Code with declarative color generation and modular architecture.

🌎 Live Preview

🔮 Open in VS Code | 🔮 Open in VS Code Insiders

🎨 Features

• Modern Framework Support: Extended tokens for React, Next, Vue, Nuxt, TypeScript, Rust, Go, Python, and others
• Modular Architecture: Clean, maintainable structure with separated UI and token configurations
• Extended Palette: 220+ tokens with support for 15+ modern frameworks
• CSS/SCSS Capabilities: Full support for modern CSS features and CSS-in-JS
• Optimized Highlighting: Enhanced selection and search highlighting with new color hierarchy
• 100% Test Coverage: 218 tests ensure stability and quality

🔧 Supported Technologies

🌐 Frameworks and Libraries

• React: Hooks, Next.js, React Hook Form, Formik
• Vue: Vue 3 Composition API, Directives, Pinia
• Angular: Components, Services, RxJS
• TypeScript: Utility Types, Generics, Modern operators

🎨 CSS and Styling

• Modern CSS: Grid, Flexbox, Custom Properties, Container Queries
• Preprocessors: SCSS/SASS, Less, Stylus, PostCSS
• CSS-in-JS: Styled Components, Emotion, Stitches, Goober
• Frameworks: Tailwind CSS, Bootstrap 5, Bulma, Material-UI, Ant Design, Chakra UI

🗄️ Backend and Databases

• API: tRPC, Express, Fastify, Hono
• ORM: Prisma, Drizzle, TypeORM
• GraphQL: Apollo, Relay, urql
• Databases: SQL, MongoDB, Redis

🧪 Testing and Development

• Testing: Jest, Vitest, Playwright, Cypress
• Build Tools: Vite, Webpack, Rollup, esbuild, Parcel
• Validation: Zod, Yup, Joi
• State Management: Redux, Zustand, Pinia, MobX

💻 Programming Languages

• JavaScript/TypeScript: Full support for modern features
• Python: Decorators, type hints, async/await
• Rust: Lifetimes, macros, pattern matching
• Go: Goroutines, channels, interfaces
• Java: Annotations, streams, lambdas
• C/C++: Modern C++, preprocessor macros
• Ruby: Symbols, blocks, metaprogramming
• Shell: Bash, Zsh, Fish
• Config: YAML, TOML, Docker, Makefile
• Others: PHP, Swift, Kotlin, Dart, Elixir, Lua

🚀 Installation

From Marketplace

1. Open VS Code
2. Press Ctrl+Shift+X (Extensions)
3. Search Tokyo Modern or filter by @id:lod-inc.tokyo-modern
4. Click Install

From .vsix File (VSCodium, Cursor, Void, TRAE, Windsurf, etc.)

1. Download the .vsix file from GitHub Releases
2. Open VS Code
3. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
4. Type "Extensions: Install from VSIX..." and select it
5. Navigate to and select the downloaded .vsix file
6. Reload VS Code if prompted

Recommended configuration for non Zed IDE's

"window.density.editorTabHeight": "compact",
"workbench.colorTheme": "Tokyo Modern",
"workbench.preferredDarkColorTheme": "Tokyo Modern",
"workbench.preferredLightColorTheme": "Tokyo Modern",

Zed

1. Clone or download this repository
2. Copy the themes/tokyo-modern-zed.json file to your Zed themes directory:
   • Linux: ~/.config/zed/themes/
   • macOS: ~/Library/Application Support/Zed/themes/
   • Windows: %APPDATA%\Zed\themes\
3. Or create a symbolic link to the themes/tokyo-modern-zed.json file in the above directory
4. Restart Zed
5. Open Zed settings (Cmd/Ctrl+,) and select "Tokyo Modern" from the theme dropdown

For Extension Developers

If you want to develop this as a Zed extension, use the zed_extension.json file which defines the extension metadata.

For Theme Developers

To regenerate the Zed theme from the VSCode theme, run:

npm run build:zed

This will generate an updated themes/tokyo-modern-zed.json file based on the current VSCode theme settings.

Manual Installation Steps

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

# Navigate to the cloned directory
cd tokyo-modern-vscode-theme

# Copy the theme file to Zed's themes directory (macOS example)
cp themes/tokyo-modern-zed.json ~/Library/Application\ Support/Zed/themes/

📄 License

MIT License - see LICENSE file

Made with ❤️ for developers who appreciate clean, modern themes