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.activeBackground#2cb69f
  • activityBar.activeBorder#00f7ff
  • activityBar.background#040b0e
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#f0ec1d
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#fbff00
  • badge.background#0b4658
  • badge.foreground#74dac9
  • button.background#0d3b50
  • button.foreground#ffee07
  • commandCenter.activeBackground#000000
  • commandCenter.activeBorder#82ffcf
  • commandCenter.activeForeground#f8e800
  • commandCenter.background#011b33
  • commandCenter.border#f8e800
  • commandCenter.foreground#f8e800
  • commandCenter.inactiveForeground#ffffff
  • debugExceptionWidget.background#00212B
  • debugExceptionWidget.border#88fabb
  • debugIcon.startForeground#fff021
  • debugToolBar.background#00212B
  • diffEditor.insertedLineBackground#6ceeee2d
  • diffEditor.insertedTextBackground#81d4c13f
  • diffEditor.removedLineBackground#0e0849a1
  • diffEditor.removedTextBackground#56e0bd3f
  • diffEditorOverview.insertedForeground#0e0f55
  • diffEditorOverview.removedForeground#ff0000
  • dropdown.background#00212B
  • dropdown.border#2AA19899
  • editor.background#000000
  • editor.findMatchBackground#363d46
  • editor.findMatchForeground#97e9c0
  • editor.findMatchHighlightBackground#363d46
  • editor.findMatchHighlightBorder#75face
  • editor.findMatchHighlightForeground#00ffb3
  • editor.foreground#f3ef1c
  • editor.lineHighlightBackground#073642
  • editor.lineHighlightBorder#eaf17f
  • editor.selectionBackground#274642
  • editor.selectionForeground#ff0000
  • editor.selectionHighlightBackground#005A6FAA
  • editor.wordHighlightBackground#004454AA
  • editor.wordHighlightStrongBackground#005A6FAA
  • editorBracketHighlight.foreground1#cdcdcdff
  • editorBracketHighlight.foreground2#84ecc1
  • editorBracketHighlight.foreground3#4ce9e9
  • editorCursor.foreground#c5d301
  • editorGroup.border#00212B
  • editorGroup.dropBackground#2AA19844
  • editorGroupHeader.tabsBackground#004052
  • editorHoverWidget.background#004052
  • editorIndentGuide.activeBackground#C3E1E180
  • editorIndentGuide.background#93A1A180
  • editorLineNumber.activeForeground#edf042
  • editorLineNumber.dimmedForeground#777577
  • editorLineNumber.foreground#250375
  • editorWhitespace.foreground#93A1A180
  • editorWidget.background#00212B
  • errorForeground#ffeaea
  • extensionButton.prominentBackground#000000
  • extensionIcon.starForeground#d9ff6f
  • extensionIcon.verifiedForeground#85eebd
  • focusBorder#37d1c4
  • gitDecoration.modifiedResourceForeground#71ffc9
  • gitDecoration.stageModifiedResourceForeground#f2ffab
  • icon.foreground#ffef0f
  • input.background#092c3a
  • input.foreground#fbff19
  • input.placeholderForeground#00ffdd
  • inputOption.activeBorder#2AA19899
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#005A6F
  • list.dropBackground#00445488
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#004454AA
  • list.inactiveSelectionBackground#00445488
  • menu.background#020916
  • menu.foreground#fdef24
  • menu.selectionBackground#023d4b
  • menu.selectionBorder#00fff2
  • minimap.selectionHighlight#214b45
  • notificationCenter.border#ffffff
  • notifications.background#010e14
  • notifications.border#000000
  • notifications.foreground#fff12d
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#f1ffc0
  • notificationsWarningIcon.foreground#f3ef1d
  • notificationToast.border#ffffff
  • panel.background#001416
  • panel.border#ffffff
  • panelSection.dropBackground#ffffff
  • panelSectionHeader.background#ffffff
  • panelTitle.activeBorder#91f8fc
  • panelTitle.activeForeground#75ecbf
  • panelTitle.inactiveForeground#fbff19
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#00212B
  • peekViewTitle.background#00212B
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • ports.iconRunningProcessForeground#63f788
  • progressBar.background#04a68b
  • quickInputList.focusBackground#005A6F
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#f1f525
  • scrollbarSlider.background#83eed3
  • scrollbarSlider.hoverBackground#f1f525
  • selection.background#00000099
  • sideBar.background#070707
  • sideBar.border#fdfa2c
  • sideBar.foreground#82dfc7
  • sideBarSectionHeader.background#012f35
  • sideBarSectionHeader.foreground#fffc3b
  • sideBarStickyScroll.border#ff0000
  • sideBarTitle.background#070707
  • sideBarTitle.foreground#ffee02
  • statusBar.background#063949
  • statusBar.debuggingBackground#00212B
  • statusBar.foreground#f1ff9f
  • statusBar.noFolderBackground#00212B
  • statusBarItem.prominentBackground#003847
  • statusBarItem.prominentHoverBackground#003847
  • statusBarItem.remoteBackground#04685f99
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#031a20
  • tab.activeBorderTop#f1ff9f
  • tab.activeForeground#efff5f
  • tab.activeModifiedBorder#f1ff9f
  • tab.border#003847
  • tab.inactiveBackground#0d022c
  • tab.inactiveForeground#b0b1b0
  • tab.inactiveModifiedBorder#003847
  • tab.lastPinnedBorder#2AA19844
  • tab.unfocusedActiveBackground#044353
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedActiveModifiedBorder#031a20
  • tab.unfocusedInactiveBackground#0d022c
  • tab.unfocusedInactiveForeground#ffffff
  • terminal.ansiBlue#093e5c
  • terminal.ansiBrightBlue#81fcc2
  • terminal.ansiBrightCyan#95e2f5
  • terminal.ansiBrightGreen#0af1f1
  • terminal.ansiBrightRed#00ffd5
  • terminal.ansiBrightYellow#00ffb3
  • terminal.ansiCyan#fff23f
  • terminal.ansiGreen#ffffff
  • terminal.ansiMagenta#00f5e0
  • terminal.ansiRed#009efa
  • terminal.ansiYellow#6feece
  • terminal.background#020116
  • terminal.foreground#f3db05
  • textLink.activeForeground#00fcbd
  • textLink.foreground#ffffff
  • titleBar.activeBackground#002C39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#839496
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#839496
comment#586E75italic
string#08eaf1
string.regexp#06b87c
constant.numeric#D33682
variable.language, variable.other#84ffd6
keyword#05a0a0bold
storage#99ecf1bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#ffffff
entity.name.function#73e7ad
punctuation.definition.variable#ffffff
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F
constant.language, meta.preprocessor#00ff80
support.function.construct, keyword.other.new#c2c2c2
constant.character, constant.other#05787c
entity.other.inherited-class#65a7c5
entity.name.tag#b8b8b8
punctuation.definition.tag#586E75
entity.other.attribute-name#93A1A1
support.function#fff78e
punctuation.separator.continuation#2fdcb1
support.type, support.class#edf7ae
support.type.exception#ff0000bold
invalid#DC322F
meta.diff, meta.diff.header#2ddab4italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#2fa57d
markup.quote#eefd8f
markup.list#53d6b5
markup.bold, markup.italic#83faf4
markup.boldbold
markup.italicitalic
markup.strikethrough#ff0000strikethrough
markup.inline.raw#2AA198
markup.heading#e0f38dbold
markup.heading.setext#58e6c2
*url*, *link*, *uri*#78f8aditalic underline
source.json meta.structure.dictionary.json support.type.property-name.json#f8f53f
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff23b
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#76ecd9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f3fd95
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#94dcf1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3bd2e6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#48dbbb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eeff8d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0a0946
entity.name.function, support.function, support.constant.handlebars#00f3fc
entity.name.function.python#8becc4bold
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, meta.item-access.arguments.python, #fffc3a
keyword.control#00fcfc
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, keyword.operator.new.ts, meta.object-literal.key.ts#0aadca
comment.line.double-slash.cs, comment.block.cs, punctuation.definition.comment.json.comments, comment.line.double-slash.js, meta.structure.array.json.comments, meta.structure.dictionary.value.json.comments, meta.structure.dictionary.json.comments, source.json.comments, comment.block.css, comment.block.html, meta.property-list.css, comment.line.number-sign.python, punctuation.definition.comment.cs, comment.block.documentation.cs, punctuation.definition.comment.ts, comment.line.double-slash.ts, comment.line.scss, comment.block.ts, comment.block.scss, comment.block.documentation.ts, comment.line.double-slash.tsx, comment.block.tsx#b4b4b4
support.variable, constant.numeric, support.constant#fbff00bold
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#ffffff
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, variable.object.property.ts#00fcfc
meta.function-call.generic.python#0ff7ff
support.type#d4d4d4
storage.type#00ffb3
constant.character.escape#51e7ec
variable.language#26f8f8italic
string.quoted.single, string.quoted.triple, string.quoted.other#23ffe2
variable, meta.definition.variable.name, support.variable#00e8f8
meta.structure.dictionary.key.python#2accfd

Shiki preview

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

Loading...

Dan Heng Imbibitor Lunae VS Code Theme - Coding Theme