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#E5989B10
  • activityBar.activeBorder#BE95C480
  • activityBar.background#343746
  • activityBar.foreground#D2D9E6
  • activityBar.inactiveForeground#6280A3
  • activityBarBadge.background#BE95C4
  • activityBarBadge.foreground#D2D9E6
  • badge.background#445459
  • badge.foreground#D2D9E6
  • breadcrumb.activeSelectionForeground#D2D9E6
  • breadcrumb.background#272D38
  • breadcrumb.focusForeground#D2D9E6
  • breadcrumb.foreground#6280A3
  • breadcrumbPicker.background#2D2738
  • button.background#445459
  • button.foreground#D2D9E6
  • button.secondaryBackground#272D38
  • button.secondaryForeground#D2D9E6
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#E1C34020
  • diffEditor.removedTextBackground#BC474950
  • dropdown.background#343746
  • dropdown.border#2D2738
  • dropdown.foreground#D2D9E6
  • editor.background#272D38
  • editor.findMatchBackground#FFD6A580
  • editor.findMatchHighlightBackground#F5F3EF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C80
  • editor.foreground#D2D9E6
  • editor.hoverHighlightBackground#A9DEF950
  • editor.lineHighlightBorder#445459
  • editor.rangeHighlightBackground#E5989B15
  • editor.selectionBackground#445459
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#272D38
  • editor.snippetFinalTabstopHighlightBorder#E1C340
  • editor.snippetTabstopHighlightBackground#272D38
  • editor.snippetTabstopHighlightBorder#6280A3
  • editor.wordHighlightBackground#A9DEF950
  • editor.wordHighlightStrongBackground#E1C34050
  • editorBracketHighlight.foreground1#D2D9E6
  • editorBracketHighlight.foreground2#BE95C4
  • editorBracketHighlight.foreground3#A9DEF9
  • editorBracketHighlight.foreground4#E1C340
  • editorBracketHighlight.foreground5#E5989B
  • editorBracketHighlight.foreground6#FFD6A5
  • editorBracketHighlight.unexpectedBracket.foreground#BC4749
  • editorCodeLens.foreground#6280A3
  • editorError.foreground#BC4749
  • editorGroup.border#E5989B
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#2D2738
  • editorGutter.addedBackground#E1C34080
  • editorGutter.deletedBackground#BC474980
  • editorGutter.modifiedBackground#A9DEF980
  • editorHoverWidget.background#272D38
  • editorHoverWidget.border#6280A3
  • editorIndentGuide.activeBackground#272D3845
  • editorIndentGuide.background#F5F3EF1A
  • editorLineNumber.foreground#6280A3
  • editorLink.activeForeground#A9DEF9
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#E1C34080
  • editorOverviewRuler.border#2D2738
  • editorOverviewRuler.currentContentForeground#E1C340
  • editorOverviewRuler.deletedForeground#BC474980
  • editorOverviewRuler.errorForeground#BC474980
  • editorOverviewRuler.incomingContentForeground#E5989B
  • editorOverviewRuler.infoForeground#A9DEF980
  • editorOverviewRuler.modifiedForeground#A9DEF980
  • editorOverviewRuler.selectionHighlightForeground#FFD6A5
  • editorOverviewRuler.warningForeground#FFD6A580
  • editorOverviewRuler.wordHighlightForeground#A9DEF9
  • editorOverviewRuler.wordHighlightStrongForeground#E1C340
  • editorRuler.foreground#F5F3EF1A
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#D2D9E6
  • editorSuggestWidget.selectedBackground#445459
  • editorWarning.foreground#A9DEF9
  • editorWhitespace.foreground#F5F3EF1A
  • editorWidget.background#21222C
  • errorForeground#BC4749
  • extensionButton.prominentBackground#E1C34090
  • extensionButton.prominentForeground#D2D9E6
  • extensionButton.prominentHoverBackground#E1C34060
  • focusBorder#6280A3
  • foreground#D2D9E6
  • gitDecoration.conflictingResourceForeground#FFD6A5
  • gitDecoration.deletedResourceForeground#BC4749
  • gitDecoration.ignoredResourceForeground#6280A3
  • gitDecoration.modifiedResourceForeground#A9DEF9
  • gitDecoration.untrackedResourceForeground#E1C340
  • input.background#272D38
  • input.border#2D2738
  • input.foreground#D2D9E6
  • input.placeholderForeground#6280A3
  • inputOption.activeBorder#E5989B
  • inputValidation.errorBorder#BC4749
  • inputValidation.infoBorder#BE95C4
  • inputValidation.warningBorder#FFD6A5
  • list.activeSelectionBackground#D2D9E6
  • list.activeSelectionForeground#272D38
  • list.dropBackground#445459
  • list.errorForeground#BC4749
  • list.focusBackground#44475A75
  • list.highlightForeground#A9DEF9
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#FFD6A5
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#BC4749
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#E1C34090
  • merge.incomingHeaderBackground#E5989B90
  • panel.background#272D38
  • panel.border#E5989B
  • panelTitle.activeBorder#BE95C4
  • panelTitle.activeForeground#D2D9E6
  • panelTitle.inactiveForeground#6280A3
  • peekView.border#445459
  • peekViewEditor.background#272D38
  • peekViewEditor.matchHighlightBackground#8CB36980
  • peekViewResult.background#21222C
  • peekViewResult.fileForeground#D2D9E6
  • peekViewResult.lineForeground#D2D9E6
  • peekViewResult.matchHighlightBackground#8CB36980
  • peekViewResult.selectionBackground#445459
  • peekViewResult.selectionForeground#D2D9E6
  • peekViewTitle.background#2D2738
  • peekViewTitleDescription.foreground#6280A3
  • peekViewTitleLabel.foreground#D2D9E6
  • pickerGroup.border#E5989B
  • pickerGroup.foreground#A9DEF9
  • progressBar.background#BE95C4
  • selection.background#E5989B
  • settings.checkboxBackground#21222C
  • settings.checkboxBorder#2D2738
  • settings.checkboxForeground#D2D9E6
  • settings.dropdownBackground#21222C
  • settings.dropdownBorder#2D2738
  • settings.dropdownForeground#D2D9E6
  • settings.headerForeground#D2D9E6
  • settings.modifiedItemIndicator#FFD6A5
  • settings.numberInputBackground#21222C
  • settings.numberInputBorder#2D2738
  • settings.numberInputForeground#D2D9E6
  • settings.textInputBackground#21222C
  • settings.textInputBorder#2D2738
  • settings.textInputForeground#D2D9E6
  • sideBar.background#21222C
  • sideBarSectionHeader.background#272D38
  • sideBarSectionHeader.border#2D2738
  • sideBarTitle.foreground#D2D9E6
  • statusBar.background#2D2738
  • statusBar.debuggingBackground#BC4749
  • statusBar.debuggingForeground#2D2738
  • statusBar.foreground#D2D9E6
  • statusBar.noFolderBackground#2D2738
  • statusBar.noFolderForeground#D2D9E6
  • statusBarItem.prominentBackground#BC4749
  • statusBarItem.prominentHoverBackground#FFD6A5
  • statusBarItem.remoteBackground#E5989B
  • statusBarItem.remoteForeground#272D38
  • tab.activeBackground#272D38
  • tab.activeBorderTop#BE95C480
  • tab.activeForeground#D2D9E6
  • tab.border#2D2738
  • tab.inactiveBackground#21222C
  • tab.inactiveForeground#6280A3
  • terminal.ansiBlack#21222E
  • terminal.ansiBlue#7AD0E4
  • terminal.ansiBrightBlack#577590
  • terminal.ansiBrightBlue#00C2EE
  • terminal.ansiBrightCyan#F18500
  • terminal.ansiBrightGreen#03C78C
  • terminal.ansiBrightMagenta#C9078C
  • terminal.ansiBrightRed#FF0004
  • terminal.ansiBrightWhite#FCFCFC
  • terminal.ansiBrightYellow#FFE817
  • terminal.ansiCyan#D19657
  • terminal.ansiGreen#6BAE7C
  • terminal.ansiMagenta#BF65A2
  • terminal.ansiRed#D64749
  • terminal.ansiWhite#EBEBDD
  • terminal.ansiYellow#E4E45B
  • terminal.background#2D2738
  • terminal.foreground#D2D9E6
  • titleBar.activeBackground#21222C
  • titleBar.activeForeground#D2D9E6
  • titleBar.inactiveBackground#2D2738
  • titleBar.inactiveForeground#6280A3
  • walkThrough.embeddedEditorBackground#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#E5989B
meta.diff, meta.diff.header#6280A3
markup.inserted#E1C340
markup.deleted#BC4749
markup.changed#FFD6A5
invalid#BC4749underline italic
invalid.deprecated#D2D9E6underline italic
entity.name.filename#8CB369
markup.error#BC4749
markup.underlineunderline
markup.bold#FFD6A5bold
markup.heading#E5989Bbold
markup.italic#8CB369italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#A9DEF9
markup.inline.raw, markup.raw.restructuredtext#E1C340
markup.underline.link, markup.underline.link.image#A9DEF9
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#BE95C4
entity.name.directive.restructuredtext, markup.quote#8CB369italic
meta.separator.markdown#6280A3
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E1C340
punctuation.definition.constant.restructuredtext#E5989B
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#E5989B
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#D2D9E6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#8CB369
entity.name.type.class, entity.name.class#A9DEF9normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#E5989Bitalic
entity.other.inherited-class#A9DEF9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6280A3
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#BE95C4
comment.block.documentation entity.name.type#A9DEF9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#A9DEF9
comment.block.documentation variable#FFD6A5italic
constant, variable.other.constant#E5989B
constant.character.escape, constant.character.string.escape, constant.regexp#BE95C4
entity.name.tag#BE95C4
entity.other.attribute-name.parent-selector#BE95C4
entity.other.attribute-name#E1C340italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#E1C340
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#FFD6A5italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#E1C340italic
meta.decorator variable.other.object#E1C340
keyword, punctuation.definition.keyword#BE95C4
keyword.control.new, keyword.operator.newbold
meta.selector#BE95C4
support#A9DEF9italic
support.function.magic, support.variable, variable.other.predefined#E5989Bregular
support.function, support.type.property-nameregular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#BE95C4
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#D2D9E6
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#BE95C4
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#A9DEF9
constant.other.date, constant.other.timestamp#FFD6A5
variable.other.alias.yaml#E1C340italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#BE95C4regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#A9DEF9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFD6A5
storage.modifier#BE95C4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#8CB369
punctuation.definition.group.capture.regexp#BE95C4
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#BC4749
punctuation.definition.character-class.regexp#A9DEF9
punctuation.definition.group.regexp#FFD6A5
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#BC4749
meta.assertion.look-ahead.regexp#E1C340
string#8CB369
punctuation.definition.string.begin, punctuation.definition.string.end#D7E170
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#93DCEC
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#6280A3
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#D2D9E6
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#FFD6A5italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#D2D9E6normal
meta.selectionset.graphql variable#8CB369
meta.selectionset.graphql meta.arguments variable#D2D9E6
entity.name.fragment.graphql, variable.fragment.graphql#A9DEF9
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#D2D9E6
source.shell variable.other#E5989B
support.constant#E5989Bnormal
meta.scope.prerequisites.makefile#8CB369
meta.attribute-selector.scss#8CB369
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#D2D9E6
meta.preprocessor.haskell#6280A3
log.error#BC4749bold
log.warning#8CB369bold
Odhin Theme by Rodrigo Odhin - VS Code Theme