Skip to main content
Coding Theme

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#f2f2f2
  • activityBar.border#c9c9c9
  • activityBar.dropBackground#f2f2f2
  • activityBar.foreground#6e6e6e
  • activityBar.inactiveForeground#bdbdbd
  • activityBarBadge.background#e69269
  • activityBarBadge.foreground#000000
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.lineHighlightBackground#fffae3
  • editor.selectionBackground#d7dce8
  • editor.selectionForeground#ffffff
  • editorBracketMatch.background#99ccff
  • editorBracketMatch.border#99ccff
  • editorGroupHeader.tabsBackground#f2f2f2
  • editorGroupHeader.tabsBorder#c9c9c9
  • editorGutter.background#f0f0f0
  • editorIndentGuide.background#e9e9e9
  • editorLineNumber.activeForeground#999999
  • editorLineNumber.foreground#999999
  • focusBorder#ffffff
  • menu.background#f2f2f2
  • menu.foreground#24292e
  • menu.selectionBackground#1a7dc4
  • menu.selectionBorder#1a7dc4
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#cdcdcd
  • menubar.selectionBackground#1a7dc4
  • menubar.selectionBorder#1a7dc4
  • menubar.selectionForeground#ffffff
  • sideBar.background#ffffff
  • sideBar.border#c0c0c0
  • sideBar.dropBackground#ffffff
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#ffffff
  • sideBarSectionHeader.foreground#999999
  • sideBarTitle.foreground#999999
  • statusBar.background#f2f2f2
  • statusBar.border#919191
  • statusBar.foreground#000000
  • statusBarItem.activeBackground#bdbdbd
  • statusBarItem.hoverBackground#d9d9d9
  • tab.activeBackground#fafafa
  • tab.activeBorder#4083c9
  • tab.border#e1e4e8
  • tab.hoverBackground#dadada
  • tab.inactiveBackground#f2f2f2
  • tab.inactiveForeground#333333
  • titleBar.activeBackground#f2f2f2
  • titleBar.activeForeground#000000
  • titleBar.border#cdcdcd
  • titleBar.inactiveBackground#f2f2f2
  • titleBar.inactiveForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080italic
source, string source, text source, punctuation.section, punctuation.definition, entity.name.function.preprocessor, variable.parameter.preprocessor, entity.name.type.struct, entity.name.type.alias, constant.numeric.css#000000
punctuation.definition.directive, keyword.control.directive.include, keyword.control.directive.conditional, keyword.control.directive.define, keyword.control.directive.endif, keyword.control.directive.pragma, keyword.control.directive.diagnostic.error#808000
punctuation.definition.string, string.quoted.other.lt-gt.include, string.quoted.double, string.quoted.single, keyword.other.unit#008000bold
storage.modifier, storage.type.built-in.primitive, keyword.control, keyword.other, storage.type, entity.name.tag, keyword.operator.new.js, punctuation.definition.keyword.css#000080bold
constant.numeric, keyword.other.unit#0000ff
entity.other.attribute-name, support.type.property-name.css#0000ffbold
variable.other.readwrite.js, entity.name.type.js, variable.other.property.js, variable.language.arguments.js, variable.other.object.property.js#660e7abold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

CLion Plus Theme - Coding Theme