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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5c6773italic
string, constant.other.symbol#95fb79—
string.regexp, constant.character, constant.other#9fe7fa—
constant.other.color#F29668—
constant.numeric#9ffcea—
constant.numeric.css#f07178—
constant.language#f27983—
constant.language.boolean#b796f3—
variable#cbcebc—
variable.other.constant#d693f8—
variable.member#ee625c—
variable.language#d495f6italic
variable.language.this#d495f6italic
support.variable#f5ba78—
storage#f5ba78—
storage.type#ee68afitalic
storage.modifier#ee68afitalic
storage.modifier.async#ee68afitalic
storage.type.class#ee68afitalic
keyword#f5ba78—
keyword.control#ee68af—
keyword.operator#ee68af—
keyword.operator.new#f088bd—
punctuation.separator, punctuation.terminator#cbccc6b3—
punctuation.section#cbcebc—
punctuation.definition#CBCCC6B3—
punctuation.accessor#f5bb6c—
source.java storage.type, source.haskell storage.type, source.c storage.type#ef82c3—
entity.other.inherited-class#9FE7FA—
storage.type.function#f088bd—
storage.type.function.arrow#ee68af
source.java storage.type.primitive#9fe7fa—
variable.parameter, meta.parameter#f6bf6citalic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#fced65—
support.function, support.macro#fced65—
support.function.console#fced65—
entity.name.import, entity.name.package#a4fb8e—
entity.name#f7cb8b—
entity.name.function#fced65—
entity.name.class#f5ba78—
entity.name.tag, meta.tag.sgml#fc4085—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#b3b1ad—
text.html.derivative#cbcebc—
entity.other.attribute-name#f9d35aitalic
support.constant#d693f8italic
support.type, support.class, source.go storage.type#9fe7fa—
support.class.promise#9fe7fa—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#cbcebc—
invalid#ff3333—
meta.diff, meta.diff.header#c594c5—
source.ruby variable.other.readwrite#FFD866—
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#95e6cb—
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#A9DC76
entity.other.attribute-name.class.css#A9DC76
entity.other.attribute-name.id.css#FFD866
support.type.property-name.css#cbcebc
constant.numeric.line-number.find-in-files - match#5c6773—
constant.numeric.line-number.match#ffa759—
entity.name.filename.find-in-files#A9DC76—
message.error#FF6188—
markup.heading, markup.heading entity.name#A9DC76bold
markup.underline.link, string.other.link#95e6cb—
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#95e6cbitalic
markup.list punctuation.definition.list.begin#ffd580—
markup.inserted#a6cc70—
markup.changed#77a8d9—
markup.deleted#f27983—
markup.strike#ffe6b3—
markup.table#5ccfe6—
text.html.markdown markup.inline.raw#f29e74—
text.html.markdown meta.dummy.line-break#5c6773—
punctuation.definition.markdown#5c6773—
string.json support.type.property-name.json#f29a84—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f6c174—
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#f2ae49—
constant.language.json#d495f6—
constant.numeric.json#f27983—
string.unquoted, constant.other.object.key#e6b450—
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#f1af64—
meta.object-literal.key#f6c071italic
entity.name.type#9fe7fa—
entity.name.type.class#9fe7fa—
support.type.primitive#9fe7fa—
text.gitignore#fdf375italic
Rafa-Oficial by rafaelburghausen - VS Code Theme