- 📖 About
- 📦 Installation
- 📝 Documentation
- 🧩 Extensions
- 📷 Screenshots
- 🌐 Localization
- 📋 Change Log
- 🙌🏼 Contribution
- 📜 License
We at Codemos, are delighted to bring Codemos Modern to Visual Studio Code. Just as VS Code redefined code editing, we're going to redefine how it should look.
Modern released as an innovative, modern theme suite for VS Code but with the release of V2, it became modular system that is highly customizable. It also became an hub for the both first and third party themes to allow you to mix and match your favorite ones. Bundled themes designed with our Modern theme principles in mind.
Codemos Modern is designed to be the only extension you would ever need to configure VS Code's look.
We built bundled themes with these fundamental principles:
- Finest Quality: As all of our themes, our modern theme should be of the highest quality. It should be well thought out and well designed. It should be a pleasure to use.
- Unopinionated Design: Our modern theme should stay neutral and not force a specific design language on the user. User should be able to make it their own.
- Minimal: Our modern theme should use the bare essentials to create a simple and uncluttered UI. It should not be distracting.
- Consistent: Our modern theme should provide a consistent experience across all of the UI. It should be consistent with Modern's other variants and designs.
- Accessible: Our modern theme should be accessible to everyone. It should be easy to read and easy to use.
- Open the Extensions sidebar in VS Code
- Search for
Codemos Modern - Click Install
- Open the Command Palette with
Ctrl+Shift+Por⌘⇧P - Find Codemos Modern: Configure ⚙️ and configure your own Modern
- When Modern is ready, click Apply to apply it
- Enjoy! 🎉
NOTE: Learn the basics about Codemos Modern and how to use Codemos Modern: Configure ⚙️ by reading the documentation.
In this section, you can find the documentation for the Codemos Modern.
Codemos Modern provides three configuration options through the command Codemos Modern: Configure ⚙️.
NOTE: You can activate command Codemos Modern: Configure ⚙️ from the Command Palette. See installation section to learn how to do it.
- Variant: You can select which variant your Modern will use. (Dark/Light)
- UI Theme: You can select which UI theme your Modern will use. (Bundled/From Registries)
-
Bundled: If you choose a bundled theme, there are additional configurations you can configure. See modularity section for more information.
- Design: You can choose which design your Modern will use. (Design determines the overall look of the theme)
- Accent color: You can configure which accent color your theme will use. Accent color can be selected from Modern's excellent palette or you can provide a custom one with its hex color code. (Accent color determines the color of the important ui elements; buttons, badges, links, emphasized text, etc. and effects the adaptability mode)
- Adaptation Mode: You can select which adaptation mode your theme would use. (Adaptation mode determines how much your accent color influence the rest of the UI. See adaptability section for more information)
- Design: You can choose which design your Modern will use. (Design determines the overall look of the theme)
-
From Registries: You can also choose an auxiliary theme. Auxiliary themes are the themes that are not bundled with Modern but can be installed from the auxiliary theme registries. Codemos provides a built-in registry that features some of the most popular themes. You can also create your own registries. See modularity section for more information.
- Auxiliary UI Theme: You can select which auxiliary theme your Modern will use as the UI theme. (Auxiliary theme will be installed and activated automatically from the indicated registry)
- Auxiliary UI Theme: You can select which auxiliary theme your Modern will use as the UI theme. (Auxiliary theme will be installed and activated automatically from the indicated registry)
- Code Theme: You can select which code theme your Modern will use. (Code theme determines the colors of your codes)
-
Bundled: We worked hard to make sure that our bundled code theme provides the best developer experience possible. (See color and code intelligibility section for more information) However, if you want to use an auxiliary code theme, you can select From Registries option and choose a code theme from the registries.
-
From Registries: You can also choose an auxiliary theme. Auxiliary themes are the themes that are not bundled with Modern but can be installed from the auxiliary theme registries. Codemos provides a built-in registry that features some of the most popular themes. You can also create your own registries. See modularity section for more information.
- Auxiliary Code Theme: You can select which auxiliary theme your Modern will use as the code theme. (Auxiliary theme will be installed and activated automatically from the indicated registry)
- Auxiliary Code Theme: You can select which auxiliary theme your Modern will use as the code theme. (Auxiliary theme will be installed and activated automatically from the indicated registry)
- Enjoy 🎉: When you are done with your configurations, you can click Apply to apply your Modern.
After the launch of Codemos Modern V2 we've decided to make Modern more modular, giving our users more freedom to express themselves. In order to achieve that, we've decided to allow side-loading of third party themes.
We've designed a system for installing and managing third party themes. This system consists of two elements. Auxiliary theme registries and Auxiliary themes. Auxiliary theme registries are GitHub repositories that are the databases for third party themes and auxiliary themes are the actual third party themes. More information can be found in our official registry's docs.
By default, Modern comes with our official registry, so you can benefit this system without any extra effort. However, you are not forced to use our official registry. You can use community registries or even create your own registries, possibilities are endless.
This system allows you to match your favorite themes to create your own style. You can also share your styles to the community.
You don't have to do anything special. Just add your favorite registry to your registries list (from the configuration codemosModern.auxiliaryThemeRegistries in the settings) and select your favorite theme from the command Codemos Modern: Configure ⚙️.
UI Theme: Cyberpunk | Code Theme: Dracula Official
Adaptability mode is a unique feature of Codemos Modern. Before explaining it, we first need to explain our motivation to create it.
With the launch of Windows 11, Microsoft introduced the Mica material as a part of Windows 11's design system. Mica and its corresponding Apple counterpart NSVisualEffectView achieves the goal of making apps feel more in line with the operating system. Currently, VS Code doesn't provide these kind of materials.
There has been several attempts by the community to bring glassmorphism to VS Code. An example extension which stands out is the Vibrancy Continued or the original, Vibrancy. However, these extensions are not perfect. Because of the nature of VS Code, implementing a feature like this needs hacky solutions. These hacky solutions involve modifying/patching the VS Code installation, leaving you with a VS Code installation that is unsupported. These hacky solutions causes instabilities and UI inconsistences.
We at Codemos, wanted to create a solution that doesn't involve modifying/patching the VS Code installation and doesn't cause any unwanted consequences. We wanted to create a solution that is built into the theme itself. That's why we created the Adaptability mode.
When creating your Codemos Modern, if you chose the bundled theme for your UI theme, you are asked to select an Adaptability mode, see configuration section. Currently, there are four options to choose from; None, Gentle, Moderate and Aggressive. When you select an Adaptability mode other than None, a clever algorithm will tint the UI colors based on your accent color, making you feel that the UI has transparency effects.
-
None: When you select this option, UI elements such as background colors will not adapt to your accent color. This is the default option.
-
Gentle: When you select this option, UI elements such as background colors will start to adapt to your accent color. If you want just a little taste of glassmorphism, this is the option for you.
-
Moderate: When you select this option, UI elements such as background colors will adapt to your accent color. This option is the most balanced option.
-
Aggressive: When you select this option, UI elements such as background colors will adapt to your accent color as much as possible. This option is the most extreme option.
Color is the essential part of code editing. Codemos Modern provides a carefully crafted color palette to make your code editing experience more intelligible and enjoyable.
Our color palette takes its foundations from the original Visual Studio/Visual Studio Code color palette. We've made this classic color palette more modern and more accessible. We've also added some new colors to the palette to make it more complete. Every color has a meaning and is consistent across all the UI. While feeling familiar, it also feels fresh and modern.
Before we dive into color reference, we have one more contribution to code intelligibility. We used text decorations cleverly to give our users more information about their code.
These decorations are:
Strike-through: This decoration is used to indicate that the symbol is deprecated.- Bold: This decoration is used to indicate that the symbol is abstract.
- Italic: This decoration is used to indicate that the symbol is static.
- Underline: This decoration is used to indicate that the symbol allows write access (not read-only).
NOTE: Codemos Modern uses both Semantic Highlighting and Syntax Highlighting. Semantic Highlighting is a new version of token coloring with more capabilities and simplified tokenizing but not yet widely adopted by language extensions. See Semantic Highlighting and Syntax Highlighting for more information. We strongly recommend you to use a language extension that supports Semantic Highlighting. We are planning to add support for more languages in the future. Contribute if you want to help us.
We've also decided to theme some of the most used extensions to provide more consistent experience across the entire UI. In order an extension to be themed, it must contribute themeable colors. You can find the list of supported extensions that are themed in Codemos Modern below. If your favorite extension is not on the list, visit Codemos Modern's GitHub repository and let us know!
- Dart
- Error Lens
- Flutter
- GitHub Pull Requests and Issues
- GitLens
- Material Icon Theme
- Remote Repositories
- rust-analyzer
We try to make Codemos Modern the most accessible theming extension for VS Code. That's why we are planning to localize Codemos Modern to as many languages as possible. In this cause we need your help the most. Below, you can find the localization table. In this table you can see the status of the localization for each language. We are looking for volunteers to help us localize Codemos Modern. If you want to help us, join us on GitHub.
NOTE: Native speakers can help us by reviewing localizations with the status "💬". There are two files to check:
l10n/bundle.l10n.{locale}.jsonandpackage.nls.{locale}.json.
| Display Language | Locale | Status | Released With | Maintainer | Notes |
|---|---|---|---|---|---|
| English | en | 🟢 | v1.0.0 | Codemos | - |
| Turkish | tr | 🟢 | v2.4.0 | Codemos | - |
| Simplified Chinese | zh-cn | 💬 | v2.4.0 | Codemos | Review needed |
| Japanese | ja | 💬 | v2.5.0 | Codemos | Review needed |
| Spanish | es | 🟢 | v2.5.0 | Codemos | - |
| Russian | ru | 💬 | v2.6.0 | Codemos | Review needed |
| Portuguese (Brazil) | pt-br | 🟢 | v2.6.0 | Codemos | - |
| French | fr | 🟢 | v2.7.0 | Codemos | - |
| Korean | ko | 💬 | v2.7.0 | Codemos | Review needed |
| German | de | 🟢 | v2.7.0 | Codemos | - |
| Traditional Chinese | zh-tw | 🟢 | v2.8.0 | Codemos | - |
| Italian | it | 🟢 | v2.8.0 | Codemos | - |
| Polish | pl | 🟡 | v2.9.0 | - | Will be released by v2.9.0 |
| Hungarian | hu | 🔴 | - | - | Not planned |
| Czech | cs | 🔴 | - | - | Not planned |
| Bulgarian | bg | 🔴 | - | - | Not planned |
In this section you can find how Codemos Modern looks and feels in most used languages.
Changes from the last major release shown below. If you want to see the full change log, visit CHANGELOG.md.
- VS Code v1.94.x support.
- Modularity system. Users can now side-load third party themes.
- Brand new design, "Flat". Users can now choose between "Modern", "Minimal" and "Flat" designs.
- Command
codemosModern.authenticateto increase GitHub api rate limits. - Set of configurations to customize the text decorations on symbols. (Only bundled themes are effected)
- Material Icon Theme icons not correctly themed.
- Multiple update requests to recompile themes.
- Underlying syntax and semantic highlighting system to be more robust and open to future changes.
We are open to any kind of contribution. If you want to contribute to Codemos Modern, join us on GitHub.
Codemos Modern is licensed under the MIT License.