Skip to main content
Coding Theme

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.

  • activityBar.background#141820
  • activityBarBadge.background#f44747
  • activityBarBadge.foreground#dadada
  • button.background#141820
  • button.foreground#f44747
  • button.secondaryBackground#f44747
  • button.secondaryForeground#141820
  • diffEditor.insertedTextBackground#66f0c213
  • dropdown.background#1d222b
  • editor.background#1f2735
  • editor.findMatchBackground#c3030371
  • editor.findMatchHighlightBackground#cabd0a5c
  • editor.foreground#dadada
  • editor.inactiveSelectionBackground#00000071
  • editor.lineHighlightBackground#99bbff0a
  • editor.selectionBackground#c3030371
  • editor.selectionHighlightBackground#00000071
  • editor.wordHighlightBackground#dc3c07cd
  • editor.wordHighlightBorder#dc3c07cd
  • editorCursor.foreground#f30f4c
  • editorGroup.border#1A1F2E
  • editorGroupHeader.tabsBackground#1C212E
  • editorGutter.addedBackground#308E68
  • editorGutter.modifiedBackground#938464
  • editorIndentGuide.background1#97a7c826
  • editorLineNumber.activeForeground#818ca6
  • editorLineNumber.foreground#3D4D67
  • editorSuggestWidget.background#141820
  • editorSuggestWidget.foreground#dadada
  • editorSuggestWidget.highlightForeground#f44747
  • editorSuggestWidget.selectedForeground#dadada
  • editorSuggestWidget.selectedIconForeground#ffffff
  • editorWhitespace.foreground#dadada43
  • editorWidget.background#141820
  • editorWidget.resizeBorder#f44747
  • focusBorder#141820
  • foreground#818CA6
  • gitDecoration.deletedResourceForeground#f44747
  • gitDecoration.ignoredResourceForeground#3D4D67
  • gitDecoration.modifiedResourceForeground#ff9d00
  • gitDecoration.untrackedResourceForeground#00ff55
  • input.background#141820
  • input.border#c3030371
  • input.foreground#dadada
  • input.placeholderForeground#f44747
  • list.activeSelectionBackground#c3030371
  • list.activeSelectionForeground#ffffff
  • list.filterMatchBackground#c3030371
  • list.filterMatchBorder#fecc16
  • list.focusBackground#3D4D67
  • list.focusHighlightForeground#ffffff
  • list.highlightForeground#f44747
  • list.hoverBackground#141820
  • list.hoverForeground#dadada
  • list.inactiveSelectionBackground#303B50
  • list.inactiveSelectionForeground#D5D9E2
  • listFilterWidget.background#f44747
  • panel.background#1C212E
  • panel.border#1A1F2E
  • pickerGroup.foreground#FFE792
  • progressBar.background#f44747
  • scrollbar.shadow#11141a11
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • selection.background#f44747
  • sideBar.background#1C212E
  • sideBarSectionHeader.background#141820
  • sideBarTitle.foreground#f44747
  • statusBar.background#212836
  • statusBar.border#1A1F2E
  • statusBar.debuggingBackground#ff9900
  • statusBar.debuggingForeground#141820
  • statusBar.foreground#818CA6
  • statusBar.noFolderBackground#212836
  • statusBarItem.hoverForeground#141820
  • statusBarItem.remoteBackground#f44747
  • statusBarItem.remoteForeground#fff
  • tab.activeBackground#212836
  • tab.activeBorder#f44747
  • tab.border#1C212E
  • tab.inactiveBackground#212836
  • tab.inactiveForeground#818CA6
  • tab.unfocusedInactiveForeground#818CA6
  • terminal.background#1C212E
  • textLink.activeForeground#f44747
  • textLink.foreground#dadada
  • titleBar.activeBackground#1C212E
  • titleBar.activeForeground#818CA6
  • titleBar.inactiveBackground#1C212E
  • titleBar.inactiveForeground#818CA6
  • widget.shadow#11141ab3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#97a7c8
comment#506686
string#a6e22e
support.variable.dom.js#59f2f7
variable.other.constant.js, variable.other.constant.object.js, variable.other.constant.property.js#66c4ff
constant.numeric#58b4ff
constant.language#fecc16
constant.character, constant.other#ff59c8
variable#fff
keyword#E95293
storage#FF5BA2
storage.type#D59DF6
entity.name.class#b35cfa
entity.other.inherited-class#c9b72fitalic underline
variable.parameter#db6eff
entity.name.tag#2EFFFF
entity.other.attribute-name, entity.other.attribute-name.class.css#ff9900
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#ed5a6d
variable.language.this.js, variable.language.this.ts, entity.name.type#f9f157
entity.other.attribute-name.id.html#FFFF00
entity.name.function.js, entity.name.function.method.js, entity.name.accessor.js, entity.name.class.js#ff9900
support.class.builtin.js, entity.name.type.class.js#FFFF00
variable.parameter.js, constant.other.object.key.js, variable.other.readwrite.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, meta.object-literal.key.js, meta.array.literal.js, meta.brace.round.js, punctuation.definition.block.js, meta.objectliteral.js#dadada
constant.language.boolean.false.js, constant.language.boolean.true.js#FFFF00
support.variable.property.dom.js, entity.name.type.new.js#000
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#00ff99
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#82BAF2
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344
meta.toc-list.id#88F2AF
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.handlebars#a6e22e
entity.other.attribute-name.id#85AC3A
support.type.property-name.css#db6eff
entity.other.attribute-name.id.css#FFFF00
constant.other.color.rgb-value.hex.css#4ff2f8
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#00ff99
support.function#00b3ff
support.constant#00ff99
support.type, support.class#5ad0ff
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#00ff99
none#00ff99
keyword.operator#4FF2F8
keyword#d293ff
variable, meta.selector.css#f44747
entity.name.function, meta.require, support.function.any-method#00b3ff
support.class, entity.name.class, entity.name.type.class#f44747
meta.class#f8f8f8
keyword.other.special-method#00b3ff
storage#71b1fe
constant.numeric#dc9656
none#dc9656
none#dc9656
constant#dc9656
invalid.deprecated#ffffff
meta.diff, meta.diff.header#655c2d
markup.deleted#FF5BA2
markup.inserted#82C600
markup.changed#ffff63
entity.name.filename.find-in-files#ffff63
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
Electrocuted by Andreas Stamataris - VS Code Theme