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.activeBackground#2A5B8022
  • activityBar.activeBorder#69FFC9
  • activityBar.background#0F131A
  • activityBar.border#2C3540
  • activityBar.foreground#7E8C9A
  • button.background#2E8D50
  • button.foreground#ffffff
  • button.hoverBackground#3DA060
  • dropdown.background#1B2028
  • dropdown.border#3A4552
  • dropdown.foreground#E0E8F0
  • editor.background#0B0E14
  • editor.findMatchBackground#FFD33D44
  • editor.findMatchHighlightBackground#FFD33D22
  • editor.foreground#E0E8F0
  • editor.lineHighlightBackground#161B24
  • editor.selectionBackground#2A5B8080
  • editor.selectionHighlightBackground#2A5B8040
  • editor.wordHighlightBackground#3D4A5Caa
  • editor.wordHighlightStrongBackground#3D4A5C66
  • editorCursor.foreground#69FFC9
  • editorLineNumber.activeForeground#8FD4C1
  • editorLineNumber.foreground#4F5968
  • editorSuggestWidget.background#1B2028
  • editorSuggestWidget.border#3A4552
  • editorSuggestWidget.selectedBackground#2A5B8040
  • editorWidget.background#1B2028
  • editorWidget.border#3A4552
  • extensionButton.prominentBackground#2E8D50
  • extensionButton.prominentHoverBackground#3DA060
  • gitDecoration.addedResourceForeground#73DDAA
  • gitDecoration.conflictingResourceForeground#CC88D9
  • gitDecoration.deletedResourceForeground#E76F7C
  • gitDecoration.ignoredResourceForeground#6A7B8E
  • gitDecoration.modifiedResourceForeground#5BA9E2
  • gitDecoration.untrackedResourceForeground#F7E16D
  • input.background#1B2028
  • input.border#3A4552
  • input.foreground#E0E8F0
  • input.placeholderForeground#7E8C9A
  • inputOption.activeBackground#2A5B80
  • inputOption.activeBorder#69FFC9
  • list.activeSelectionBackground#2A5B80
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#2A5B8066
  • list.highlightForeground#69FFC9
  • list.hoverBackground#1D222B
  • list.inactiveSelectionBackground#21262d
  • notificationCenter.border#3A4552
  • notificationCenterHeader.background#1B2028
  • notifications.background#1B2028
  • notifications.border#3A4552
  • panel.background#0B0E14
  • panel.border#2C3540
  • panelTitle.activeForeground#E0E8F0
  • panelTitle.inactiveForeground#7E8C9A
  • peekView.border#69FFC9
  • peekViewEditor.background#0B0E14
  • peekViewResult.background#1B2028
  • peekViewTitle.background#2A5B80
  • scrollbarSlider.activeBackground#3A455270
  • scrollbarSlider.background#3A455230
  • scrollbarSlider.hoverBackground#3A455250
  • sideBar.background#0F131A
  • sideBar.border#2C3540
  • sideBar.foreground#CBD5E0
  • sideBarSectionHeader.background#1B2028
  • sideBarSectionHeader.foreground#F0F6FC
  • statusBar.background#0F131A
  • statusBar.border#2C3540
  • statusBar.debuggingBackground#E06C75
  • statusBar.foreground#7E8C9A
  • statusBar.noFolderBackground#0F131A
  • tab.activeBackground#0B0E14
  • tab.activeBorder#69FFC9
  • tab.activeBorderTop#69FFC9
  • tab.activeForeground#E0E8F0
  • tab.border#2C3540
  • tab.inactiveBackground#1B2028
  • tab.inactiveForeground#7E8C9A
  • terminal.ansiBlack#2A2F3A
  • terminal.ansiBlue#5BA9E2
  • terminal.ansiBrightBlack#6A7B8E
  • terminal.ansiBrightBlue#7EC2FA
  • terminal.ansiBrightCyan#88F5FF
  • terminal.ansiBrightGreen#88FFC9
  • terminal.ansiBrightMagenta#E0A0F0
  • terminal.ansiBrightRed#FF8A96
  • terminal.ansiBrightWhite#F0F6FC
  • terminal.ansiBrightYellow#FFF18A
  • terminal.ansiCyan#66E2F5
  • terminal.ansiGreen#73DDAA
  • terminal.ansiMagenta#CC88D9
  • terminal.ansiRed#E76F7C
  • terminal.ansiWhite#E0E8F0
  • terminal.ansiYellow#F7E16D
  • terminal.background#0B0E14
  • terminal.foreground#E0E8F0
  • terminal.selectionBackground#2A5B8066
  • titleBar.activeBackground#0F131A
  • titleBar.activeForeground#E0E8F0
  • titleBar.border#2C3540

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#178d00italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.import, keyword.type#CC88D9bold
string, string.quoted, string.template, punctuation.definition.string, markup.inline.raw#73DDAA
constant.numeric, constant.language, constant.character, constant.other, variable.language.this#F7E16D
entity.name.function, support.function, meta.function-call.generic, variable.function, entity.name.method#5BA9E2bold
entity.name.type, entity.name.class, support.class, entity.other.inherited-class, storage.type.class, entity.name.namespace, entity.name.scope-resolution#66E2F5bold
variable, entity.name.variable, meta.definition.variable.name, support.variable#E0E8F0
meta.object-literal.key, support.type.property-name, variable.other.property, variable.other.object.property, entity.name.tag.yaml#7EC2FA
entity.name.tag, punctuation.definition.tag, markup.list#E76F7C
entity.other.attribute-name, meta.attribute#F7E16D
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition, meta.brace, meta.block#7E8C9A
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.assignment#69FFC9
string.regexp, constant.character.escape#D0BFFF
support.type.property-name.json, meta.structure.dictionary.key.json#5BA9E2
markup.heading, entity.name.section.markdown#5BA9E2bold
markup.link, string.other.link#66E2F5underline
markup.bold#F7E16Dbold
markup.italic#CC88D9italic
markup.quote#7E8C9Aitalic
invalid, invalid.illegal#FFFFFF
Lucifer Dark by Nishant Unavane - VS Code Theme