USAGE.md

CodeUI

Customize your color theme for VS Code.

Usage

Table of Contents

• Usage
  • Table of Contents
• Element Information
  • ¹ Visualizations & Effective Color
  • ² Tooltip Descriptions
  • ³ Info View
• Viewtypes
  • Standard
  • Palette
• Customization
  • Targeting Mode
  • Commands
  • Adjust brightness
  • Customize
  • Delete
  • Copy
• Colors
  • ¹ Favorites
  • ² Presets
  • Allowable values
    • Acceptable values:
    • Unacceptable values:
  • Color Picker

Element Information

¹ Visualizations & Effective Color

The icons for each item represent color setting, as well as indicate the source of those settings. If an icon is partially covered, the 'top-coat' always represents a customization (global or workspace) from User Settings. The color underneath, if any, is the next runner-up in this ascending priority scheme:

  Default -> Theme -> Customization (global) -> Customization (workspace)

In the Elements view, items which are inherting color will also display the corresponding hex value. This value is indicative of the item's effective color, just like the prominent icon color.

² Tooltip Descriptions

Hover over UI elements to view a description of each.

Please submit an issue here for any descriptions found to be missing, incomplete, or inaccurate. Thank you!

³ Info View

The Info view displays the current theme as defined in your settings, and information about your selection in the Elements view. Select an element there to view the colors it is currently inherting.

Viewtypes

¹ Toggle views with the command button at the top right of the Elements view.

Standard

Allows browsing by element groups. These groups correspond to different parts of the editor, and their titles form the beginning of the values one might add to User Settings.

For example, the following value would be found under heading Activity Bar, as item Foreground:

"activityBar.foreground"

Palette

In this viewtype, elements retain a long form of the name, as items are grouped by color. The configuration above would be listed as Activity Bar Foreground, grouped with all elements who share it's effective color.

This viewtype enables you to make batch changes to elements and alter the palette of the editor as it appears. Palette mode also helps in identifying visible elements whose names you aren't familiar with. Use it to see your theme at a glance.

Customization

Targeting Mode

Use configuration 'codeui.targetingMode' to specify the subject of commands issued using CodeUI's interface. Acceptable values are 'general' or 'themeSpecific'.

By default, customization is 'themeSpecific' as shown below:

workbench.colorCustomizations: {
  "[Default Dark+]" : {
    "activityBar.foreground" : "#cccccc"
  }
}

The extension also contributes a toggle button, found on the status bar. It will indicate your current target and allow switching modes with a click:

Commands

CodeUI features four commands for customizing your editor:

• Adjust brightness..
• Customize..
• Delete customization..
• Copy*

In Standard mode (below), these commands are accessible via buttons for each individual element:

*Copy is located in the context (right-click) menu.

In Palette mode, the inline commands can be applied to both elements and palette groups:

Adjust brightness

• Select an adjustment. (eg Darken 10%). Be aware that transparency (alpha) values in the color's hex code may exaggerate/diminish the effects of lightening & darkening.

• If a workspace is open, choose a customization scope (global/workspace). If no workspace is open, global scope will be assumed.

• Brightness adjustment(s) applied.

Customize

• Select a customization method. You can either Enter a value or Choose a preset:

  • Enter a value... Input a valid hex color. See more in colors.

  • Choose a preset... Select a pre-defined color from a pre-loaded list of over 2k values, or a favorite color added to User Settings -> "codeui.favoriteColors"

• If a workspace is open, choose a customization scope (global/workspace). If no workspace is open, global scope will be assumed.

• Customization(s) applied.

Delete

• If a workspace is open, choose a customization scope (global or workspace). If no workspace is open, global scope will be assumed.

• Customization(s) deleted.

Copy

• The selected item's effective value is copied to clipboard. Reminder: Copy is found in the context (right-click) menu.

Colors

¹ Favorites

Use configuration codeui.favoriteColors to define a list of custom colors, using the format:

  "codeui.favoriteColors": {
    "Ice" : "#cccccc",
    "Ryan's Green" : "#50C878",
    "Sea Foam" : "#40EDB6",
    "The Void" : "#000712",
    "Salmon" : "#fa8072"
  },

A name must be entered with each value. They will appear first during selection, with a star to indicate an item is user-defined.

² Presets

A list of 2k+ colors are also provided for use. They will appear below any favorites you have stored.

Allowable values

Only hexidecimal color values can be used by both vscode and CodeUI. This extends to RGBA hex values.

Acceptable values:

• #f2f2f2 ✔️
• #6c6f934d ✔️
• #000000 ✔️

Unacceptable values:

• (22, 45, 90) ❌
• purple ❌
• (11, 22, 33, 0) ❌

If configuration codeui.enableNotifications is set to true (default), you will be notified about problematic values on entry.

Color Picker

Select colors with the color picker, then:

• Click the colored status bar item OR
• Ctrl + Shift + p : "CodeUI: Copy selection from picker"