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.activeBorder#5A4FCF
  • activityBar.background#F3F2EE
  • activityBar.foreground#5A5A5A
  • activityBarBadge.background#5A4FCF
  • activityBarBadge.foreground#FFFFFF
  • button.background#5A4FCF
  • button.foreground#FFFFFF
  • button.hoverBackground#7A6FDF
  • diffEditor.insertedTextBackground#5FB85F20
  • diffEditor.removedTextBackground#DB5A5A20
  • editor.background#FDFCF8
  • editor.findMatchBackground#FFE4B5
  • editor.findMatchHighlightBackground#FFF5DC
  • editor.foreground#3A3A3A
  • editor.inactiveSelectionBackground#EDE9D5
  • editor.lineHighlightBackground#F9F8F4
  • editor.lineHighlightBorder#F3F2EE
  • editor.selectionBackground#E3DFC8
  • editor.selectionHighlightBackground#F0ECD8
  • editor.wordHighlightBackground#F5F1E0
  • editor.wordHighlightStrongBackground#EDE9D5
  • editorBracketHighlight.foreground1#D73502
  • editorBracketHighlight.foreground2#5A4FCF
  • editorBracketHighlight.foreground3#0C7D9D
  • editorBracketHighlight.foreground4#B8860B
  • editorBracketHighlight.foreground5#8B4789
  • editorBracketHighlight.foreground6#2E8B57
  • editorBracketMatch.background#D8F0E3
  • editorBracketMatch.border#98D8B8
  • editorCursor.foreground#5A4FCF
  • editorError.foreground#D73502
  • editorGutter.addedBackground#5FB85F
  • editorGutter.background#FAF9F5
  • editorGutter.deletedBackground#DB5A5A
  • editorGutter.modifiedBackground#5A8FDB
  • editorHint.foreground#5A4FCF
  • editorIndentGuide.activeBackground#D0CCC2
  • editorIndentGuide.background#E8E6E0
  • editorInfo.foreground#0C7D9D
  • editorLineNumber.activeForeground#5A5A5A
  • editorLineNumber.foreground#9B9B9B
  • editorRuler.foreground#E8E6E0
  • editorSuggestWidget.background#F9F8F4
  • editorSuggestWidget.border#E0DDD5
  • editorSuggestWidget.selectedBackground#E3DFC8
  • editorWarning.foreground#B8860B
  • editorWidget.background#F9F8F4
  • editorWidget.border#E0DDD5
  • gitDecoration.conflictingResourceForeground#D73502
  • gitDecoration.deletedResourceForeground#DB5A5A
  • gitDecoration.ignoredResourceForeground#9B9B9B
  • gitDecoration.modifiedResourceForeground#5A8FDB
  • gitDecoration.untrackedResourceForeground#5FB85F
  • input.background#FFFFFF
  • input.border#E0DDD5
  • input.foreground#3A3A3A
  • input.placeholderForeground#9B9B9B
  • inputOption.activeBorder#5A4FCF
  • list.activeSelectionBackground#E3DFC8
  • list.activeSelectionForeground#3A3A3A
  • list.focusBackground#E3DFC8
  • list.hoverBackground#F0ECD8
  • list.inactiveSelectionBackground#EDE9D5
  • peekView.border#5A4FCF
  • peekViewEditor.background#F9F8F4
  • peekViewResult.background#F3F2EE
  • peekViewTitle.background#F3F2EE
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#00000040
  • scrollbarSlider.background#00000020
  • scrollbarSlider.hoverBackground#00000030
  • sideBar.background#F7F6F2
  • sideBar.foreground#4A4A4A
  • sideBarTitle.foreground#3A3A3A
  • statusBar.background#F3F2EE
  • statusBar.debuggingBackground#FFE4B5
  • statusBar.debuggingForeground#3A3A3A
  • statusBar.foreground#5A5A5A
  • statusBar.noFolderBackground#F3F2EE
  • tab.activeBackground#FDFCF8
  • tab.activeBorder#5A4FCF
  • tab.activeForeground#3A3A3A
  • tab.hoverBackground#F9F8F4
  • tab.inactiveBackground#F3F2EE
  • tab.inactiveForeground#6A6A6A
  • terminal.ansiBlack#3A3A3A
  • terminal.ansiBlue#5A4FCF
  • terminal.ansiBrightBlack#6A6A6A
  • terminal.ansiBrightBlue#7A6FDF
  • terminal.ansiBrightCyan#2E9DB7
  • terminal.ansiBrightGreen#7AC87A
  • terminal.ansiBrightMagenta#A567A3
  • terminal.ansiBrightRed#E85D2C
  • terminal.ansiBrightWhite#F3F2EE
  • terminal.ansiBrightYellow#D4A31D
  • terminal.ansiCyan#0C7D9D
  • terminal.ansiGreen#5FB85F
  • terminal.ansiMagenta#8B4789
  • terminal.ansiRed#D73502
  • terminal.ansiWhite#E8E6E0
  • terminal.ansiYellow#B8860B
  • terminal.background#FDFCF8
  • terminal.foreground#3A3A3A
  • titleBar.activeBackground#F3F2EE
  • titleBar.activeForeground#3A3A3A
  • titleBar.inactiveBackground#F7F6F2
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8A7Aitalic
string, string.quoted, string.template#5FB85F
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#D73502
constant.language.boolean, constant.language.boolean.true, constant.language.boolean.false#D73502bold
keyword, keyword.control, keyword.operator, keyword.other, storage, storage.type, storage.modifier#5A4FCFbold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#8B4789
entity.name.function, support.function, meta.function-call#0C7D9Dbold
variable.parameter, meta.parameter#B8860Bitalic
variable, variable.other, variable.other.readwrite, variable.other.local#3A3A3A
variable.other.property, variable.other.object.property, support.type.property-name#2E8B57
constant, constant.language, constant.character, constant.other#D73502
entity.name.class, entity.name.type.class, support.class#B8860Bbold
entity.name.type, support.type, support.type.primitive#B8860B
variable.language.this, variable.language.self, variable.language.super#5A4FCFitalic
entity.other.attribute-name#0C7D9D
entity.name.tag, punctuation.definition.tag#5A4FCF
support.type.property-name.css, support.type.vendor-prefix.css#0C7D9D
support.constant.property-value.css, support.constant.color.css#D73502
keyword.other.unit.css#B8860B
markup.heading, entity.name.section#5A4FCFbold
markup.boldbold
markup.italicitalic
markup.underline.link#0C7D9Dunderline
markup.inline.raw, markup.raw#3A3A3A
support.type.property-name.json#0C7D9D
entity.name.tag.yaml#0C7D9D
invalid, invalid.illegal#FFFFFF
invalid.deprecated#D73502strikethrough
markup.inserted, meta.diff.header.to-file#5FB85F
markup.deleted, meta.diff.header.from-file#D73502
string.regexp#8B4789
constant.character.escape#8B4789bold
meta.embedded, source.embedded
punctuation.definition, punctuation.separator, punctuation.terminator#6A6A6A
meta.decorator, meta.decorator.python#8B4789italic
string.template, punctuation.definition.template-expression#5FB85F
variable.other.template, meta.template.expression#D73502
Serene Dawn by happyMix - VS Code Theme