CodeUI

Build, edit, & explore your color theme for VS Code.

Table of Contents

• Features
  • Interface
  • Colors
  • Customization
• Getting Started
  • Installing
  • Usage
  • Extension Settings
• Additional Info
  • Release Notes
  • Get Involved
  • Contributors
  • Technical Acknowledgements

Features

Interface

Browse & customize the elements of VS Code's interface with descriptions and realtime visual representations of your color settings

Colors

Enter custom values or choose from a set of over 2k preset colors. Easily store your favorites via codeui.favoriteColors in user settings

Customization

Darken, lighten, copy & paste values across items. Use Standard or Palette view to sort by element groups or target specific colors- wherever they appear

Getting Started

Installing

The recommended method for installing CodeUI is via the Extension Marketplace, accessed from within Visual Studio Code.

Alternatively, you can download the VSIX from the repo on Github and install using the terminal with command:

code --install-extension codeui-0.2.0.vsix

Note: it may be necessary to reload vscode if installing via the terminal.

Usage

Refer to usage documentation here.

Extension Settings

• codeui.showNotifications : Toggle various notifications about CodeUI's activity

• codeui.favoriteColors : User-defined colors for use by CodeUI

• codeui.targetingMode : Controls target of customizations applied by CodeUI

Additional Info

Get Involved

Help make CodeUI the standard theming tool for vscode! Whether it's new features, optimizations, documentation or general knowledge - I would very much appreciate your contributions & insights. You can join the project on Github.

Users and developers alike, write to raposo.ryan@gmail.com any time if you have an idea, tip, or comment of any sort. Customizing the UI is a huge part of vscode's charm, and your feedback will help make it as fun & accessible as possible.

Thank you for supporting CodeUI!

Contributors

• See contributors page on GitHub

Technical Acknowledgements

• copy-paste (npm)
• tiny-color2 (npm)
• Various extension development blogs