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.background#f5ead0
  • activityBar.border#d8c8a860
  • activityBar.foreground#b5406e
  • activityBarBadge.background#3d2b1f
  • activityBarBadge.foreground#fdf6e3
  • badge.background#d8c8a830
  • badge.foreground#7c3d9e
  • breadcrumb.activeSelectionForeground#7c3d9e
  • breadcrumb.background#fdf6e3
  • breadcrumb.focusForeground#b5406e
  • breadcrumb.foreground#3d2b1f
  • breadcrumbPicker.background#f5ead0
  • button.background#b5406e30
  • contrastBorder#b5406e20
  • debugToolBar.background#f5ead0
  • diffEditor.insertedTextBackground#c45c0015
  • diffEditor.removedTextBackground#1a7a3c20
  • dropdown.background#f5ead0
  • dropdown.border#d8c8a840
  • editor.background#fdf6e3
  • editor.findMatchBackground#e8d8b8
  • editor.findMatchBorder#b5406eb8
  • editor.findMatchHighlightBackground#d8c8a883
  • editor.findMatchHighlightBorder#b5406e30
  • editor.foreground#3d2b1f
  • editor.lineHighlightBackground#e8d8b850
  • editor.selectionBackground#b5406e25
  • editor.selectionHighlightBackground#d8c8a86b
  • editor.selectionHighlightBorder#b5406e80
  • editorBracketHighlight.foreground1#b5406e
  • editorBracketHighlight.foreground2#1a7fb5
  • editorBracketHighlight.foreground3#7c3d9e
  • editorBracketHighlight.foreground4#1a7a3c
  • editorBracketHighlight.foreground5#9a7a00
  • editorBracketHighlight.foreground6#c45c00
  • editorBracketHighlight.unexpectedBracket.foreground#c0392b
  • editorBracketMatch.background#fdf6e3
  • editorBracketMatch.border#1a7fb57f
  • editorCursor.foreground#b5406ecf
  • editorError.foreground#c0392b70
  • editorGroup.border#d8c8a830
  • editorGroupHeader.tabsBackground#f5ead0
  • editorGutter.addedBackground#c45c0060
  • editorGutter.deletedBackground#1a7a3c60
  • editorGutter.modifiedBackground#9a7a0060
  • editorHoverWidget.background#f5ead0
  • editorHoverWidget.border#d8c8a840
  • editorIndentGuide.activeBackground1#d8c8a8
  • editorIndentGuide.background1#d8c8a870
  • editorInfo.foreground#1a7fb570
  • editorLineNumber.activeForeground#3d2b1f
  • editorLineNumber.foreground#9a785080
  • editorLink.activeForeground#b5406e
  • editorMarkerNavigation.background#b5406e05
  • editorOverviewRuler.border#fdf6e3
  • editorOverviewRuler.errorForeground#c0392b40
  • editorOverviewRuler.findMatchForeground#b5406ecc
  • editorOverviewRuler.infoForeground#1a7fb540
  • editorOverviewRuler.warningForeground#c45c0070
  • editorRuler.foreground#d8c8a8
  • editorSuggestWidget.background#f5ead0
  • editorSuggestWidget.border#d8c8a840
  • editorSuggestWidget.foreground#b5406e
  • editorSuggestWidget.highlightForeground#1a7fb5
  • editorSuggestWidget.selectedBackground#b5406e20
  • editorWarning.foreground#c45c00c9
  • editorWhitespace.foreground#b5406e40
  • editorWidget.background#f5ead0
  • editorWidget.border#1a7fb5
  • editorWidget.resizeBorder#7c3d9e
  • extensionButton.prominentBackground#c45c0090
  • extensionButton.prominentHoverBackground#1a7a3c
  • focusBorder#b5406e00
  • gitDecoration.conflictingResourceForeground#1a7fb5
  • gitDecoration.deletedResourceForeground#1a7a3c
  • gitDecoration.ignoredResourceForeground#9a7850
  • gitDecoration.modifiedResourceForeground#9a7a00
  • gitDecoration.untrackedResourceForeground#3d2b1f
  • input.background#ede0c4
  • input.border#d8c8a840
  • input.foreground#b5406e
  • input.placeholderForeground#b5406e60
  • inputOption.activeBackground#b5406e30
  • inputOption.activeBorder#b5406e30
  • inputValidation.errorBorder#c0392b50
  • inputValidation.infoBorder#1a7fb550
  • inputValidation.warningBorder#c45c0050
  • list.activeSelectionBackground#e8d8b8
  • list.activeSelectionForeground#3d2b1f
  • list.focusBackground#ede0c4
  • list.focusForeground#3d2b1f
  • list.highlightForeground#7c3d9e9e
  • list.hoverBackground#d8c8a8
  • list.hoverForeground#3d2b1f
  • list.inactiveSelectionBackground#d8c8a830
  • list.inactiveSelectionForeground#3d2b1fc8
  • list.warningForeground#c45c00
  • listFilterWidget.background#d8c8a830
  • listFilterWidget.noMatchesOutline#c0392b30
  • listFilterWidget.outline#b5406e30
  • menu.background#f5ead0f8
  • menu.border#b5406e50
  • menu.foreground#3d2b1f
  • menu.selectionBackground#ede0c4
  • menu.selectionBorder#d8c8a830
  • menu.selectionForeground#b5406e
  • menu.separatorBackground#d8c8a8
  • menubar.selectionBackground#ede0c4
  • menubar.selectionBorder#b5406e50
  • menubar.selectionForeground#b5406e
  • minimap.background#fdf6e3
  • minimapGutter.addedBackground#1a7a3c
  • minimapGutter.deletedBackground#c0392b
  • minimapGutter.modifiedBackground#c45c00
  • minimapSlider.activeBackground#c45c00b0
  • minimapSlider.background#b5406e50
  • minimapSlider.hoverBackground#b5406e80
  • notebook.cellBorderColor#b5406e40
  • notebook.cellEditorBackground#fdf6e3
  • notebook.cellStatusBarItemHoverBackground#b5406e20
  • notebook.focusedCellBorder#b5406e
  • notebook.inactiveFocusedCellBorder#b5406e50
  • notebook.outputContainerBackgroundColor#f5ead0
  • notebook.outputContainerBorderColor#b5406e30
  • notebook.selectedCellBackground#b5406e10
  • notebook.selectedCellBorder#b5406e
  • notebookScrollbarSlider.activeBackground#b5406ecc
  • notebookScrollbarSlider.background#b5406ebb
  • notebookScrollbarSlider.hoverBackground#b5406eee
  • notificationLink.foreground#7c3d9e
  • notifications.background#f5ead0
  • notifications.foreground#3d2b1f
  • panel.background#f5ead0
  • panel.border#d8c8a860
  • panelTitle.activeBorder#b5406e
  • panelTitle.activeForeground#3d2b1f
  • panelTitle.inactiveForeground#9a7850
  • peekView.border#d8c8a830
  • peekViewEditor.background#b5406e05
  • peekViewEditor.matchHighlightBackground#7c3d9e30
  • peekViewEditorGutter.background#b5406e05
  • peekViewResult.background#b5406e05
  • peekViewResult.matchHighlightBackground#7c3d9e30
  • peekViewResult.selectionBackground#d8c8a870
  • peekViewTitle.background#b5406e05
  • peekViewTitleDescription.foreground#b5406e60
  • pickerGroup.foreground#7c3d9e
  • progressBar.background#b5406e
  • scrollbar.shadow#d8c8a800
  • scrollbarSlider.activeBackground#b5406ecc
  • scrollbarSlider.background#b5406ebb
  • scrollbarSlider.hoverBackground#b5406eee
  • selection.background#b5406e30
  • settings.checkboxBackground#f5ead0
  • settings.checkboxForeground#3d2b1f
  • settings.dropdownBackground#f5ead0
  • settings.dropdownForeground#3d2b1f
  • settings.headerForeground#7c3d9e
  • settings.modifiedItemIndicator#b5406e
  • settings.numberInputBackground#f5ead0
  • settings.numberInputForeground#3d2b1f
  • settings.textInputBackground#f5ead0
  • settings.textInputForeground#3d2b1f
  • sideBar.background#f5ead0
  • sideBar.border#b5406e50
  • sideBar.foreground#3d2b1fc6
  • sideBarSectionHeader.background#f5ead0
  • sideBarSectionHeader.border#d8c8a860
  • sideBarSectionHeader.foreground#2d1a0e
  • sideBarTitle.foreground#b5406e
  • statusBar.background#b5406e
  • statusBar.border#d8c8a860
  • statusBar.debuggingBackground#7c3d9ee8
  • statusBar.debuggingForeground#fdf6e3
  • statusBar.foreground#fdf6e3
  • statusBar.noFolderBackground#f5ead0
  • statusBarItem.hoverBackground#ffffff30
  • statusBarItem.remoteBackground#7c3d9e
  • statusBarItem.remoteForeground#fdf6e3
  • tab.activeBackground#e8d8b8
  • tab.activeBorder#b5406e
  • tab.activeForeground#3d2b1f
  • tab.activeModifiedBorder#b5406e
  • tab.border#d8c8a8
  • tab.inactiveBackground#f5ead0
  • tab.inactiveForeground#9a7850af
  • tab.unfocusedActiveBackground#ede0c4
  • tab.unfocusedActiveBorder#b5406e80
  • tab.unfocusedActiveForeground#3d2b1f
  • tab.unfocusedInactiveBackground#f5ead0
  • tab.unfocusedInactiveForeground#9a78507f
  • terminal.ansiBlack#3d2b1f
  • terminal.ansiBlue#1a7fb5
  • terminal.ansiBrightBlack#6b4f3a
  • terminal.ansiBrightBlue#1a7fb5
  • terminal.ansiBrightCyan#1a7fb5
  • terminal.ansiBrightGreen#1a7a3c
  • terminal.ansiBrightMagenta#7c3d9e
  • terminal.ansiBrightRed#c0392b
  • terminal.ansiBrightWhite#3d2b1f
  • terminal.ansiBrightYellow#9a7a00
  • terminal.ansiCyan#1a7fb5cd
  • terminal.ansiGreen#1a7a3c
  • terminal.ansiMagenta#b5406e
  • terminal.ansiRed#c0392b
  • terminal.ansiWhite#6b4f3a
  • terminal.ansiYellow#9a7a00dd
  • terminalCursor.background#fdf6e3
  • terminalCursor.foreground#b5406e
  • textLink.activeForeground#b5406e
  • textLink.foreground#1a7fb5
  • titleBar.activeBackground#f5ead0
  • titleBar.activeForeground#b5406e
  • titleBar.border#d8c8a860
  • titleBar.inactiveBackground#f5ead0
  • titleBar.inactiveForeground#9a7850
  • tree.indentGuidesStroke#d8c8a8
  • widget.shadow#d8c8a830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, storage.modifier#7a5c00
keyword#2d1a0e
storage.type#7c3d9e
keyword.operator, punctuation.separator, storage.type.function.arrow.js#c45c00
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#c45c00
constant.other.php#1a7fb5
constant.other.color#3d2b1f
variable.language.this.js#1a7a3c
invalid, invalid.illegal#c0392b
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#3d2b1f
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#9a7a00
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.binding-pattern.object.js#b5406e
punctuation.definition, string.quoted.single.scss#1a7a3cd1
keyword.controlbold
comment.line, comment.line.scss, comment.line.double-slash, comment.line.number-sign, comment.line.number-sign.mips, punctuation.definition.comment.scss, punctuation.definition.comment, comment.line.double-slash.js, punctuation.definition.comment.begin.documentation, punctuation.definition.comment.end.documentation, punctuation.definition.comment.documentation, comment.block, comment.block.documentation, source.ignore#9a7850italic
text.html.derivative#6b4f3a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, variable.other.object.js#b5406e
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#1a7fb5
string.other.link.title.markdown, variable.other.property.js, constant.other.caps.python, support.type.property-name.json#9a7a00
string, variable.other.constant.js, string.quoted.double, string.quoted.single, string.quoted.triple, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control, string constant.other#5a7a5a
entity.name.function, entity.other.attribute-name.html#1a7fb5
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, variable.other.object.property.js, variable.other.definition.java#3d2b1f
support.other.variable, string.other.link, markup.table#b5406e
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#1a7fb5
variable.parameter.function.language.special, variable.parameter, meta.var-single-variable.expr.js, meta.var.expr.js, string.quoted.single.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js#1a7a3c
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#c45c00
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#b5406e
support.type#1a7fb5
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#9a7a00
entity.name.module.js, variable.import.parameter.js, variable.other.class.js, invalid.deprecated#1a7a3c
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3d2b1fitalic
entity.other.attribute-name, support.function#1a7fb5
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, storage.type.function.js, meta.object-literal.key#b5406e
source.scss keyword.control#1a7fb5
markup.inserted, entity.name.tag.html#c45c00
markup.deleted#1a7a3c
markup.changed#1a7fb5
string.regexp#3d2b1f
constant.character.escape#3d2b1f
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#b5406eitalic
text.html.markdown, punctuation.definition.list_item.markdown#b5406e
text.html.markdown markup.inline.raw.markdown#1a7fb5
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#7c3d9e50
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#9a7a00bold
markup.underline#3d2b1funderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#7c3d9e50
markup.quoteitalic
string.other.link.description.title.markdown#1a7fb5
constant.other.reference.link.markdown#1a7fb5
markup.raw.block#1a7fb5
punctuation.definition.raw.markdown, punctuation.definition.markdown#3d2b1f
variable.language.fenced.markdown#7c3d9e
meta.separator#6b4f3abold
token.info-token#7c3d9e
token.warn-token#c45c00
token.error-token#c0392b
token.debug-token#3d2b1f
keyword.control.flow.python, keyword.control.import.python, keyword.control.python#b5406ebold
storage.type.function.python, storage.type.class.python#7c3d9eitalic
entity.name.function.python#1a7fb5
entity.name.type.python, entity.name.class.python#b5406ebold
variable.parameter.python#1a7fb5italic
variable.language.special.self.python#7c3d9eitalic
constant.language.python#1a7fb5
support.function.builtin.python#1a7a3c
entity.name.function.decorator.python, punctuation.definition.decorator.python#c45c00italic
meta.function-call.python support.function#1a7fb5
storage.type.type.ts, storage.type.type.tsx, storage.type.interface.ts, storage.type.interface.tsx#7c3d9eitalic
entity.name.type.ts, entity.name.type.tsx, entity.name.interface.ts, entity.name.interface.tsx#b5406ebold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#1a7fb5
meta.type.annotation.ts, meta.type.annotation.tsx, punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts#7c3d9e
keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#c45c00
meta.decorator.ts, meta.decorator.tsx, punctuation.decorator.ts, punctuation.decorator.tsx#c45c00italic
keyword.control.rust, keyword.other.rust#b5406ebold
storage.type.rust, storage.modifier.rust#7c3d9eitalic
entity.name.function.rust#1a7fb5
entity.name.type.rust, entity.name.enum.rust, entity.name.struct.rust, entity.name.trait.rust#b5406ebold
entity.name.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#c45c00italic
support.macro.rust, entity.name.function.macro.rust#1a7a3cbold
meta.attribute.rust, punctuation.definition.attribute.rust#c45c00
variable.language.self.rust#7c3d9eitalic
keyword.control.go, keyword.control.import.go#b5406ebold
storage.type.go#7c3d9eitalic
entity.name.function.go#1a7fb5
entity.name.type.go#b5406ebold
support.function.builtin.go#1a7a3c
constant.language.go#1a7fb5
variable.other.go#3d2b1f
keyword.control.java, keyword.other.import.java, keyword.other.package.java#b5406ebold
storage.modifier.java, storage.type.java#7c3d9eitalic
entity.name.function.java#1a7fb5
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java#b5406ebold
meta.declaration.annotation.java, punctuation.definition.annotation.java, storage.type.annotation.java#c45c00italic
variable.parameter.java#1a7fb5italic
keyword.control.ruby, keyword.control.start-block.ruby#b5406ebold
storage.type.function.ruby, storage.type.class.ruby#7c3d9eitalic
entity.name.function.ruby#1a7fb5
entity.name.type.class.ruby, entity.name.type.module.ruby#b5406ebold
constant.other.symbol.ruby, punctuation.definition.constant.ruby#c45c00
variable.other.constant.ruby#9a7a00
variable.language.ruby#7c3d9eitalic
keyword.other.special-method.ruby#1a7a3c
keyword.control.c, keyword.control.cpp#b5406ebold
storage.type.c, storage.type.cpp, storage.modifier.c, storage.modifier.cpp#7c3d9eitalic
entity.name.function.c, entity.name.function.cpp#1a7fb5
entity.name.type.c, entity.name.type.cpp, entity.name.class.cpp#b5406ebold
keyword.control.directive.c, keyword.control.directive.cpp, meta.preprocessor.c, meta.preprocessor.cpp, punctuation.definition.directive.c, punctuation.definition.directive.cpp#c45c00italic
variable.parameter.c, variable.parameter.cpp#1a7fb5italic
keyword.control.swift, keyword.statement.swift#b5406ebold
storage.type.swift, storage.modifier.swift#7c3d9eitalic
entity.name.function.swift#1a7fb5
entity.name.type.swift, entity.name.type.class.swift, entity.name.type.struct.swift, entity.name.type.enum.swift, entity.name.type.protocol.swift#b5406ebold
variable.parameter.swift#1a7fb5italic
meta.attribute.swift, punctuation.definition.attribute.swift#c45c00italic
support.function.swift, support.function.any-method.swift#1a7a3c
entity.name.tag.yaml, punctuation.separator.key-value.yaml#b5406e
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#5a7a5a
constant.language.boolean.yaml, constant.language.null.yaml#1a7fb5
punctuation.definition.block.sequence.item.yaml#c45c00
variable.other.alias.yaml, punctuation.definition.alias.yaml, punctuation.definition.anchor.yaml, entity.name.type.anchor.yaml#c45c00italic
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.create.sql#b5406ebold
entity.name.function.sql, support.function.aggregate.sql#1a7fb5
constant.numeric.sql#1a7fb5
string.quoted.single.sql, string.quoted.double.sql#5a7a5a
entity.name.tag.sql, meta.toc-list.table-name.sql#b5406e
keyword.control.bash, keyword.control.shell#b5406ebold
entity.name.function.shell#1a7fb5
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell#7a5c00
punctuation.definition.variable.shell#c45c00
support.function.builtin.shell#1a7a3c
string.quoted.double.shell, string.quoted.single.shell#5a7a5a
meta.scope.heredoc.shell, string.unquoted.heredoc.shell#5a7a5aitalic
Coffee Space Cats by Cats & Coffee - VS Code Theme