Skip to main content
CodingTheme

Color themes

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.

  • actionBar.toggledBackground#dddddd
  • breadcrumbPicker.background#FFFFFF
  • checkbox.border#919191
  • diffEditor.insertedLineBackground#00AA621F
  • diffEditor.removedLineBackground#EB40391F
  • diffEditorOverview.insertedForeground#00AA6233
  • diffEditorOverview.removedForeground#EB403933
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.selectionHighlightBackground#ADD6FF80
  • editor.wordHighlightBackground#2F74FF3D
  • editorBracketMatch.background#2F74FF3D
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#4D6B9921
  • editorIndentGuide.activeBackground#939393
  • editorIndentGuide.background#D3D3D3
  • editorLineNumber.activeForeground#17181A
  • editorLineNumber.foreground#617080
  • editorStickyScrollHover.background#5b92ff14
  • editorSuggestWidget.background#F3F3F3
  • icube.colorAlert#F0A50F
  • icube.colorAlertActive#D38D00
  • icube.colorAlertHover#FFC95D
  • icube.colorAlertTransparent#F0A50F1F
  • icube.colorAlertTransparent2#F0A50F33
  • icube.colorAlertTransparent3#F0A50F5C
  • icube.colorBg2#EDEFF2
  • icube.colorBg3#FFFFFF
  • icube.colorBgCode#FFFFFF
  • icube.colorBtnHover#4D618014
  • icube.colorBtnHover2#4D61801F
  • icube.colorBtnTransparent3#4D618029
  • icube.colorDefaultText#333940
  • icube.colorDisableText#A4B2BF
  • icube.colorError#E92D25
  • icube.colorErrorActive#B11B15
  • icube.colorErrorHover#EC5C56
  • icube.colorErrorTransparent#EB40391F
  • icube.colorErrorTransparent2#EB403933
  • icube.colorErrorTransparent3#EB40395C
  • icube.colorGaryText#6D7E8F
  • icube.colorGrayText#6D7E8F
  • icube.colorHighlightText#17181A
  • icube.colorLine1#4D6B9921
  • icube.colorLine2#4D6B9933
  • icube.colorLine3#4D6B9966
  • icube.colorSuccess#00AA62
  • icube.colorSuccessActive#0D8E63
  • icube.colorSuccessHover#00CD76
  • icube.colorSuccessTransparent#00AA621F
  • icube.colorSuccessTransparent2#00AA6233
  • icube.colorSuccessTransparent3#00AA625C
  • icube.colorWarning#EB6200
  • icube.colorWarningActive#C25304
  • icube.colorWarningHover#FB964E
  • icube.colorWarningTransparent#EB62001F
  • icube.colorWarningTransparent2#EB620033
  • icube.colorWarningTransparent3#EB62005C
  • icube.colorWidgetShadow#0000000A
  • icube.colorWidgetShadow2#00000014
  • list.activeSelectionBackground#4D6B991F
  • list.activeSelectionIconForeground#FFF
  • list.errorForeground#E92D25
  • list.focusAndSelectionOutline#90C2F9
  • list.hoverBackground#4D618014
  • menu.border#D4D4D4
  • notebook.cellBorderColor#E8E8E8
  • notebook.selectedCellBackground#c8ddf150
  • ports.iconRunningProcessForeground#369432
  • searchEditor.textInputBorder#CECECE
  • settings.numberInputBorder#CECECE
  • settings.textInputBorder#CECECE
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#61616130
  • sideBarTitle.foreground#6F6F6F
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.lastPinnedBorder#61616130
  • terminal.inactiveSelectionBackground#E5EBF1
  • widget.border#d4d4d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#FF5D4D
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#B15EF2
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#5F36B2
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#5F36B2
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#C99100
variable.other.constant, variable.other.enummember#175CE6
meta.object-literal.key#17181A
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#008880
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#17181A
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#008880
keyword.operator.quantifier.regexp#17181A
keyword.operator.or.regexp, keyword.control.anchor.regexp#17181A
constant.character, constant.other.option#175CE6
constant.character.escape#175CE6
entity.name.label#008880
variable.other.property#17181A
variable.language#c99100
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#FF5D4D
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#B15EF2
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#5F36B2
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#5F36B2
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#C99100
variable.other.constant, variable.other.enummember#175CE6
meta.object-literal.key#17181A
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#008880
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#17181A
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#008880
keyword.operator.quantifier.regexp#17181A
keyword.operator.or.regexp, keyword.control.anchor.regexp#17181A
constant.character, constant.other.option#175CE6
constant.character.escape#175CE6
entity.name.label#008880
variable.other.property#17181A
variable.language#c99100
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#4DA621
emphasisitalic
strongbold
meta.diff.header#000080
comment#8393A3
constant.language#175CE6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#E54595
constant.regexp#4DA621
entity.name.tag#E24864
entity.name.selector#800000
entity.name.tag.css#17181A
entity.other.attribute-name#17181A
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#17181A
invalid#cd3131
markup.underlineunderline
markup.bold#000080bold
markup.heading#175CE6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#E54595
markup.deleted#a31515
markup.changed#175CE6
punctuation.definition.quote.begin.markdown#0451a5
punctuation.definition.list.begin.markdown#E24864
markup.inline.raw#4DA621
punctuation.definition.tag#800000
meta.preprocessor, entity.name.function.preprocessor#175CE6
meta.preprocessor.string#4DA621
meta.preprocessor.numeric#175CE6
meta.structure.dictionary.key.python#4DA621
storage#5F36B2
storage.type#5F36B2
storage.modifier, keyword.operator.noexcept#5F36B2
string, meta.embedded.assembly#4DA621
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#0000ff
string.tag, string.value, string.regexp#4DA621
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#E24864
meta.template.expression#5F36B2
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#4DA621
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#e50000
support.type.property-name.json#0451a5
keyword#5F36B2
keyword.control#5F36B2
keyword.operator#000000
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#5F36B2
keyword.other.unit#E54595
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#175CE6
support.function.git-rebase#0451a5
constant.sha.git-rebase#E54595
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#17181A

Shiki preview

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

Loading...

trae themes by yanfeixin - VS Code Theme