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#161C20
  • activityBar.foreground#EAEDF6
  • activityBar.inactiveForeground#B6B3AE
  • activityBarBadge.background#C2A83E
  • activityBarBadge.foreground#EAEDF6
  • badge.background#C2A83E
  • badge.foreground#EAEDF6
  • breadcrumb.background#161C20
  • breadcrumb.focusForeground#EAEDF6
  • breadcrumb.foreground#B6B3AE
  • button.background#C2A83E
  • button.foreground#EAEDF6
  • button.hoverBackground#A79032
  • button.secondaryBackground#2F3E47
  • button.secondaryForeground#EAEDF6
  • button.secondaryHoverBackground#263138
  • debugConsole.errorForeground#E6422D
  • debugConsole.infoForeground#63A0B5
  • debugConsole.warningForeground#FFB834
  • debugIcon.pauseForeground#63A0B5
  • debugIcon.restartForeground#A5B034
  • debugIcon.stopForeground#F0743A
  • debugToolBar.background#1A242A
  • debugToolBar.border#00000000
  • editor.background#161C20
  • editor.findMatchBackground#00000000
  • editor.findMatchBorder#FFB834
  • editor.findMatchHighlightBackground#1A242A
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#2F3E47
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#2F3E47
  • editor.hoverHighlightBackground#63a1b575
  • editor.inactiveSelectionBackground#2F3E47
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#00000000
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#263138
  • editor.selectionHighlightBackground#263138
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#EC4E2062
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#F6AE2D32
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#2F3E47
  • editorCodeLens.foreground#B6B3AE
  • editorCursor.background#1A242A
  • editorCursor.foreground#C2A83E
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#F0743A
  • editorGroup.border#2F3E47
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#161C20
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#4CC977
  • editorGutter.background#161C20
  • editorGutter.deletedBackground#F0743A
  • editorGutter.foldingControlForeground#2F3E47
  • editorGutter.modifiedBackground#7A7FDB
  • editorHoverWidget.background#1A242A
  • editorHoverWidget.border#00000000
  • editorHoverWidget.foreground#B6B3AE
  • editorIndentGuide.activeBackground#2F3E47
  • editorIndentGuide.background#263138
  • editorInfo.background#00000000
  • editorInfo.border#00000000
  • editorInfo.foreground#63A0B5
  • editorLineNumber.activeForeground#B6B3AE
  • editorLineNumber.foreground#2F3E47
  • editorLink.activeForeground#FFB834
  • editorMarkerNavigation.background#263138
  • editorMarkerNavigationError.background#F0743A
  • editorMarkerNavigationInfo.background#63A0B5
  • editorMarkerNavigationWarning.background#FFB834
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#2F3E47
  • editorSuggestWidget.background#1A242A
  • editorSuggestWidget.border#00000000
  • editorSuggestWidget.foreground#B6B3AE
  • editorSuggestWidget.highlightForeground#C2A83E
  • editorSuggestWidget.selectedBackground#263138
  • editorSuggestWidget.selectedForeground#EAEDF6
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#FFB834
  • editorWhitespace.foreground#2F3E47
  • editorWidget.background#1A242A
  • editorWidget.foreground#B6B3AE
  • editorWidget.resizeBorder#EAEDF68F
  • focusBorder#00000000
  • foreground#B6B3AE
  • gitDecoration.addedResourceForeground#A5B034
  • gitDecoration.conflictingResourceForeground#63A0B5
  • gitDecoration.deletedResourceForeground#F0743A
  • gitDecoration.ignoredResourceForeground#B6B3AE
  • gitDecoration.modifiedResourceForeground#FFB834
  • gitDecoration.stageDeletedResourceForeground#F0743A
  • gitDecoration.stageModifiedResourceForeground#C2A83E
  • gitDecoration.submoduleResourceForeground#63A0B5
  • gitDecoration.untrackedResourceForeground#A5B034
  • input.background#161C20
  • input.border#00000000
  • input.foreground#B6B3AE
  • input.placeholderForeground#B6B3AE
  • inputOption.activeBackground#263138
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#EAEDF6
  • list.activeSelectionBackground#263138
  • list.activeSelectionForeground#EAEDF6
  • list.dropBackground#263138
  • list.focusBackground#2F3E47
  • list.focusForeground#EAEDF6
  • list.highlightForeground#C2A83E
  • list.hoverBackground#263138
  • list.hoverForeground#EAEDF6
  • list.inactiveSelectionBackground#263138
  • list.inactiveSelectionForeground#B6b3AE
  • listFilterWidget.background#263138
  • listFilterWidget.noMatchesOutline#F0743A
  • listFilterWidget.outline#00000000
  • menu.background#1A242A
  • menu.border#00000000
  • menu.foreground#B6B3AE
  • menu.selectionBackground#2F3E47
  • menu.selectionBorder#00000000
  • menu.selectionForeground#EAEDF6
  • menu.separatorBackground#2F3E47
  • menubar.selectionBackground#263138
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#EAEDF6
  • minimap.background#00000000
  • minimap.errorHighlight#E6432D
  • minimap.warningHighlight#FFB834
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#1A242A
  • notificationCenterHeader.foreground#B6B3AE
  • notifications.background#1A242A
  • notifications.border#00000000
  • notifications.foreground#B6B3AE
  • notificationsErrorIcon.foreground#F0743A
  • notificationsInfoIcon.foreground#63A0B5
  • notificationsWarningIcon.foreground#FFB834
  • notificationToast.border#00000000
  • panel.background#161C20
  • panel.border#00000000
  • panelTitle.activeBorder#2F3E47
  • panelTitle.activeForeground#EAEDF6
  • panelTitle.inactiveForeground#B6B3AE
  • peekView.border#00000000
  • peekViewEditor.background#263138
  • peekViewEditor.matchHighlightBackground#F6AE2D68
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#263138
  • peekViewResult.background#182026
  • peekViewResult.fileForeground#B6B3AE
  • peekViewResult.lineForeground#B6B3AE
  • peekViewResult.matchHighlightBackground#E6432D8C
  • peekViewResult.selectionBackground#263138
  • peekViewResult.selectionForeground#EAEDF6
  • peekViewTitle.background#182026
  • peekViewTitleDescription.foreground#B6B3AE
  • peekViewTitleLabel.foreground#EAEDF6
  • pickerGroup.border#00000000
  • pickerGroup.foreground#FFB834
  • progressBar.background#C2A83E
  • scrollbar.shadow#00000000
  • sideBar.background#161C20
  • sideBar.border#00000000
  • sideBar.foreground#B6B3AE
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#EAEDF6
  • sideBarTitle.foreground#EAEDF6
  • statusBar.background#161C20
  • statusBar.border#00000000
  • statusBar.debuggingBackground#C2A83E
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#EAEDF6
  • statusBar.foreground#B6B3AE
  • statusBar.noFolderBackground#EAEDF6
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#182228
  • statusBarItem.hoverBackground#0000002d
  • statusBarItem.remoteBackground#39A960
  • statusBarItem.remoteForeground#EAEDF6
  • tab.activeBackground#182026
  • tab.activeBorder#2F3E47
  • tab.activeBorderTop#00000000
  • tab.activeForeground#EAEDF6
  • tab.border#00000000
  • tab.inactiveBackground#182026
  • terminal.ansiBlack#263138
  • terminal.ansiBlue#7A7FDB
  • terminal.ansiBrightBlack#2F3E47
  • terminal.ansiBrightBlue#A4A6CB
  • terminal.ansiBrightCyan#69B1E4
  • terminal.ansiBrightGreen#30D46A
  • terminal.ansiBrightMagenta#EE6D6D
  • terminal.ansiBrightRed#F0743A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFC559
  • terminal.ansiCyan#44A1E4
  • terminal.ansiGreen#39A960
  • terminal.ansiMagenta#E6422D
  • terminal.ansiRed#EC4E20
  • terminal.ansiWhite#EAEDF6
  • terminal.ansiYellow#FFB834
  • terminal.border#2F3E47
  • terminal.foreground#9CACB6
  • terminal.selectionBackground#2631387A
  • terminalCursor.background#161C20
  • terminalCursor.foreground#C2A83E
  • textLink.foreground#63A0B5
  • titleBar.activeBackground#161C20
  • titleBar.activeForeground#B6B3AE
  • titleBar.border#00000000
  • titleBar.inactiveBackground#F0743A
  • titleBar.inactiveForeground#EAEDF6
  • tree.indentGuidesStroke#263138
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#2F3E47italic
string#A5B034
string.quoted#A5B034
string.unquoted#9CACB6
support.constant.math#FFB834
constant.numeric, constant.character.numeric#F0743A
keyword.other.unit#FFB834
constant.language, punctuation.definition.constant, variable.other.constant#A4A6CB
constant.character, constant.other#C2A83E
string.regexp, string.regexp keyword.other#63A0B5
meta.function punctuation.separator.comma#9CACB6
variable#FFB834italic
punctuation.accessor, keyword#7A7FDB
storage, storage.type, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js#69B1E4
entity.name.class, meta.class entity.name.type.class#FFB834
entity.other.inherited-class#4CC977
entity.name.function#A4A6CB
variable.parameter#7A7FDB
punctuation.definition.tag, meta.tag#69B1E4
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#F0743A
entity.other.attribute-name#FFB834
entity.name.tag.custom#FFB834
support.function, support.constant#A4A6CB
support.constant.meta.property-value#69B1E4
support.type, support.class#FFB834
support.variable.dom#FFB834
invalid#9CACB6
invalid.deprecated#9CACB6
keyword.operator#69B1E4
keyword.operator.relational#7A7FDB
keyword.operator.assignment#7A7FDB
comment.line.double-slash#2F3E47
object#DBE4FF
constant.language.null#EE6D6D
meta.brace#9CACB6
meta.delimiter.period#7A7FDB
constant.language.boolean#EE6D6D
object.comma#9CACB6
variable.parameter.function#69B1E4
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#63A0B5
meta.property-list entity.name.tag.reference#EE6D6D
constant.other.color, constant.other.color.rgb-value punctuation.definition.constant#C2A83E
meta.selector#7A7FDB
entity.other.attribute-name.id#FFB834
meta.property-name#63A0B5
entity.name.tag.doctype, meta.tag.sgml.doctype#7A7FDBitalic
punctuation.definition.parameters#DBE4FF
keyword.control.operator#69B1E4
keyword.operator.logical#7A7FDB
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#EE6D6D
variable.other.property, variable.other.object.property#69B1E4
entity.name.function#F0743A
keyword.operator.comparison#7A7FDB
support.constant, keyword.other.special-method, keyword.other.new#9CACB6
support.function#69B1E4
invalid.broken#EAEDF6
invalid.unimplemented#9CACB6
invalid.illegal#9CACB6
variable.language#EE6D6D
support.variable.property#69B1E4
variable.function#A4A6CB
variable.interpolation#EE6D6D
meta.function-call#A4A6CB
punctuation.section.embedded#E6422D
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#9CACB6
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#DBE4FF
string.template meta.template.expression#E6422D
string.template punctuation.definition.string#9CACB6
italic#7A7FDBitalic
bold#FFB834bold
quote#7A7FDBitalic
raw#63A0B5
variable.assignment.coffee#69B1E4
variable.parameter.function.coffee#9CACB6
variable.assignment.coffee#69B1E4
variable.other.readwrite.cs#9CACB6
entity.name.type.class.cs, storage.type.cs#A4A6CB
entity.name.type.namespace.cs#A4A6CB
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EE6D6D
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EE6D6D
keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass#C2A83E
meta.attribute-selector.css entity.other.attribute-name.attribute#F0743A
source.js source.css meta.property-list, source.js source.css punctuation.section, source.js source.css punctuation.terminator.rule, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.definition.attribute-selector, source.js source.css meta.property-list, source.js source.css meta.property-list punctuation.separator.comma, source.ts source.css punctuation.section, source.ts source.css punctuation.terminator.rule, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css meta.property-list, source.ts source.css meta.property-list punctuation.separator.comma#9CACB6
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#A4A6CB
source.elixir entity.name.function#FFB834
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#A4A6CB
source.elixir punctuation.definition.string#4CC977
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#FFB834
source.elixir .punctuation.binary.elixir#7A7FDB
source.go meta.function-call.go#9CACB6
variable.qraphql#9CACB6
entity.other.attribute-name.id.html#FFB834
punctuation.definition.tag.html#69B1E4
meta.tag.sgml.doctype.html#7A7FDBitalic
meta.class entity.name.type.class.js#F09971
meta.method.declaration storage.type.js#A4A6CB
terminator.js#9CACB6
meta.js punctuation.definition.js#9CACB6
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#9CACB6
variable.other.jsdoc, variable.other.phpdoc#69B1E4
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#9CACB6
variable.parameter.function.js#7A7FDB
variable.other.readwrite.js#9CACB6
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#9CACB6
variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx#9CACB6
variable.js, variable.other.js#9CACB6
entity.name.type.js, entity.name.type.module.js#F09971
support.class.js#9CACB6
support.type.property-name.json#A5B034
support.constant.json#FFB834
meta.structure.dictionary.value.json string.quoted.double#63A0B5
string.quoted.double.json punctuation.definition.string.json#63A0B5
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#EE6D6D
variable.other.ruby#9CACB6
constant.language.symbol.hashkey.ruby#69B1E4
entity.name.tag.less#EE6D6D
meta.attribute-selector.less entity.other.attribute-name.attribute#F0743A
markup.heading#69B1E4
markup.italic#7A7FDBitalic
markup.bold#FFB834bold
markup.quote#7A7FDBitalic
markup.inline.raw#63A0B5
markup.underline.link, markup.underline.link.image#EE6D6D
markup.meta.attribute-list#4CC977
markup.admonitionbold
markup.list.bullet#DBE4FF
markup.superscript, markup.subscriptitalic
string.other.link.title.markdown, string.other.link.description.markdown#9CACB6
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#69B1E4
punctuation.definition.metadata.markdown#EE6D6D
beginning.punctuation.definition.list.markdown#69B1E4
entity.name.function.asciidoc#F0743A
variable.other.php#A4A6CB
support.class.php#F09971
meta.function-call.php punctuation#9CACB6
variable.other.global.php#FFB834
variable.other.global.php punctuation.definition.variable#FFB834
constant.language.python#EE6D6D
variable.parameter.function.python, meta.function-call.arguments.python#7A7FDB
meta.function-call.python, meta.function-call.generic.python#A4A6CB
punctuation.python#9CACB6
entity.name.function.decorator.python#FFB834
source.python variable.language.special#A4A6CB
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#9CACB6
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#A4A6CB
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#A4A6CB
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F0743A
entity.name.tag.scss, entity.name.tag.sass#EE6D6D
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#9CACB6
entity.name.type.ts, entity.name.type.tsx#69B1E4
support.class.node.ts, support.class.node.tsx#A4A6CB
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#9CACB6
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#9CACB6
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#A4A6CB
meta.tag.js meta.jsx.children.tsx#A4A6CB
entity.name.tag.yaml#69B1E4
variable.parameter.handlebars#A4A6CB
entity.other.attribute-name.handlebars variable.parameter.handlebars#FFB834
entity.other.attribute-name.handlebars#69B1E4
entity.other.attribute-value.handlebars variable.parameter.handlebars#7A7FDB
meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.property-list.css meta.property-value.css variable.other.less, punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.section.embedded.js, punctuation.definintion.string, punctuationnormal
keyword.other.unit, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.type.annotation, punctuation.section.embedded, assignment.coffee, entity.name.type.ts, italic, quote, type .function, type.function, storage.type.class, keyword.control, modifier, thisitalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Kozy Theme - Coding Theme