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#1A1A1A
  • activityBar.background#1F1F1F
  • activityBar.border#1F1F1F
  • activityBar.foreground#F7F0DF
  • activityBar.inactiveForeground#EBDBB2
  • activityBarBadge.background#3D3D3D
  • activityBarBadge.foreground#F7F0DF
  • badge.background#FABD2F
  • badge.foreground#202020
  • button.background#458588
  • button.foreground#F7F0DF
  • button.hoverBackground#5CA9AD
  • button.secondaryBackground#333333
  • button.secondaryForeground#F7F0DF
  • button.secondaryHoverBackground#414345
  • debugToolBar.background#282828
  • diffEditor.border#404040
  • diffEditor.insertedTextBackground#B8BB2620
  • diffEditor.removedTextBackground#FF2D2420
  • editor.background#202020
  • editor.findMatchBackground#ffffff26
  • editor.findMatchHighlightBackground#45858826
  • editor.findRangeHighlightBackground#ffffff18
  • editor.foldBackground#ffffff0A
  • editor.foreground#F7F0DF
  • editor.hoverHighlightBackground#45858818
  • editor.inactiveSelectionBackground#ffffff20
  • editor.lineHighlightBackground#ffffff0A
  • editor.selectionBackground#ffffff10
  • editor.selectionHighlightBackground#ffffff30
  • editor.wordHighlightBackground#57575760
  • editor.wordHighlightStrongBackground#45858826
  • editorBracketHighlight.foreground1#FFB915
  • editorBracketHighlight.foreground2#FB4934
  • editorBracketHighlight.foreground3#FE8019
  • editorBracketHighlight.foreground4#B8BB26
  • editorBracketHighlight.foreground5#B16286
  • editorBracketHighlight.foreground6#689D6A
  • editorBracketMatch.background#ffffff10
  • editorBracketMatch.border#ffffff24
  • editorCodeLens.foreground#EBDBB2
  • editorCursor.background#292828
  • editorCursor.foreground#EBDBB2
  • editorError.foreground#FF2D24
  • editorGroup.border#565656
  • editorGroupHeader.tabsBackground#252525
  • editorGutter.addedBackground#B8BB26
  • editorGutter.background#202020
  • editorGutter.deletedBackground#FF2D24
  • editorGutter.foldingControlForeground#EBDBB2
  • editorGutter.modifiedBackground#FABD2F
  • editorHoverWidget.background#202020
  • editorHoverWidget.border#444236
  • editorHoverWidget.foreground#F7F0DF
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.foreground#5CA9AD
  • editorLineNumber.activeForeground#EBDBB2
  • editorLineNumber.foreground#7C6f64
  • editorLink.activeForeground#5CA9AD
  • editorOverviewRuler.border#0000
  • editorRuler.foreground#404040
  • editorSuggestWidget.background#202020
  • editorSuggestWidget.border#444236
  • editorSuggestWidget.foreground#F7F0DF
  • editorSuggestWidget.highlightForeground#5CA9AD
  • editorSuggestWidget.selectedBackground#ffffff12
  • editorWarning.foreground#FE8019
  • editorWhitespace.foreground#565656
  • editorWidget.background#202020
  • editorWidget.foreground#EBDBB2
  • editorWidget.resizeBorder#3D3D3D
  • focusBorder#fafafa15
  • foreground#EBDBB2
  • gitDecoration.addedResourceForeground#B8BB26
  • gitDecoration.conflictingResourceForeground#FE8019
  • gitDecoration.deletedResourceForeground#FB4934
  • gitDecoration.ignoredResourceForeground#928374
  • gitDecoration.modifiedResourceForeground#FABD2F
  • gitDecoration.stageDeletedResourceForeground#FB4934
  • gitDecoration.stageModifiedResourceForeground#FABD2F
  • gitDecoration.submoduleResourceForeground#7ff4fa
  • gitDecoration.untrackedResourceForeground#FE8019
  • input.background#3B3B3B
  • input.foreground#EBDBB2
  • inputOption.activeBackground#ffffff1f
  • list.activeSelectionBackground#fafafa15
  • list.activeSelectionForeground#F7F0DF
  • list.dropBackground#292929
  • list.errorForeground#FF2D24
  • list.focusBackground#292929
  • list.focusForeground#F7F0DF
  • list.highlightForeground#FABD2F
  • list.hoverBackground#1F1F1F
  • list.hoverForeground#F7F0DF
  • list.inactiveSelectionBackground#1F1F1F
  • list.inactiveSelectionForeground#F7F0DF
  • list.warningForeground#FE8019
  • listFilterWidget.background#1F1F1F
  • listFilterWidget.noMatchesOutline#FF2D24
  • menu.background#292828
  • menu.foreground#EBDBB2
  • menu.selectionBackground#222222
  • menu.selectionForeground#F7F0DF
  • menu.separatorBackground#404040
  • menubar.selectionBackground#F7F0DF18
  • menubar.selectionForeground#EBDBB2
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#202020
  • merge.currentContentBackground#757718
  • merge.currentHeaderBackground#B8BB26
  • merge.incomingContentBackground#305D5F
  • merge.incomingHeaderBackground#458588
  • notebook.cellBorderColor#1F1F1F
  • notebook.cellEditorBackground#202020
  • notebook.cellHoverBackground#1F1F1F
  • notebook.cellInsertionIndicator#EBDBB2
  • notebook.cellStatusBarItemHoverBackground#ffffff20
  • notebook.cellToolbarSeparator#3D3D3D
  • notebook.focusedCellBackground#1F1F1F
  • notebook.focusedCellBorder#458588
  • notebook.focusedEditorBorder#3D3D3D
  • notebook.inactiveFocusedCellBorder#ffffff20
  • notebook.outputContainerBackgroundColor#1F1F1F
  • notebook.selectedCellBackground#ffffff20
  • notebook.selectedCellBorder#ffffff20
  • notebook.symbolHighlightBackground#ffffff0b
  • notebookScrollbarSlider.activeBackground#ffffff45
  • notebookScrollbarSlider.background#ffffff12
  • notebookScrollbarSlider.hoverBackground#ffffff45
  • notebookStatusErrorIcon.foreground#FF2D24
  • notebookStatusRunningIcon.foreground#727272
  • notebookStatusSuccessIcon.foreground#B8BB26
  • notificationCenterHeader.background#3D3D3D
  • notificationCenterHeader.foreground#EBDBB2
  • notifications.background#202020
  • notifications.border#3D3D3D
  • notifications.foreground#EBDBB2
  • notificationsErrorIcon.foreground#FF2D24
  • notificationsInfoIcon.foreground#3eb5bb
  • notificationsWarningIcon.foreground#FFB915
  • panel.background#202020
  • panel.border#292828
  • panelTitle.activeBorder#FABD2F
  • panelTitle.activeForeground#FABD2F
  • panelTitle.inactiveForeground#7e7e7e
  • peekView.border#444236
  • peekViewEditor.background#202020
  • peekViewEditor.matchHighlightBackground#FE80194e
  • peekViewEditorGutter.background#202020
  • peekViewResult.background#252525
  • peekViewResult.fileForeground#F7F0DF
  • peekViewResult.lineForeground#EBDBB2
  • peekViewResult.matchHighlightBackground#4585882c
  • peekViewResult.selectionBackground#45858840
  • peekViewResult.selectionForeground#F7F0DF
  • peekViewTitle.background#202020
  • peekViewTitleDescription.foreground#EBDBB2
  • peekViewTitleLabel.foreground#F7F0DF
  • pickerGroup.border#3D3D3D
  • pickerGroup.foreground#00bdc7
  • progressBar.background#458588
  • scrollbar.shadow#15151580
  • scrollbarSlider.activeBackground#ffffff45
  • scrollbarSlider.background#ffffff12
  • scrollbarSlider.hoverBackground#ffffff45
  • selection.background#fafafa15
  • sideBar.background#1A1A1A
  • sideBar.border#202020
  • sideBar.foreground#EBDBB2
  • sideBarSectionHeader.background#1F1F1F
  • sideBarSectionHeader.foreground#F7F0DF
  • sideBarTitle.foreground#EBDBB2
  • statusBar.background#1F1F1F
  • statusBar.border#1F1F1F
  • statusBar.debuggingBackground#9c9e1f
  • statusBar.debuggingBorder#1F1F1F
  • statusBar.debuggingForeground#F7F0DF
  • statusBar.foreground#EBDBB2
  • statusBar.noFolderBackground#aa1c17
  • statusBar.noFolderBorder#1F1F1F
  • statusBar.noFolderForeground#F7F0DF
  • statusBarItem.hoverBackground#3d3d3d80
  • statusBarItem.remoteBackground#458588
  • statusBarItem.remoteForeground#F7F0DF
  • tab.activeBackground#202020
  • tab.activeBorderTop#458588
  • tab.activeForeground#F7F0DF
  • tab.border#00000000
  • tab.hoverForeground#F7F0DF
  • tab.inactiveBackground#252525
  • tab.inactiveForeground#C0B8AF
  • terminal.ansiBlack#292828
  • terminal.ansiBlue#2C8091
  • terminal.ansiBrightBlack#404238
  • terminal.ansiBrightBlue#3AA6BB
  • terminal.ansiBrightCyan#458588
  • terminal.ansiBrightGreen#B8BB26
  • terminal.ansiBrightMagenta#E756DB
  • terminal.ansiBrightRed#FF2D24
  • terminal.ansiBrightWhite#F7F0DF
  • terminal.ansiBrightYellow#FABD2F
  • terminal.ansiCyan#38BFDA
  • terminal.ansiGreen#9EE412
  • terminal.ansiMagenta#E92066
  • terminal.ansiRed#E22f7A
  • terminal.ansiWhite#F7F0DF
  • terminal.ansiYellow#FE8019
  • terminal.border#80808059
  • terminal.selectionBackground#ffffff21
  • terminalCursor.foreground#F7F0DF
  • textLink.activeForeground#70C0BA
  • textLink.foreground#5CA9AD
  • titleBar.activeBackground#1F1F1F
  • titleBar.activeForeground#EBDBB2
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#EBDBB2
  • tree.indentGuidesStroke#aaaaaa
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7C6f64italic
source.python, meta.function-call.arguments, source.js, variable.other.object.js, meta.template.expression.js, source.java, variable.other.object.java, meta.method.body.java, source.cpp, meta.body.function.definition.cpp, variable.other.rust#F2E8CE
constant.other.color#B16286
invalid, invalid.illegal#FF2D24
keyword, storage.modifier, storage.modifier.java, meta.tag, keyword.operator, keyword.other.unit, keyword.other.new.php#FB4934
keyword.control, keyword.other.template, keyword.other.substitution, keyword.other.import.java, keyword.other.package.java, variable.language.this#FB4934italic
punctuation.definition, punctuation.accessor, punctuation.separator, punctuation.seperator, punctuation.section, punctuation.parenthesis, punctuation.terminator, punctuation.semi, punctuation.comma, punctuation.other, punctuation.bracket, punctuation.brackets, punctuation.curly, meta.brace.round, meta.brace.square#928374
punctuation.section.embedded#FE8019
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F2E8CE
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FB4934
meta.function.python, meta.definition.function, meta.function.definition, meta.method.declaration.js, meta.method.java, entity.name.namespace.cpp, entity.name.namespace.rust, meta.function.php, entity.name.function.go, entity.name.function.kotlin#B8BB26
storage.type.function.arrow, storage.type.function.lambda.python, punctuation.definition.arrow.php#FB4934
storage.type.function.arrow
meta.function-call, variable.function, support.function.go, meta.function.call.rust, meta.block.kotlin#70C0BA
storage.type#FB4934
storage.type.class#FB4934italic
support.other.variable, string.other.link#B8BB26
support.constant, constant.character, constant.language, variable.other.constant, constant.escape, constant.numeric, variable.other.global.php, constant.other#B16286
support.function.builtin, support.function.construct.output.php, support.function.construct.php, entity.name.function.macro.rust, support.function.kotlin#B8BB26
meta.block variable.other#F2E8CE
variable.parameter, meta.function.parameters.php#FE8019italic
string, constant.other.symbol, constant.other.key, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FABD2F
support.class, entity.name.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#70C0BA
entity.other.inherited-class#70C0BA
support.type#70C0BA
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#F2E8CE
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FB4934
variable.language#FB4934italic
entity.name.method.js#70C0BAitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#70C0BA
entity.other.attribute-name#70C0BA
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FABD2Fitalic
entity.other.attribute-name.class#B8BB26
entity.other.attribute-name.pseudo-element.css, variable.css#FB4934
entity.other.attribute-name.pseudo-class.css#FE8019
entity.other.attribute-name.id.css, entity.name.function.namespace-prefix.css, entity.other.namespace-prefix.css, support.function.misc.css, support.constant.media.css, support.function.calc.css, support.function.transform.css, support.function.gradient.css, support.function.url.css, support.function.shape.css#70C0BA
entity.other.keyframe-offset.css#B8BB26
entity.other.keyframe-offset.percentage.css#B16286
variable.argument.css#B16286
source.sass keyword.control#70C0BA
markup.inserted#B8BB26
markup.deleted#FF5370
markup.changed#B16286
string.regexp#FABD2F
constant.character.escape#B16286
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#70C0BAitalic
source.js constant.other.object.key.js string.unquoted.label.js#FB4934italic
variable.other.object.property.js, variable.other.constant.property.js#B8BB26
source.json meta.structure.dictionary.json support.type.property-name.json#F2E8CE
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#70C0BA
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#B8BB26
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#FE8019
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#FB4934
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#B16286
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#F2E8CE
text.html.markdown, punctuation.definition.list_item.markdown#F2E8CE
text.html.markdown markup.inline.raw.markdown#B16286
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#70C0BA
heading.1.markdown#FABD2Fbold
heading.2.markdown#FB4934bold
heading.3.markdown#FE8019bold
heading.4.markdown#B8BB26bold
heading.5.markdown#FB4934bold
heading.6.markdown#70C0BAbold
markup.italic#70C0BAitalic
markup.bold, markup.bold string#FB4934bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FB4934bold
markup.underlineunderline
markup.strikethrough.markdown#B16286
markup.quote punctuation.definition.blockquote.markdown#70C0BA
markup.quoteitalic
punctuation.definition.list.begin.markdown#FB4934
string.other.link.title.markdown#70C0BA
markup.underline.link#FABD2Fitalic
string.other.link.description.title.markdown#B16286
constant.other.reference.link.markdown#FABD2F
markup.raw.block#B16286
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F2E8CE
variable.language.fenced.markdown#C0B8AF
meta.separator#C0B8AFbold
markup.table#F2E8CE
meta.function.decorator#928374italic
storage.type.function.pythonitalic
meta.function.parameters.python#928374
string.quoted.docstring.multi.python#7C6f64
support.variable.magic.python, support.function.magic.python#B16286
variable.parameter.function.language.special.self.python, variable.language.special.self.python#C0B8AF
storage.type.string.python, constant.character.format.placeholder.other.python, punctuation.definition.template-expression#FB4934
storage.type.format.python#B16286
storage.modifier.import, storage.modifier.package, storage.type.java#F2E8CE
meta.method-call.java, meta.function-call.java#B8BB26
punctuation.bracket.angle, punctuation.brackets.angle.rust#FB4934
keyword.operator.assignment.rust#FB4934
punctuation.definition.annotation.java, storage.type.annotation.java#C0B8AF
storage.type.primitive.java, storage.type.built-in.primitive.c#FB4934
storage.type.kotlin#FB4934
entity.other.jinja.delimiter.tag, entity.other.jinja.delimiter.variable#FE8019
Soda Monokai by Alejandro-44 - VS Code Theme