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#f5ede0
  • activityBar.border#e8dcca
  • activityBar.foreground#3d2e18
  • activityBar.inactiveForeground#a08a65
  • activityBarBadge.background#7c5c35
  • activityBarBadge.foreground#f5ede0
  • badge.background#7c5c35
  • badge.foreground#f5ede0
  • breadcrumb.activeSelectionForeground#7c5c35
  • breadcrumb.focusForeground#2c1f10
  • breadcrumb.foreground#8a7060
  • breadcrumbPicker.background#ede5d3
  • button.background#7c5c35
  • button.foreground#f5ede0
  • button.hoverBackground#6b4d2e
  • button.secondaryBackground#e8dcca
  • button.secondaryForeground#2c1f10
  • checkbox.background#ede5d3
  • checkbox.border#e0d4bc
  • checkbox.foreground#2c1f10
  • descriptionForeground#6b5030
  • diffEditor.insertedLineBackground#6b4d2e11
  • diffEditor.insertedTextBackground#6b4d2e22
  • diffEditor.removedLineBackground#5c3e1e11
  • diffEditor.removedTextBackground#5c3e1e22
  • dropdown.background#ede5d3
  • dropdown.border#e8dcca
  • dropdown.foreground#2c1f10
  • editor.background#f5ede0
  • editor.findMatchBackground#7c5c3544
  • editor.findMatchBorder#7c5c35
  • editor.findMatchHighlightBackground#7c5c3522
  • editor.foreground#2c1f10
  • editor.inactiveSelectionBackground#7c5c351a
  • editor.lineHighlightBackground#ede5d3
  • editor.lineHighlightBorder#2c1f1000
  • editor.selectionBackground#7c5c3533
  • editor.selectionHighlightBackground#7c5c3522
  • editor.wordHighlightBackground#7c5c351a
  • editor.wordHighlightStrongBackground#7c5c3533
  • editorBracketMatch.background#7c5c3522
  • editorBracketMatch.border#7c5c3588
  • editorCursor.background#f5ede0
  • editorCursor.foreground#7c5c35
  • editorError.foreground#5c3e1e
  • editorGroupHeader.noTabsBackground#f5ede0
  • editorGroupHeader.tabsBackground#ede5d3
  • editorGutter.addedBackground#6b4d2e88
  • editorGutter.background#f5ede0
  • editorGutter.deletedBackground#5c3e1e88
  • editorGutter.modifiedBackground#7c5c3588
  • editorHint.foreground#6b5e52
  • editorHoverWidget.background#ede5d3
  • editorHoverWidget.border#e8dcca
  • editorIndentGuide.activeBackground1#e0d4bc
  • editorIndentGuide.background1#ede5d3
  • editorInfo.foreground#9a8a72
  • editorLineNumber.activeForeground#2c1f10
  • editorLineNumber.foreground#a08a65
  • editorSuggestWidget.background#ede5d3
  • editorSuggestWidget.border#e8dcca
  • editorSuggestWidget.focusHighlightForeground#7c5c35
  • editorSuggestWidget.foreground#2c1f10
  • editorSuggestWidget.highlightForeground#7c5c35
  • editorSuggestWidget.selectedBackground#e8dcca
  • editorWarning.foreground#7c5c35
  • editorWhitespace.foreground#e8dcca
  • editorWidget.background#ede5d3
  • editorWidget.border#e8dcca
  • editorWidget.foreground#2c1f10
  • errorForeground#5c3e1e
  • extensionButton.prominentBackground#7c5c35
  • extensionButton.prominentForeground#f5ede0
  • extensionButton.prominentHoverBackground#6b4d2e
  • focusBorder#7c5c35
  • gitDecoration.addedResourceForeground#6b4d2e
  • gitDecoration.conflictingResourceForeground#5c3e1e
  • gitDecoration.deletedResourceForeground#5c3e1e
  • gitDecoration.ignoredResourceForeground#a08a65
  • gitDecoration.modifiedResourceForeground#7c5c35
  • gitDecoration.renamedResourceForeground#7c5c35
  • gitDecoration.untrackedResourceForeground#6b5e52
  • input.background#ede5d3
  • input.border#e8dcca
  • input.foreground#2c1f10
  • input.placeholderForeground#a08a65
  • inputValidation.errorBorder#5c3e1e
  • inputValidation.infoBorder#9a8a72
  • inputValidation.warningBorder#7c5c35
  • list.activeSelectionBackground#e8dcca
  • list.activeSelectionForeground#2c1f10
  • list.dropBackground#e8dcca
  • list.focusBackground#e8dcca
  • list.focusForeground#2c1f10
  • list.highlightForeground#7c5c35
  • list.hoverBackground#ede5d3
  • list.inactiveSelectionBackground#ede5d3
  • list.inactiveSelectionForeground#3d2e18
  • menu.background#ede5d3
  • menu.border#e8dcca
  • menu.foreground#2c1f10
  • menu.selectionBackground#e8dcca
  • menu.selectionForeground#2c1f10
  • menu.separatorBackground#e8dcca
  • minimap.background#f5ede0
  • minimap.errorHighlight#5c3e1e
  • minimap.findMatchHighlight#7c5c3588
  • minimap.selectionHighlight#7c5c3544
  • minimapGutter.addedBackground#6b4d2e
  • minimapGutter.deletedBackground#5c3e1e
  • minimapGutter.modifiedBackground#7c5c35
  • notificationCenterHeader.background#ede5d3
  • notifications.background#ede5d3
  • notifications.border#e8dcca
  • panel.background#f5ede0
  • panel.border#e8dcca
  • panelTitle.activeBorder#7c5c35
  • panelTitle.activeForeground#2c1f10
  • panelTitle.inactiveForeground#8a7060
  • peekView.border#7c5c35
  • peekViewEditor.background#f5ede0
  • peekViewEditor.matchHighlightBackground#7c5c3533
  • peekViewResult.background#ede5d3
  • peekViewResult.matchHighlightBackground#7c5c3533
  • peekViewTitle.background#ede5d3
  • peekViewTitleDescription.foreground#6b5030
  • peekViewTitleLabel.foreground#2c1f10
  • quickInput.background#ede5d3
  • quickInput.foreground#2c1f10
  • quickInputHighlight.foreground#7c5c35
  • quickInputList.focusBackground#e8dcca
  • quickInputList.focusForeground#2c1f10
  • scrollbarSlider.activeBackground#8a706066
  • scrollbarSlider.background#e0d4bc66
  • scrollbarSlider.hoverBackground#a08a6566
  • selection.background#7c5c3533
  • sideBar.background#ede5d3
  • sideBar.border#e8dcca
  • sideBar.foreground#3d2e18
  • sideBarSectionHeader.background#f5ede0
  • sideBarSectionHeader.border#e8dcca
  • sideBarSectionHeader.foreground#6b5030
  • statusBar.background#ede5d3
  • statusBar.border#e8dcca
  • statusBar.debuggingBackground#7c5c35
  • statusBar.debuggingForeground#f5ede0
  • statusBar.foreground#3d2e18
  • statusBar.noFolderBackground#e8dcca
  • statusBarItem.hoverBackground#e8dcca
  • statusBarItem.remoteBackground#7c5c35
  • statusBarItem.remoteForeground#f5ede0
  • tab.activeBackground#f5ede0
  • tab.activeBorderTop#7c5c35
  • tab.activeForeground#2c1f10
  • tab.border#e8dcca
  • tab.inactiveBackground#ede5d3
  • tab.inactiveForeground#8a7060
  • tab.unfocusedActiveBackground#f5ede0
  • tab.unfocusedActiveForeground#6b5030
  • tab.unfocusedInactiveBackground#ede5d3
  • tab.unfocusedInactiveForeground#a08a65
  • terminal.ansiBlack#f5ede0
  • terminal.ansiBlue#9a8a72
  • terminal.ansiBrightBlack#e0d4bc
  • terminal.ansiBrightBlue#9a8a72
  • terminal.ansiBrightCyan#6b5e52
  • terminal.ansiBrightGreen#6b4d2e
  • terminal.ansiBrightMagenta#a0907a
  • terminal.ansiBrightRed#5c3e1e
  • terminal.ansiBrightWhite#2c1f10
  • terminal.ansiBrightYellow#7c5c35
  • terminal.ansiCyan#6b5e52
  • terminal.ansiGreen#6b4d2e
  • terminal.ansiMagenta#a0907a
  • terminal.ansiRed#5c3e1e
  • terminal.ansiWhite#2c1f10
  • terminal.ansiYellow#7c5c35
  • terminal.background#f5ede0
  • terminal.border#e8dcca
  • terminal.foreground#2c1f10
  • terminal.selectionBackground#7c5c3533
  • terminalCursor.background#f5ede0
  • terminalCursor.foreground#7c5c35
  • titleBar.activeBackground#ede5d3
  • titleBar.activeForeground#2c1f10
  • titleBar.border#e8dcca
  • titleBar.inactiveBackground#f5ede0
  • titleBar.inactiveForeground#a08a65
  • widget.border#e8dcca
  • widget.shadow#2c1f1066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation#9a8a72italic
comment.line keyword, comment keyword.codetag.notation#5c3e1eitalic bold
keyword, keyword.control, keyword.other#7c5c35
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default#7c5c35
storage, storage.type, storage.modifier#7c5c35
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise#8a7060
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.bracket, punctuation.definition.parameters, meta.brace#8a7060
punctuation.definition.template-expression, punctuation.section.embedded#7c5c35
string, string.quoted, string.quoted.single, string.quoted.double#6b4d2e
string.template, string.quoted.template#6b4d2e
string.regexp#5c3e1e
constant.character.escape, string constant.other.placeholder#7c5c35
constant.numeric, constant.numeric.integer, constant.numeric.float#5c3e1e
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nil, constant.language.nan#5c3e1e
constant, constant.other#5c3e1e
entity.name.function, meta.function entity.name.function, meta.definition.function entity.name.function#6b5e52
meta.function-call entity.name.function, meta.function-call support.function, variable.function, support.function#6b5e52
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.other.inherited-class, support.type, support.class#7c5c35
meta.type.annotation, meta.return.type, meta.type.parameters, entity.name.type.ts, entity.name.type.tsx#7c5c35
entity.name.namespace, entity.name.module, support.other.namespace#7c5c35
variable, variable.other, variable.other.readwrite#2c1f10
variable.parameter, meta.function.parameters variable#4a3520
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#3d2e18
variable.language.this, variable.language.self, variable.language.super#7c5c35
entity.name.function.decorator, punctuation.decorator, meta.decorator, storage.type.annotation#7c5c35
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.tsx, punctuation.definition.tag.jsx#a08a65
entity.name.tag, meta.tag entity.name.tag#5c3e1e
support.class.component, support.class.component.tsx, support.class.component.jsx#7c5c35
entity.other.attribute-name, meta.tag entity.other.attribute-name#7c5c35
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#6b5e52
entity.other.attribute-name.event#6b5e52
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#8a7060
meta.tag.sgml.html, meta.tag.sgml keyword#8a7060
entity.name.tag.css#5c3e1e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#6b5e52
support.type.property-name.css, support.type.property-name, meta.property-name#7c5c35
support.constant.property-value, meta.property-value, support.constant.font-name, support.constant.media-type#6b4d2e
keyword.other.unit.css, keyword.other.unit#5c3e1e
keyword.control.at-rule, keyword.control.at-rule.media#7c5c35
variable.css, variable.argument.css, support.variable.css#6b5e52
support.type.property-name.json, meta.structure.dictionary.json string.quoted#7c5c35
markup.heading, markup.heading entity.name#7c5c35bold
markup.bold#2c1f10bold
markup.italic#2c1f10italic
markup.underline.link, string.other.link#6b4d2e
markup.inline.raw, markup.raw.inline#6b5e52
markup.fenced_code.block, markup.raw.block#6b5e52
markup.quote#8a7060italic
markup.list, punctuation.definition.list.begin.markdown#5c3e1e
meta.separator, meta.separator.markdown#e0d4bc
entity.name.tag.yaml#7c5c35
entity.name.type.anchor.yaml, variable.other.alias.yaml#6b5e52
comment.line.shebang#9a8a72italic
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell#2c1f10
support.function.builtin.shell#7c5c35
meta.subshell.shell, punctuation.definition.subshell.shell#8a7060
punctuation.definition.string.end.heredoc.shell, keyword.operator.heredoc.shell#8a7060
string.unquoted.argument.shell, constant.other.option.shell#4a3520
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#7c5c35italic
entity.name.function.magic.python, support.function.magic.python#6b5e52italic
support.type.python, support.type.exception.python#7c5c35
support.function.builtin.python#6b5e52
entity.name.function.decorator.python, meta.function.decorator.python support.type.python#7c5c35
meta.fstring.python, punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#6b4d2e
storage.type.format.python, meta.format.brace.python#7c5c35
variable.other.enummember.ts, variable.other.enummember.tsx#5c3e1e
keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx, keyword.operator.expression.keyof.ts, keyword.operator.expression.keyof.tsx, keyword.operator.expression.infer.ts, keyword.operator.expression.satisfies.ts, keyword.operator.expression.satisfies.tsx#7c5c35
storage.modifier.ts, storage.modifier.tsx, keyword.other.typescript#7c5c35
keyword.declaration.namespace.ts, keyword.declaration.module.ts#7c5c35
support.function.builtin.go#6b5e52
constant.other.placeholder.go#7c5c35
entity.name.package.go, string.quoted.double.go entity.name.import.go#7c5c35
meta.struct-tag.go, string.quoted.raw.go meta.struct-tag#9a8a72
meta.type-assertion.go entity.name.type.go#7c5c35
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust#6b5e52italic
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust entity.name.function#7c5c35
punctuation.definition.macro.rust#7c5c35
meta.attribute.rust, meta.attribute.rust entity.name.function.attribute, meta.attribute.rust meta.path.rust, punctuation.definition.attribute.rust#9a8a72
entity.name.type.numeric.rust, entity.name.type.primitive.rust, support.type.primitive.rust#7c5c35
entity.name.type.self.rust#7c5c35
storage.modifier.unsafe.rust, keyword.other.unsafe.rust#5c3e1e
constant.other.symbol.elixir, constant.other.symbol.hashkey.elixir, constant.other.atom.elixir#5c3e1e
variable.other.constant.elixir, punctuation.definition.variable.elixir#6b5e52
punctuation.definition.sigil.elixir, string.other.sigil.elixir, keyword.operator.sigil.elixir#5c3e1e
variable.language.elixir#7c5c35italic
variable.other.atom.erlang, constant.other.atom.erlang#5c3e1e
support.function.builtin.zig, variable.language.builtin.zig, keyword.other.directive.zig#7c5c35
support.type.primitive.zig, entity.name.type.zig#7c5c35
keyword.control.directive, keyword.control.import.include, meta.preprocessor, meta.preprocessor.include, keyword.other.directive#7c5c35
entity.name.function.preprocessor, entity.name.other.preprocessor.macro#6b5e52
string.quoted.other.lt-gt.include, meta.preprocessor.include string#6b4d2e
entity.other.annotation.java, storage.type.annotation.java, punctuation.definition.annotation.java#7c5c35
storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java#7c5c35
entity.name.section.toml, punctuation.definition.table.toml, support.type.property-name.table.toml#7c5c35
support.type.property-name.toml, variable.other.key.toml, keyword.key.toml#6b5e52
keyword.other.special-method.dockerfile, entity.name.tag.dockerfile, keyword.other.directive.dockerfile#7c5c35
variable.other.dockerfile#2c1f10
entity.name.type.prisma#7c5c35
entity.name.function.attribute.prisma, support.function.attribute.prisma#6b5e52
support.type.primitive.prisma, support.type.relation.prisma, entity.name.type.primitive.prisma#7c5c35
support.type.graphql, entity.name.type.graphql#7c5c35
variable.graphql, entity.name.field.graphql#2c1f10
entity.name.function.directive.graphql#6b5e52
entity.name.fragment.graphql#6b5e52
invalid, invalid.illegal#5c3e1eunderline
invalid.deprecated#8a7060strikethrough
Ochre by ochre-crafts - VS Code Theme