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#66dddd
  • activityBar.activeBorder#ffffff
  • activityBar.background#114250
  • activityBar.inactiveForeground#efff5f
  • activityBarBadge.background#d9f37c
  • activityBarBadge.foreground#000000
  • badge.background#0b4658
  • badge.foreground#74dac9
  • button.background#2AA19899
  • button.foreground#ffffff
  • debugExceptionWidget.background#00212B
  • debugExceptionWidget.border#88fabb
  • debugIcon.startForeground#f2ff79
  • 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#01313d
  • editor.findMatchBackground#363d46
  • editor.findMatchForeground#97e9c0
  • editor.findMatchHighlightBackground#363d46
  • editor.findMatchHighlightBorder#75face
  • editor.findMatchHighlightForeground#00ffb3
  • editor.foreground#fffd9e
  • 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#2c5846
  • editorWhitespace.foreground#93A1A180
  • editorWidget.background#00212B
  • errorForeground#ffeaea
  • extensionButton.prominentBackground#000000
  • extensionIcon.starForeground#d9ff6f
  • extensionIcon.verifiedForeground#85eebd
  • focusBorder#37d1c4
  • gitDecoration.modifiedResourceForeground#98e9ca
  • gitDecoration.stageModifiedResourceForeground#f2ffab
  • icon.foreground#59b898
  • input.background#123c4d
  • input.foreground#e1ff75
  • input.placeholderForeground#a0fde1
  • 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#061c46
  • menu.foreground#efff5f
  • menu.selectionBackground#005a6f
  • menu.selectionBorder#efff5f
  • minimap.selectionHighlight#214b45
  • notificationCenter.border#ffffff
  • notifications.background#04344b
  • notifications.border#000000
  • notifications.foreground#6eeece
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#f1ffc0
  • notificationsWarningIcon.foreground#f3ef1d
  • notificationToast.border#ffffff
  • panel.background#094850
  • panel.border#ffffff
  • panelSection.dropBackground#ffffff
  • panelSectionHeader.background#ffffff
  • panelTitle.activeBorder#95f5bd
  • panelTitle.activeForeground#95f5bd
  • panelTitle.inactiveForeground#f3ff83
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#00212B
  • peekViewTitle.background#00212B
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#04a68b
  • quickInputList.focusBackground#005A6F
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#f3fd5e
  • scrollbarSlider.background#83eed3
  • scrollbarSlider.hoverBackground#f3fd5e
  • selection.background#00000099
  • sideBar.background#060d25
  • sideBar.border#f1ff9f
  • sideBar.foreground#82dfc7
  • sideBarSectionHeader.background#03505a
  • sideBarSectionHeader.foreground#f3ff83
  • sideBarStickyScroll.border#ff0000
  • sideBarTitle.foreground#efff5f
  • 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#7dddb0
  • terminal.ansiBrightBlue#7dddb0
  • terminal.ansiBrightCyan#95e2f5
  • terminal.ansiBrightGreen#f2f564
  • terminal.ansiBrightRed#00ffd5
  • terminal.ansiBrightYellow#11c08c
  • terminal.ansiCyan#eeff8f
  • terminal.ansiGreen#ffffff
  • terminal.ansiMagenta#9ef0ec
  • terminal.ansiRed#3cd1ff
  • terminal.ansiYellow#6feece
  • terminal.background#0e0b38
  • terminal.foreground#f4ff5e
  • textLink.activeForeground#4ef0c7
  • textLink.foreground#e1f88e
  • 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#ffffff
string.regexp#b9b5b5
constant.numeric#D33682
variable.language, variable.other#84ffd6
keyword#05a0a0bold
storage#f8ff96bold
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#fffd7a
entity.other.inherited-class#65a7c5
entity.name.tag#b8b8b8
punctuation.definition.tag#586E75
entity.other.attribute-name#93A1A1
support.function#006d6d
punctuation.separator.continuation#2fdcb1
support.type, support.class#edf7ae
support.type.exception#ff0000
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
source.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 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 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#53dfb0
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, #aee9f3
keyword.control#53ff9b
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#11e9cc
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#868b96
support.variable, constant.numeric, support.constant#7efff4bold
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#00ffff
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#e6f893
meta.function-call.generic.python#ecffb7
support.type#d4d4d4
storage.type#56ddff
constant.character.escape#51e7ec
variable.language#f7f89aitalic
string.quoted.single, string.quoted.triple, string.quoted.other#fffeac
variable, meta.definition.variable.name, support.variable#feffac
meta.structure.dictionary.key.python#2accfd
*url*, *link*, *uri*#ffffffitalic underline

Shiki preview

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

Loading...

Dan Heng Imbibitor Lunae VS Code Theme - Coding Theme