Skip to main content
CodingTheme

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#303b50
  • activityBar.activeBorder#ffffff22
  • activityBar.background#141820
  • activityBar.foreground#cfcece
  • activityBar.inactiveForeground#b3bcd3
  • activityBarBadge.background#29af51
  • activityBarBadge.foreground#0b2b0fe7
  • diffEditor.insertedTextBackground#66f0c213
  • dropdown.background#141820
  • editor.background#212836
  • editor.foreground#97a7c8
  • editor.lineHighlightBackground#89f09721
  • editor.selectionBackground#89f09759
  • editor.wordHighlightBackground#89f09759
  • editorCursor.foreground#f30f4c
  • editorGroup.border#1a1f2e
  • editorGroupHeader.tabsBackground#1c212e
  • editorGutter.addedBackground#308e68
  • editorGutter.modifiedBackground#938464
  • editorIndentGuide.background#97a7c826
  • editorLineNumber.activeForeground#38ff73
  • editorLineNumber.foreground#3d4d67
  • editorSuggestWidget.background#141820
  • editorWhitespace.foreground#3b3a32
  • editorWidget.background#141820
  • foreground#818ca6
  • gitDecoration.ignoredResourceForeground#3d4d67
  • gitDecoration.modifiedResourceForeground#e3c18a
  • gitDecoration.untrackedResourceForeground#70ca8e
  • input.background#141820
  • input.border#1a1f2e
  • input.foreground#818ca6
  • input.placeholderForeground#3d4d67
  • list.activeSelectionBackground#4b76cf
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#3d4d67
  • list.hoverBackground#141820
  • list.inactiveSelectionBackground#303b50
  • list.inactiveSelectionForeground#d5d9e2
  • panel.background#1c212e
  • panel.border#1a1f2e
  • pickerGroup.foreground#ffe792
  • scrollbar.shadow#11141a11
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • sideBar.background#1c212e
  • sideBarSectionHeader.background#141820
  • sideBarTitle.foreground#f44747
  • statusBar.background#212836
  • statusBar.border#1a1f2e
  • statusBar.foreground#cfcece
  • statusBar.noFolderBackground#212836
  • statusBarItem.hoverBackground#374155
  • tab.activeBackground#212836
  • tab.activeBorder#f44747
  • tab.border#1c212e
  • tab.inactiveBackground#212836
  • tab.inactiveForeground#818ca6
  • tab.unfocusedInactiveForeground#818ca6
  • terminal.background#1c212e
  • titleBar.activeBackground#303b50
  • titleBar.activeForeground#cfcece
  • titleBar.inactiveBackground#141820
  • titleBar.inactiveForeground#cfcece
  • widget.shadow#11141ab3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#506686
string#F6F6F5
string.unquoted.html, string.quoted.single.js, string.quoted.double.js, string.quoted.single.html, constant.other.symbol, entity.other.inherited-class#B3D667
constant.numeric#58B4FF
constant.language#FFE792
constant.character, constant.other#AC58FF
variable#B7C6DA
keyword#E95293
storage#FF5BA2
storage.type#D59DF6
entity.name.class#82C600
entity.other.inherited-class#82C600italic underline
variable.parameter#85AC3A
entity.name.tag#E76572
entity.other.attribute-name, entity.other.attribute-name.class.css, string.quoted.double.json#EAB780
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#E26674
variable.language.this.js#EAB780
entity.other.attribute-name.id.html#FFFA9E
entity.name.function.js, entity.name.function.method.js, entity.name.accessor.js, entity.name.class.js#71B1FE
support.class.builtin.js#FFFA9E
variable.parameter.js, constant.other.object.key.js, variable.other.readwrite.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#97A7C8
constant.language.boolean.false.js, constant.language.boolean.true.js#EAB780
support.variable.property.dom.js, entity.name.type.new.js#E76572
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#E26674
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#56A3B1
entity.other.attribute-name.id#85AC3A
support.type.property-name.css#4FF2F8
entity.other.attribute-name.id.css#FFFA9E
constant.other.color.rgb-value.hex.css#4FF2F8
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#85AC3A
support.function#4FF2F8
support.constant#E76572
support.type, support.class#4DB1D8
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#D8D8D8
none#D8D8D8
keyword.operator#4FF2F8
keyword#D59DF6
variable, meta.selector.css#E26674
entity.name.function, meta.require, support.function.any-method#7CAFC2
support.class, entity.name.class, entity.name.type.class#E76572
meta.class#F8F8F8
keyword.other.special-method#7CAFC2
storage#BA8BAF
support.function#4FF2F8
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

Shiki preview

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

Loading...

Electron Fresh by program247365 - VS Code Theme