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.activeBackground#4D366F
  • activityBar.activeBorder#ffffff00
  • activityBar.background#705697
  • activityBar.dropBorder#ffffff
  • activityBar.foreground#ededed
  • activityBar.inactiveForeground#ededed
  • activityBarBadge.background#ededed
  • activityBarBadge.foreground#705697
  • button.background#705697
  • editor.background#FDF6E3
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#B1F8FF
  • editorCursor.foreground#4e342e
  • editorIndentGuide.activeBackground#d3dce4
  • editorIndentGuide.background#efefef
  • editorWhitespace.foreground#3B3A32
  • focusBorder#a37de1
  • input.border#efefef
  • input.foreground#4D366F
  • input.placeholderForeground#b3b9bf
  • list.activeSelectionBackground#F0F0F0
  • list.activeSelectionForeground#616161
  • list.focusOutline#F0F0F0
  • menu.selectionBackground#705697
  • menu.selectionForeground#fff
  • menu.separatorBackground#f5f5f5
  • panel.border#E3E0CE
  • panelTitle.activeBorder#a37de1
  • panelTitle.activeForeground#000
  • panelTitle.inactiveForeground#aaa
  • sideBar.background#FFFFFF
  • statusBar.background#705697
  • statusBar.foreground#FFFFFF
  • tab.activeBorder#FF9940
  • textLink.activeForeground#F77C00
  • textLink.foreground#906FC4
  • titleBar.activeBackground#705697
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#705697
  • titleBar.inactiveForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#999999
string#1794FAF0
constant.numeric#0025F5
constant.language#DE5CFF
constant.character, constant.other#AE81FF
variable
source.sass, meta.selector.sass, entity.other.attribute-name.class.sass#1794FAF0
source.sass, meta.selector.sass, entity.other.attribute-name.id.sass#1794FAF0
source.sass meta.property-list.sass meta.property-name.sass support.type.property-name.sass#FF6708F0
source.sass, meta.selector.sass, entity.name.tag.sass#FF0000
source.sass meta.property-list.sass meta.property-value.sass constant.other.color.rgb-value.sass#D4D4D4
keyword#FF3333 bold
storage#EB5086
storage.type#0088FFitalic bold
entity.name.class#85C70Cunderline
entity.other.inherited-class#507806italic underline
entity.name.function#1DA11D bold
variable.parameter#FF960D italic
entity.name.tag#F92672
entity.other.attribute-name#009688bold
support.function#FFCD03
support.constant#57C8ED
support.type, support.class#124CFAitalic
support.other.variable#1C1C1C
invalid#000strikethrough
invalid.deprecated#000strikethrough
entity.other.attribute-name.html#F77C00
keyword.operator.js#5ECFFF
source.js#050505
comment.js#C2C2C2
punctuation.definition.typeparameters.end#ff0000bold italic
punctuation.definition.typeparameters.begin#ff0000bold italic
variable.parameter, support.function#FD8B19bold
variable.other.constant#1290BF
meta.var-single-variable.expr#1290BF
meta.type.parameters#1290BFitalic bold
meta.type.declaration#1290BF
meta.type.annotation#17A5DBitalic bold
entity.name.type.ts#1290BFitalic bold
entity.name.type.alias#1290BF
entity.name.type.interface#1290BF
meta.definition.property.ts#1290BFitalic
Ronan 浅色主题 by 吴功荣 - VS Code Theme