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.underline—underline
markup.strikethrough.markdown#B16286—
markup.quote punctuation.definition.blockquote.markdown#70C0BA—
markup.quote—italic
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.python—italic
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