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.activeBorder#61afef
  • activityBar.activeFocusBorder#61afef
  • activityBar.background#141925
  • activityBar.border#141925
  • activityBar.foreground#b3b1ad
  • activityBarBadge.background#e06c75
  • activityBarBadge.foreground#1f2430
  • badge.background#61afef
  • badge.foreground#1f2430
  • button.background#98c379
  • button.foreground#1f2430
  • button.hoverBackground#a6cc70
  • debugExceptionWidget.background#282c34
  • debugExceptionWidget.border#191e2a
  • debugToolBar.background#282c34
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#282c34
  • dropdown.border#373e4c
  • dropdown.foreground#abb2bf
  • editor.background#1f2430
  • editor.findMatchBackground#61afef0d
  • editor.findMatchBorder#61afef
  • editor.findMatchHighlightBackground#61afef0d
  • editor.findMatchHighlightBorder#61afef59
  • editor.findRangeHighlightBackground#262f3e
  • editor.findRangeHighlightBorder#1f243000
  • editor.foreground#dadbc0
  • editor.inactiveSelectionBackground#262f3e
  • editor.lineHighlightBackground#191e2a
  • editor.rangeHighlightBackground#191e2a
  • editor.selectionBackground#3d424d
  • editor.selectionHighlightBackground#262f3e
  • editor.selectionHighlightBorder#313e52
  • editor.wordHighlightBackground#262f3e
  • editor.wordHighlightStrongBackground#61afef33
  • editorBracketMatch.background#707a8c4d
  • editorBracketMatch.border#707a8c99
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#e06c75
  • editorError.foreground#ff3333
  • editorGroup.border#191e2a
  • editorGroup.emptyBackground#282c34
  • editorGroupHeader.noTabsBackground#1f2430
  • editorGroupHeader.tabsBackground#1f2430
  • editorGroupHeader.tabsBorder#282c34
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#282c34
  • editorHoverWidget.border#101521
  • editorHoverWidget.foreground#dadbc0
  • editorIndentGuide.activeBackground1#707a8cb3
  • editorIndentGuide.background1#707a8c4d
  • editorLineNumber.activeForeground#707a8ccc
  • editorLineNumber.foreground#707a8c66
  • editorLink.activeForeground#61afef
  • editorMarkerNavigation.background#282c34
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#282c34
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#e5c07b
  • editorRuler.foreground#707a8c4d
  • editorSuggestWidget.background#282c34
  • editorSuggestWidget.border#101521
  • editorSuggestWidget.foreground#dadbc0
  • editorSuggestWidget.highlightForeground#61afef
  • editorSuggestWidget.selectedBackground#191e2a
  • editorWarning.foreground#e5c07b
  • editorWhitespace.foreground#707a8c66
  • editorWidget.background#282c34
  • editorWidget.foreground#dadbc0
  • extensionButton.prominentBackground#61afef
  • extensionButton.prominentForeground#1f2430
  • extensionButton.prominentHoverBackground#61afef
  • focusBorder#505867
  • foreground#abb2bf
  • gitDecoration.conflictingResourceForeground#ed8274
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#484f5e
  • gitDecoration.modifiedResourceForeground#a6cc70
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#d96c75
  • input.background#282c34
  • input.border#373e4c
  • input.foreground#dadbc0
  • input.placeholderForeground#586070
  • inputOption.activeBorder#61afef
  • inputValidation.errorBackground#1f2430
  • inputValidation.errorBorder#e06c75
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#98c379
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#e5c07b
  • list.activeSelectionBackground#191e2a
  • list.activeSelectionForeground#61afef
  • list.focusBackground#191e2a
  • list.focusForeground#61afef
  • list.highlightForeground#61afef
  • list.hoverBackground#3d424d66
  • list.hoverForeground#61afef
  • list.inactiveSelectionBackground#3d424d66
  • list.inactiveSelectionForeground#61afef
  • list.invalidItemForeground#586070
  • panel.background#1b1c24
  • panel.border#101521
  • panelTitle.activeBorder#61afef
  • panelTitle.activeForeground#dadbc0
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#191e2a
  • peekViewEditor.background#282c34
  • peekViewEditor.matchHighlightBackground#61afef33
  • peekViewResult.background#282c34
  • peekViewResult.fileForeground#707a8c
  • peekViewResult.matchHighlightBackground#61afef33
  • peekViewTitle.background#282c34
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#707a8c
  • pickerGroup.border#191e2a
  • pickerGroup.foreground#484f5e
  • progressBar.background#61afef
  • quickInput.list.focusBackground#191e2a
  • scrollbar.shadow#191e2a
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#707a8c99
  • selection.background#4e545f
  • settings.headerForeground#dadbc0
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#191e2a
  • sideBar.border#191e2a
  • sideBar.foreground#b8b0b0
  • sideBarSectionHeader.background#191e2a
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#1f2430
  • statusBar.border#191e2a
  • statusBar.debuggingBackground#e06c75
  • statusBar.debuggingForeground#1f2430
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#282c34
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#191e2a
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#61afef
  • tab.activeBackground#282c34
  • tab.activeBorderTop#61afef
  • tab.activeForeground#dadbc0
  • tab.border#282c3400
  • tab.hoverBackground#3d424d66
  • tab.inactiveBackground#1f2430
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorderTop#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#191e2a
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#bae67e
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd580
  • terminal.ansiCyan#98c379
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#e5c07b
  • terminal.background#1b1c24
  • terminal.foreground#dadbc0
  • terminalCursor.foreground#e06c75
  • textBlockQuote.background#282c34
  • textLink.activeForeground#61afef
  • textLink.foreground#61afef
  • textPreformat.foreground#cbccc6
  • titleBar.activeBackground#1f2430
  • titleBar.activeForeground#dadbc0
  • titleBar.border#191e2a
  • titleBar.inactiveBackground#1f2430
  • titleBar.inactiveForeground#707a8c
  • walkThrough.embeddedEditorBackground#282c34
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5c6773italic
string, constant.other.symbol#98c379—
string.regexp, constant.character, constant.other#98c379—
constant.numeric#d19a66—
constant.numeric.css#e06c75—
constant.language#e5c07b—
constant.language.boolean#cfbafa—
variable#dadbc0—
variable.other.constant#cfbafa—
variable.member#f28779—
variable.language#61afefitalic
variable.language.this#f28779italic
support.variable#61afef—
storage#61afef—
storage.type#61afefitalic
storage.modifier.async#e06c75italic
storage.type.class#e06c75italic
keyword#61afef—
keyword.control.flow#e06c75—
keyword.control.loop#e06c75—
keyword.control.conditional#e06c75—
keyword.control.trycatch#e06c75—
keyword.operator#e06c75—
keyword.operator.new#e06c75—
punctuation.separator, punctuation.terminator#cbccc6b3—
punctuation.section#dadbc0—
punctuation.accessor#e5c07b—
source.java storage.type, source.haskell storage.type, source.c storage.type#98c379—
entity.other.inherited-class#e5c07b—
storage.type.function#61afef—
storage.type.function.arrow#e06c75
source.java storage.type.primitive#98c379—
variable.parameter, meta.parameter#cfbafaitalic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#61afef—
support.function, support.macro#e5c07b—
support.function.console#e5c07b—
entity.name.import, entity.name.package#98c379—
entity.name#f28779—
entity.name.function#61afef—
entity.name.class#e5c07b—
entity.name.tag, meta.tag.sgml#e06c75—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#b3b1ad—
text.html.derivative#dadbc0—
entity.other.attribute-name#61afefitalic
support.constant#f28779italic
support.type, support.class, source.go storage.type#f28779—
support.class.promise#61afef—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#dadbc0—
invalid#ff3333—
meta.diff, meta.diff.header#cfbafa—
source.ruby variable.other.readwrite#e5c07b—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#98c379—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5c6773—
support.type.property-name#98c379
entity.other.attribute-name.class.css#98c379
entity.other.attribute-name.id.css#61afef
support.type.property-name.css#dadbc0
constant.numeric.line-number.find-in-files - match#5c6773—
constant.numeric.line-number.match#61afef—
entity.name.filename.find-in-files#98c379—
message.error#ff3333—
markup.heading, markup.heading entity.name#98c379bold
markup.underline.link, string.other.link#98c379—
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italic—bold italic
markup.raw——
markup.raw.inline——
meta.separator#5c6773bold
markup.quote#98c379italic
markup.list punctuation.definition.list.begin#e5c07b—
markup.inserted#a6cc70—
markup.changed#77a8d9—
markup.deleted#f27983—
markup.strike#ffe6b3—
markup.table#5ccfe6—
text.html.markdown markup.inline.raw#e5c07b—
text.html.markdown meta.dummy.line-break#5c6773—
punctuation.definition.markdown#5c6773—
string.json support.type.property-name.json#e5c07b—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e5c07b—
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#e5c07b—
constant.language.json#cfbafa—
constant.numeric.json#f27983—
string.unquoted, constant.other.object.key#e5c07b—
meta.brace.curly, meta.brace.round, meta.brace.square#b3b1ad—
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#61afef—
meta.object-literal.key#61afef—
entity.name.type#e5c07b—
entity.name.type.class#e06c75—
support.type.primitive#e5c07b—
text.gitignore#e5c07bitalic
Hashira Code Theme by devLocifer - VS Code Theme