Skip to main content
CodingTheme

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.activeBorder#aaff83
  • activityBar.background#0d1117
  • activityBar.border#30363d
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#8b949e
  • activityBarBadge.background#1f6feb
  • activityBarBadge.foreground#f0f6fc
  • badge.background#0d419d
  • badge.foreground#79c0ff
  • breadcrumb.activeSelectionForeground#8b949e
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#8b949e
  • breadcrumbPicker.background#1c2128
  • button.background#238636
  • button.foreground#fafafa
  • button.hoverBackground#2ea043
  • button.secondaryBackground#292e34
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#30363d
  • checkbox.background#161b22
  • checkbox.border#30363d
  • debugToolBar.background#1c2128
  • descriptionForeground#8b949e
  • diffEditor.insertedTextBackground#2ea04333
  • diffEditor.removedTextBackground#da363333
  • dropdown.background#1c2128
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • dropdown.listBackground#1c2128
  • editor.background#0d1117
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#3FB95025
  • editor.foldBackground#6e76811a
  • editor.foreground#c9d1d9
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#161b22
  • editor.linkedEditingBackground#3392FF22
  • editor.selectionBackground#3392FF44
  • editor.selectionHighlightBackground#17E5E633
  • editor.selectionHighlightBorder#17E5E600
  • editor.stackFrameHighlightBackground#D2992225
  • editor.wordHighlightBackground#17E5E600
  • editor.wordHighlightBorder#17E5E699
  • editor.wordHighlightStrongBackground#17E5E600
  • editor.wordHighlightStrongBorder#17E5E666
  • editorBracketMatch.background#17E5E650
  • editorBracketMatch.border#17E5E600
  • editorCursor.foreground#79c0ff
  • editorGroup.border#30363d
  • editorGroupHeader.tabsBackground#090c10
  • editorGroupHeader.tabsBorder#30363d
  • editorGutter.addedBackground#196c2e
  • editorGutter.deletedBackground#b62324
  • editorGutter.modifiedBackground#9e6a03
  • editorIndentGuide.activeBackground#30363d
  • editorIndentGuide.background#21262d
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#8b949e
  • editorOverviewRuler.border#010409
  • editorWhitespace.foreground#484f58
  • editorWidget.background#1c2128
  • errorForeground#f85149
  • focusBorder#388bfd
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#56d364
  • gitDecoration.conflictingResourceForeground#e3b341
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#484f58
  • gitDecoration.modifiedResourceForeground#e3b341
  • gitDecoration.submoduleResourceForeground#8b949e
  • gitDecoration.untrackedResourceForeground#56d364
  • input.background#0d1117
  • input.border#21262d
  • input.foreground#c9d1d9
  • input.placeholderForeground#484f58
  • list.activeSelectionBackground#21262d
  • list.activeSelectionForeground#c9d1d9
  • list.focusBackground#21262d
  • list.focusForeground#f0f6fc
  • list.highlightForeground#388bfd
  • list.hoverBackground#161b22
  • list.hoverForeground#c9d1d9
  • list.inactiveFocusBackground#161b22
  • list.inactiveSelectionBackground#161b22
  • list.inactiveSelectionForeground#c9d1d9
  • notificationCenterHeader.background#0d1117
  • notificationCenterHeader.foreground#6e7681
  • notifications.background#161b22
  • notifications.border#30363d
  • notifications.foreground#8b949e
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#58a6ff
  • notificationsWarningIcon.foreground#f0883e
  • panel.background#090c10
  • panel.border#30363d
  • panelInput.border#30363d
  • panelTitle.activeBorder#aaff83
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#0d111788
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#0d1117
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#21262d
  • pickerGroup.foreground#8b949e
  • progressBar.background#1f6feb
  • quickInput.background#0d1117
  • quickInput.foreground#c9d1d9
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#484F5888
  • scrollbarSlider.background#484F5833
  • scrollbarSlider.hoverBackground#484F5844
  • settings.headerForeground#8b949e
  • settings.modifiedItemIndicator#9e6a03
  • sideBar.background#090c10
  • sideBar.border#30363d
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#090c10
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#0d1117
  • statusBar.border#30363d
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#f0f6fc
  • statusBar.foreground#8b949e
  • statusBar.noFolderBackground#0d1117
  • statusBarItem.prominentBackground#161b22
  • tab.activeBackground#0d1117
  • tab.activeBorder#0d1117
  • tab.activeBorderTop#aaff83
  • tab.activeForeground#c9d1d9
  • tab.border#30363d
  • tab.hoverBackground#0d1117
  • tab.inactiveBackground#090c10
  • tab.inactiveForeground#8b949e
  • tab.unfocusedActiveBorder#0d1117
  • tab.unfocusedActiveBorderTop#30363d
  • tab.unfocusedHoverBackground#161b22
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#faf88c
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#bdc4cc
  • terminal.ansiYellow#F6BE00
  • terminal.foreground#f0f0f0
  • textBlockQuote.background#090c10
  • textBlockQuote.border#3b434b
  • textCodeBlock.background#f0f6fc26
  • textLink.activeForeground#58a6ff
  • textLink.foreground#58a6ff
  • textPreformat.foreground#8b949e
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#0d1117
  • titleBar.activeForeground#8b949e
  • titleBar.border#30363d
  • titleBar.inactiveBackground#090c10
  • titleBar.inactiveForeground#8b949e
  • tree.indentGuidesStroke#21262d
  • welcomePage.buttonBackground#21262d
  • welcomePage.buttonHoverBackground#30363d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
unknown, dont.know#bce7ff
meta.paragraph.markdown, string.other.link.description.title.markdown#EEFFFF
entity.name.section.markdown, punctuation.definition.heading.markdown#5ABEB0
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#82AAFF
markup.quote.markdown#82AAFF
markup.bold.markdown, punctuation.definition.bold.markdown#57cdffbold
markup..markdown, punctuation.definition..markdown#d4bfff
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#f7ecb5
punctuation.definition.metadata.markdown#f3b8c2
markup.underline.link.image.markdown, markup.underline.link.markdown#6dbdfa
comment#999999
punctuation.definition.string#6bff81
string#bcf0c0
string.quoted, variable.other.readwrite.js#bcf0c0
constant.numeric#FAF9F6
constant.language.boolean#ffcc66
constant#c98ff5
constant.language, punctuation.definition.constant, variable.other.constant#ffd173
constant.character, constant.other#82AAFF
variable#a4ceee
variable.other.object.js#dcdcdc
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#dcdcdc
meta.class entity.name.type.class.tsx#d29ffcff
entity.name.type.tsx, entity.name.type.module.tsx#d29ffcff
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#BFB9FA
variable.other.object.property#f7ecb5
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#80bfff
variable.other.readwrite.js, variable.parameter#80bfff
string.template meta.template.expression#dfbfff
string.template punctuation.definition.string#f2f2f2
storage#052136
keyword, storage.type, storage.modifier, variable.language.this#95e6cb
keyword.operator#d5ff80
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#5ccfe6
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#d3eed6
entity.name.class#f7ecb5
entity.other.inherited-class#4FB4D8
variable.other.readwrites, meta.definition.variable#f7ecb5
support.variable.property#dfbfff
entity.name.function#9be9fd
variable.parameter#fafafa
entity.name.tag#6dbdfa
entity.name.type#dfbfff
entity.other.attribute-name#f7ecb5
punctuation.decorator#f7ecb5
punctuation.definition.block, punctuation.definition.tag#f2f2f2
support.function#f7ecb5
support.constant#8dec95
support.type, support.class#5ccfe6
support.other.variable#e4e4e4
invalid#f28779 bold underline
invalid.deprecated#f28779 bold underline
support.type.property-name.json#bcf0c0
support.constant.json#addb67
meta.structure.dictionary.value.json string.quoted.double#5ccfe6
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f29fd8
source.json support#6dbdfa
source.json string, source.json punctuation.definition.string#ece7cd
markup.list#6dbdfa
markup.heading punctuation.definition.heading, entity.name.section#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown#78bd65
meta.paragraph.markdown#ffffff
markup.quote#78bd65
meta.link#78BD65
source.dockerfile#99d0f7

Shiki preview

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

Loading...

Dark GT Theme by Contractor_Nesamani - VS Code Theme