🌆 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, 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: 231 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
- Open VS Code
- Press
Ctrl+Shift+X (Extensions)
- Search
Tokyo Modern or filter by @id:lod-inc.tokyo-modern
- Click Install
From .vsix File (VSCodium, Cursor, Void, TRAE, Windsurf, etc.)
- Download the
.vsix file from GitHub Releases
- Open VS Code
- Open the Command Palette (
Ctrl+Shift+P / Cmd+Shift+P)
- Type "Extensions: Install from VSIX..." and select it
- Navigate to and select the downloaded
.vsix file
- Reload VS Code if prompted
Recommended configuration
"window.density.editorTabHeight": "compact",
"workbench.colorTheme": "Tokyo Modern",
"workbench.preferredDarkColorTheme": "Tokyo Modern",
"workbench.preferredLightColorTheme": "Tokyo Modern",
📄 License
MIT License - see LICENSE file
Made with ❤️ for developers who appreciate clean, modern themes
| |
