Skip to main content
CodingTheme

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.activeBorder#1cecff
  • activityBar.background#15141b
  • activityBar.border#000000
  • activityBar.foreground#54bec5
  • activityBar.inactiveForeground#525156
  • activityBarBadge.background#1cecff
  • activityBarBadge.foreground#15141b
  • badge.background#1cecff
  • badge.foreground#15141b
  • button.background#54bec5
  • button.foreground#15141b
  • button.hoverBackground#49c29a
  • diffEditor.insertedTextBackground#00d89023
  • diffEditor.removedTextBackground#ff474720
  • dropdown.background#15141b
  • dropdown.border#3b334b
  • dropdown.foreground#d7d7d7
  • editor.background#15141b
  • editor.findMatchBackground#3d375e7f
  • editor.findMatchHighlightBackground#3d375e7f
  • editor.findRangeHighlightBackground#3d375e7f
  • editor.foreground#bdbdbd
  • editor.inactiveSelectionBackground#3d375e7f
  • editor.lineHighlightBackground#1cecff28
  • editor.lineHighlightBorder#a394f000
  • editor.selectionBackground#1cecff28
  • editor.selectionHighlightBackground#3d375e7f
  • editor.stackFrameHighlightBackground#353424
  • editor.wordHighlightBackground#3d375e7f
  • editor.wordHighlightStrongBackground#3d375e7f
  • editorBracketMatch.border#1cecff
  • editorCursor.foreground#1cecff
  • editorError.border#ffffff00
  • editorError.foreground#ff0000
  • editorGroup.border#000000
  • editorGroup.dropBackground#3d375e7f
  • editorGroupHeader.tabsBackground#15141b
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#54bec5
  • editorGutter.deletedBackground#ff0000
  • editorGutter.modifiedBackground#6f78c7
  • editorHoverWidget.background#121016
  • editorHoverWidget.border#000000
  • editorInlayHint.background#2e2b38
  • editorInlayHint.foreground#d7d7d7
  • editorLineNumber.foreground#a394f033
  • editorLink.activeForeground#1cecff
  • editorSuggestWidget.background#121016
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#d7d7d7
  • editorSuggestWidget.highlightForeground#54bec5
  • editorSuggestWidget.selectedBackground#4d4d4d
  • editorWarning.border#ffffff00
  • editorWarning.foreground#6f78c7
  • editorWhitespace.foreground#000000
  • editorWidget.background#121016
  • editorWidget.border#000000
  • errorForeground#ff0000
  • focusBorder#a394f033
  • foreground#bdbdbd
  • gitDecoration.conflictingResourceForeground#1cecff
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#4d4d4d
  • gitDecoration.modifiedResourceForeground#6f78c7
  • gitDecoration.untrackedResourceForeground#54bec5
  • input.background#15141b
  • input.border#3b334b
  • input.foreground#d7d7d7
  • input.placeholderForeground#af8aff7f
  • inputOption.activeBorder#1cecff
  • list.activeSelectionBackground#2e2b38
  • list.activeSelectionForeground#1cecff
  • list.focusBackground#3b334b
  • list.focusForeground#1cecff
  • list.highlightForeground#1cecff
  • list.hoverBackground#3b334b
  • list.hoverForeground#bdbdbd
  • list.inactiveSelectionBackground#2e2b38
  • list.inactiveSelectionForeground#1cecff
  • panel.border#000000
  • panelTitle.activeBorder#54bec5
  • panelTitle.activeForeground#d7d7d7
  • progressBar.background#54bec5
  • scrollbar.shadow#15141b
  • scrollbarSlider.activeBackground#3d375e7f
  • scrollbarSlider.background#a394f033
  • scrollbarSlider.hoverBackground#a394f033
  • selection.background#3d375e7f
  • sideBar.background#110f18
  • sideBar.border#000000
  • sideBar.foreground#d7d7d7
  • sideBarSectionHeader.background#15141b
  • sideBarSectionHeader.foreground#adacae
  • sideBarTitle.foreground#adacae
  • statusBar.background#121016
  • statusBar.border#000000
  • statusBar.debuggingBackground#a19c77
  • statusBar.debuggingForeground#15141b
  • statusBar.foreground#adacae
  • statusBarItem.activeBackground#1cecff
  • tab.activeBackground#00000000
  • tab.activeBorderTop#54bec5
  • tab.activeForeground#54bec5
  • tab.border#000000
  • tab.inactiveBackground#15141b
  • tab.inactiveForeground#2c6474
  • titleBar.activeBackground#121016
  • titleBar.border#000000
  • titleBar.inactiveBackground#2d2b38
  • tree.indentGuidesStroke#4d4d4d
  • widget.shadow#0f0f0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6370italic
keyword, storage, variable.language.super, variable.language.this, variable.language.special#C678DD
string, punctuation.definition.string#98C379
constant, keyword.other.unit, variable.other.constant, variable.other.enummember#D19A66
entity.name.function, support.function, punctuation.definition.decorator, punctuation.decorator, meta.function-call.generic#61AFEF
entity.name.type, entity.other.inherited-class, support.class#E5C07B
meta.type.annotation, meta.type.parameters, support.type.primitive, support.type.builtin, support.type.exception#E5C07B
punctuation.accessor, keyword.operator.logical, keyword.operator.comparison, keyword.operator.increment, keyword.operator.decrement, keyword.operator.assignment, keyword.operator.relational, keyword.operator.ternary, keyword.operator.arithmetic, keyword.operator.rest, keyword.operator.spread, keyword.operator.type, keyword.operator.optional, keyword.operator.combinator, keyword.operator.pattern, keyword.operator.or, keyword.operator.quantifier, keyword.operator.bitwise#56B6C2
punctuation, keyword.operator.type.annotation, meta.brace#ABB2BF
variable, entity.name, support.variable#E06C75
meta.object-literal.key#98C379
punctuation.definition.directive.cpp, keyword.other.using.directive.cpp#C678DD
entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.cpp, entity.name.scope-resolution.function.call.cpp, entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.function.definition.cpp#E5C07B
punctuation.definition.keyword.css, punctuation.definition.keyword.scss, keyword.operator.logical.and.media.css, keyword.operator.logical.and.media.scss, keyword.operator.logical.scss#C678DD
support.constant.property-value.css, support.constant.vendored.property-value.css, support.constant.color.w3c-standard-color-name.css, support.constant.font-name.css, punctuation.definition.constant.css, entity.other.attribute-name.css, entity.other.attribute-name.attribute.scss#D19A66
keyword.operator.css, keyword.operator.scss#56B6C2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E06C75
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#E5C07B
meta.property-value.css#E06C75
support.type.map.key.scss, entity.other.keyframe-offset.css, meta.property-name.css, entity.other.attribute-name.scss, support.type.property-name.media.css#98C379
meta.attribute-selector.scss#98C379
variable.parameter.url.css, variable.parameter.url.scss#ABB2BF
punctuation.whitespace.comment#5C6370italic
support.type.graphql, support.type.location.graphql, support.type.enum.graphql, entity.scalar.graphql#E5C07B
punctuation.or.graphql, keyword.operator.nulltype.graphql, punctuation.assignment.graphql#56B6C2
entity.other.attribute-name.html, entity.other.attribute-name.localname.xml, entity.other.attribute-name.namespace.xml#D19A66italic
entity.other.attribute-name.js, entity.other.attribute-name.tsx#D19A66italic
support.constant.json.js, support.constant.json.jsx, support.constant.json.ts, support.constant.json.tsx, support.constant.math.js, support.constant.math.jsx, support.constant.math.ts, support.constant.math.tsx#E5C07B
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#51B4C3
punctuation.section.embedded.begin.js, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.js, punctuation.section.embedded.end.tsx#BE5046
variable.other.constant.js, variable.other.constant.jsx, variable.other.constant.ts, variable.other.constant.tsx#E06C75
string.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#E06C75
punctuation.definition.heading.markdown#E06C75
markup.italic.markdown, punctuation.definition.italic.markdown#C678DDitalic
markup.bold.markdown, punctuation.definition.bold.markdown#D19A66bold
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown, punctuation.definition.markdown, fenced_code.block.language.markdown#98C379
punctuation.definition.list.begin.markdown#E06C75
markup.quote.markdown, punctuation.definition.quote.begin.markdownitalic
markup.underline.link.markdown, markup.underline.link.image.markdown#56B6C2
fenced_code.block.language.markdownitalic
keyword.operator.python, keyword.operator.unpacking.arguments.python, punctuation.separator.period.python#56B6C2
keyword.operator.logical.python#C678DD
support.type.python#E5C07B
source.python#E06C75
constant.other.table-name.sql, constant.other.database-name.sql#ABB2BF
keyword.operator.math.sql, keyword.operator.star.sql#56B6C2
keyword.key.toml, entity.other.attribute-name.table.toml, entity.other.attribute-name.table.array.toml#E06C75
keyword.control.flow.block-scalar.folded.yaml, keyword.control.flow.block-scalar.literal.yaml, storage.modifier.chomping-indicator.yaml#56B6C2

Shiki preview

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

Loading...