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.

  • button.background#4a5560
  • button.foreground#e8e8e8
  • button.hoverBackground#5a6570
  • checkbox.background#1a1a1a
  • checkbox.border#4a4a4a
  • diffEditor.insertedTextBackground#4a805020
  • diffEditor.removedTextBackground#80505020
  • dropdown.background#1a1a1a
  • dropdown.border#3a3a3a
  • editor.background#1e1e1e
  • editor.findMatchBackground#5a604080
  • editor.findMatchHighlightBackground#5a604040
  • editor.foreground#d4d4d4
  • editor.selectionBackground#3a4550
  • editor.selectionHighlightBackground#3a455040
  • editor.wordHighlightBackground#3a455050
  • editorBracketMatch.background#3a455060
  • editorBracketMatch.border#6a7580
  • editorCursor.foreground#d4d4d4
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.background#1a1a1a
  • editorHoverWidget.background#1a1a1a
  • editorHoverWidget.border#3a3a3a
  • editorIndentGuide.activeBackground1#4a4a4a
  • editorIndentGuide.background1#2a2a2a
  • editorLineNumber.activeForeground#a0a0a0
  • editorLineNumber.foreground#6a6a6a
  • editorRuler.foreground#2a2a2a
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#3a3a3a
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.selectedBackground#3a4550
  • editorWhitespace.foreground#3a3a3a
  • editorWidget.background#1a1a1a
  • editorWidget.border#3a3a3a
  • gitDecoration.addedResourceForeground#ffffff
  • gitDecoration.conflictingResourceForeground#d09050
  • gitDecoration.deletedResourceForeground#707070
  • gitDecoration.ignoredResourceForeground#454545
  • gitDecoration.modifiedResourceForeground#e2b050
  • gitDecoration.stageDeletedResourceForeground#707070
  • gitDecoration.stageModifiedResourceForeground#e2b050
  • gitDecoration.untrackedResourceForeground#ffffff
  • icon.foreground#a0a0a0
  • input.background#1a1a1a
  • input.border#3a3a3a
  • input.foreground#d4d4d4
  • input.placeholderForeground#7a7a7a
  • inputOption.activeBorder#6a7580
  • list.activeSelectionBackground#3a4550
  • list.focusBackground#3a4045
  • list.highlightForeground#ffffff
  • list.hoverBackground#2a3035
  • list.inactiveSelectionBackground#2a3540
  • minimap.background#1a1a1a
  • minimapSlider.background#4a4a4a40
  • peekView.border#4a5560
  • peekViewEditor.background#1a1a1a
  • peekViewResult.background#1a1a1a
  • peekViewTitle.background#1a1a1a
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#6a6a6aa0
  • scrollbarSlider.background#4a4a4a60
  • scrollbarSlider.hoverBackground#5a5a5a80
  • sideBar.foreground#909090
  • sideBarSectionHeader.foreground#d0d0d0
  • symbolIcon.folderForeground#d0c8b0
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.border#00000000
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • tree.indentGuidesStroke#3a3a3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7c8590italic
string, string.quoted, string.template#b5cea8
constant.character.escape#d7ba7d
keyword, storage.type, storage.modifier#c586c0
keyword.control, keyword.operator.new#c586c0
keyword.operator, punctuation#d4d4d4
entity.name.function, support.function, meta.function-call#dcdcaa
meta.method.declaration, entity.name.method#dcdcaa
variable, variable.other, variable.parameter#9cdcfe
variable.other.property, variable.other.object.property#9cdcfe
variable.other.constant, constant.other#4fc1ff
constant.numeric#b5cea8
constant.language.boolean#569cd6
constant.language.null, constant.language.undefined#569cd6
entity.name.type, entity.name.class, support.type, support.class#4ec9b0
entity.name.type.interface#4ec9b0
entity.name.type.parameter#4ec9b0
entity.name.function.decorator, meta.decorator, punctuation.decorator#dcdcaa
entity.name.tag, punctuation.definition.tag#569cd6
entity.other.attribute-name#9cdcfe
support.type.property-name.css#9cdcfe
support.constant.property-value.css#ce9178
keyword.other.unit.css#b5cea8
string.regexp#d16969
markup.heading, entity.name.section.markdown#569cd6bold
markup.bold#569cd6bold
markup.italic#c586c0italic
markup.underline.link#4ec9b0
markup.inline.raw, markup.fenced_code#ce9178
support.type.property-name.json#9cdcfe
entity.name.tag.yaml#9cdcfe
keyword.control.import, keyword.control.export, keyword.control.from#c586c0
entity.name.package, entity.name.module#ce9178
variable.language.this, variable.language.self#569cd6italic
invalid, invalid.illegal#f44747
invalid.deprecated#d19a66strikethrough
Solar Theme by debiday - VS Code Theme