Skip to main content
CodingTheme

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#00000000
  • activityBar.activeBorder#DCDEDF
  • activityBar.activeFocusBorder#0076A4
  • activityBar.background#0C141B
  • activityBar.border#00000000
  • activityBar.foreground#DCDEDF
  • activityBar.inactiveForeground#8C8C8C
  • activityBarBadge.background#0076A4
  • activityBarBadge.foreground#EBEBEB
  • badge.background#434A56
  • badge.foreground#DCDEDF
  • breadcrumb.activeSelectionForeground#EBEBEB
  • breadcrumb.background#161D26
  • breadcrumb.focusForeground#D2D2D2
  • breadcrumb.foreground#969696
  • breadcrumbPicker.background#434A56
  • button.background#004A6A
  • button.border#004A6A
  • button.foreground#DCDEDF
  • button.hoverBackground#396683
  • button.secondaryBackground#004A6A
  • button.secondaryForeground#DCDEDF
  • button.secondaryHoverBackground#396683
  • button.separator#161D26
  • commandCenter.activeBackground#2B496C
  • commandCenter.activeBorder#00000000
  • commandCenter.activeForeground#D9D9D9
  • commandCenter.background#e1e1e120
  • commandCenter.border#00000000
  • commandCenter.foreground#DCDEDF
  • commandCenter.inactiveBorder#00000000
  • commandCenter.inactiveForeground#969696
  • debugConsole.errorForeground#FF7A7C
  • debugExceptionWidget.background#0C141B
  • debugExceptionWidget.border#2B496C
  • debugIcon.breakpointForeground#A82027
  • debugTokenExpression.error#FF7A7C
  • debugToolBar.background#0C141B
  • diffEditor.border#434A56ab
  • diffEditor.insertedTextBackground#6c954133
  • diffEditor.removedTextBackground#a8202733
  • disabledForeground#969696
  • dropdown.background#18283C
  • dropdown.border#18283C
  • dropdown.foreground#969696
  • dropdown.listBackground#18283C
  • editor.background#161D26
  • editor.findMatchBackground#3d4d5e50
  • editor.findMatchBorder#64C6FF
  • editor.findMatchHighlightBackground#ebebeb3d
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#ebebeb3d
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#434A5630
  • editor.foreground#DCDEDF
  • editor.inactiveSelectionBackground#ebebeb30
  • editor.lineHighlightBackground#2B496C20
  • editor.lineHighlightBorder#2B496C45
  • editor.selectionBackground#2B496C
  • editor.selectionHighlightBackground#fcfcfa35
  • editor.wordHighlightBackground#fcfcfa35
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketHighlight.foreground1#FF9BCB
  • editorBracketHighlight.foreground2#DFCAA8
  • editorBracketHighlight.foreground3#c2e1f0
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#96969696
  • editorCodeLens.foreground#969696
  • editorCursor.foreground#EBEBEB
  • editorError.foreground#FF7A7C
  • editorGroup.border#434A56ab
  • editorGroup.emptyBackground#161D26
  • editorGroupHeader.border#00000000
  • editorGroupHeader.noTabsBackground#161D26
  • editorGroupHeader.tabsBackground#161D26
  • editorGroupHeader.tabsBorder#161D26
  • editorGutter.addedBackground#6c9541f5
  • editorGutter.background#161D26
  • editorGutter.deletedBackground#8F98A0
  • editorGutter.foldingControlForeground#969696
  • editorGutter.modifiedBackground#1aa0fff5
  • editorIndentGuide.activeBackground1#434A56ab
  • editorIndentGuide.background1#434A5665
  • editorInlayHint.background#004A6A45
  • editorInlayHint.foreground#969696
  • editorInlayHint.parameterBackground#004A6A45
  • editorInlayHint.parameterForeground#969696
  • editorInlayHint.typeBackground#004A6A45
  • editorInlayHint.typeForeground#969696
  • editorLightBulb.foreground#F4BC46
  • editorLightBulbAutoFix.foreground#64C7FF
  • editorLineNumber.activeForeground#EBEBEB
  • editorLineNumber.foreground#8C8C8C
  • editorMarkerNavigationError.background#FF7A7C
  • editorOverviewRuler.addedForeground#018352
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.currentContentForeground#6C9541
  • editorOverviewRuler.deletedForeground#5D656F
  • editorOverviewRuler.errorForeground#8FE5C2
  • editorOverviewRuler.incomingContentForeground#0076A4
  • editorOverviewRuler.infoForeground#1A9FFF
  • editorOverviewRuler.modifiedForeground#0076A4
  • editorOverviewRuler.selectionHighlightForeground#a3cf06d5
  • editorOverviewRuler.warningForeground#F5AD1C
  • editorOverviewRuler.wordHighlightForeground#a3cf06d5
  • editorOverviewRuler.wordHighlightStrongForeground#ff8686f1
  • editorRuler.foreground#434A56ab
  • editorSuggestWidget.background#0C141B
  • editorSuggestWidget.focusHighlightForeground#64C7FF
  • editorSuggestWidget.foreground#DCDEDF
  • editorSuggestWidget.selectedBackground#434A56ab
  • editorUnnecessaryCode.opacity#000000a6
  • editorWidget.background#0C141B
  • editorWidget.border#00000000
  • editorWidget.foreground#DCDEDF
  • editorWidget.resizeBorder#18283C
  • errorForeground#FF7A7C
  • focusBorder#0076A4
  • foreground#DCDEDF
  • gitDecoration.addedResourceForeground#80D682EE
  • gitDecoration.conflictingResourceForeground#D17A4EFD
  • gitDecoration.deletedResourceForeground#FD6B6EEE
  • gitDecoration.ignoredResourceForeground#5E6C83FD
  • gitDecoration.modifiedResourceForeground#EDBE63EE
  • gitDecoration.renamedResourceForeground#FF922BBE
  • gitDecoration.stageDeletedResourceForeground#FF7A7CE0
  • gitDecoration.stageModifiedResourceForeground#E0BD73FD
  • gitDecoration.submoduleResourceForeground#959DA5EE
  • gitDecoration.untrackedResourceForeground#00A559EE
  • icon.foreground#DCDEDF
  • input.background#18283C
  • input.border#18283C
  • input.foreground#DCDEDF
  • input.placeholderForeground#969696
  • inputOption.activeBackground#434A56ab
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#DCDEDF
  • inputOption.hoverBackground#434A56ab
  • inputValidation.errorBorder#FF7A7C
  • inputValidation.errorForeground#FF7A7C
  • list.activeSelectionBackground#2B496C80
  • list.activeSelectionForeground#DCDEDF
  • list.dropBackground#2B496C90
  • list.errorForeground#FF7A7C
  • list.focusAndSelectionOutline#12759900
  • list.focusHighlightForeground#d7d9da
  • list.highlightForeground#64C7FF
  • list.hoverBackground#2B496C35
  • list.hoverForeground#DCDEDF
  • list.inactiveSelectionBackground#004A6A60
  • listFilterWidget.background#18283C
  • listFilterWidget.noMatchesOutline#A82027
  • menu.background#434A56
  • menu.foreground#DCDEDF
  • menu.selectionBackground#DCDEDF
  • menu.selectionForeground#161D26
  • menu.separatorBackground#5D656F
  • menubar.selectionBackground#2B496C
  • menubar.selectionForeground#DCDEDF
  • minimap.background#161D26
  • minimap.errorHighlight#8FE5C2a5
  • minimap.findMatchHighlight#d06028fa
  • minimap.infoHighlight#1A9FFFa5
  • minimap.selectionOccurrenceHighlight#969696b0
  • minimap.warningHighlight#F5AD1Ca5
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#18283C
  • notificationCenterHeader.foreground#DCDEDF
  • notificationLink.foreground#0076A4
  • notifications.background#161D26
  • notifications.border#434A56ab
  • notifications.foreground#DCDEDF
  • notificationsErrorIcon.foreground#FF8686
  • notificationsInfoIcon.foreground#64C7FF
  • notificationsWarningIcon.foreground#EDBE63
  • notificationToast.border#00000000
  • panel.background#161D26
  • panel.border#434A56ab
  • panelTitle.activeBorder#0076A4
  • panelTitle.activeForeground#DCDEDF
  • panelTitle.inactiveForeground#969696
  • peekView.border#434A56ab
  • peekViewEditor.background#0C141B
  • peekViewEditor.matchHighlightBackground#434A56ab
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewResult.background#0C141B
  • peekViewResult.lineForeground#DCDEDF
  • peekViewResult.matchHighlightBackground#434A56ab
  • peekViewResult.selectionBackground#18283C
  • peekViewTitleDescription.foreground#969696
  • peekViewTitleLabel.foreground#EBEBEB
  • pickerGroup.border#434A56ab
  • pickerGroup.foreground#0076A4
  • problemsErrorIcon.foreground#FF7A7C
  • problemsInfoIcon.foreground#64C7FF
  • problemsWarningIcon.foreground#EDBE63
  • progressBar.background#0076A4
  • quickInputList.focusBackground#2B496C
  • sash.hoverBorder#0076A4
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#434A5690
  • scrollbarSlider.background#434A5650
  • scrollbarSlider.hoverBackground#434A5670
  • selection.background#2B496C
  • settings.checkboxBackground#0C141B
  • settings.checkboxBorder#0C141B
  • settings.checkboxForeground#DCDEDF
  • settings.dropdownBackground#0C141B
  • settings.dropdownBorder#0C141B
  • settings.dropdownForeground#DCDEDF
  • settings.focusedRowBackground#434A5625
  • settings.focusedRowBorder#0076A4
  • settings.headerBorder#434A56ab
  • settings.headerForeground#EBEBEB
  • settings.modifiedItemIndicator#DCDEDF
  • settings.numberInputBackground#0C141B
  • settings.numberInputBorder#0C141B
  • settings.numberInputForeground#DCDEDF
  • settings.rowHoverBackground#161D26
  • settings.textInputBackground#0C141B
  • settings.textInputBorder#0C141B
  • settings.textInputForeground#DCDEDF
  • sideBar.background#0F1922
  • sideBar.foreground#969696
  • sideBarSectionHeader.background#0F1922
  • sideBarSectionHeader.border#434A56ab
  • sideBarSectionHeader.foreground#ACACAC
  • sideBarTitle.foreground#AEAEAE
  • statusBar.background#18283C
  • statusBar.debuggingBackground#004A6A
  • statusBar.debuggingForeground#DCDEDF
  • statusBar.foreground#DCDEDF
  • statusBar.noFolderBackground#004A6A
  • statusBar.noFolderForeground#DCDEDF
  • statusBarItem.errorBackground#A82027
  • statusBarItem.errorHoverForeground#EBEBEB
  • statusBarItem.remoteBackground#004A6A
  • statusBarItem.remoteForeground#DCDEDF
  • statusBarItem.warningBackground#E48717
  • statusBarItem.warningHoverForeground#EBEBEB
  • tab.activeBackground#161D26
  • tab.activeBorder#0076A4
  • tab.activeForeground#DCDEDF
  • tab.border#161D26
  • tab.dragAndDropBorder#DCDEDF
  • tab.hoverBorder#434A56ab
  • tab.inactiveBackground#161D26
  • tab.inactiveForeground#969696
  • tab.unfocusedActiveBackground#161D26
  • tab.unfocusedActiveBorder#1275994b
  • tab.unfocusedActiveForeground#8C8C8C
  • tab.unfocusedInactiveBackground#161D26
  • terminal.ansiBlack#5e5e5e
  • terminal.ansiBlue#64C7FF
  • terminal.ansiBrightBlack#8C8C8C
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#A6F8E9
  • terminal.ansiBrightGreen#2ADD75
  • terminal.ansiBrightMagenta#FF64FF
  • terminal.ansiBrightRed#FF465C
  • terminal.ansiBrightWhite#EBEBEB
  • terminal.ansiBrightYellow#FFCE57
  • terminal.ansiCyan#00C5D3
  • terminal.ansiGreen#0ed78a
  • terminal.ansiMagenta#E560E6
  • terminal.ansiRed#FF465C
  • terminal.ansiWhite#DCDEDF
  • terminal.ansiYellow#FFCE57
  • terminal.background#161D26
  • terminal.border#434A56ab
  • terminal.foreground#D2D2D2
  • terminal.selectionBackground#396683
  • terminalCommandDecoration.errorBackground#FF7A7C
  • terminalCursor.background#E1E1E1
  • textLink.activeForeground#DCDEDF
  • textLink.foreground#30CAFF
  • titleBar.activeBackground#18283C
  • titleBar.activeForeground#DCDEDF
  • titleBar.inactiveBackground#434A56ab
  • titleBar.inactiveForeground#969696
  • tree.indentGuidesStroke#434A56a1
  • welcomePage.background#161D26
  • welcomePage.progress.background#18283C
  • welcomePage.progress.foreground#004A6A
  • welcomePage.tileBackground#0C141B
  • welcomePage.tileBorder#0076A4
  • welcomePage.tileHoverBackground#0F1922

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#919391
comment storage.type#919391
comment entity.name.type#C4C4C4
comment variable, comment variable.other#C4C4C4
comment keyword, comment entity.name.tag, entity.name.tag.documentation#C4C4C4
comment keyword.codetag.notation#00C5D3
comment.git-status.header.remote#FF9BCB
comment.git-status.header.local#9FC8FF
comment.other.git-status.head#F5F5F5
string.quoted.docstring, string.quoted.docstring punctuation.definition#919391
constant#00C5D3
constant.other#F5F5F5
constant.other.caps#00C5D3
constant.other.placeholder.c#DFCAA8
constant.other.property#00C5D3
constant.other.citation.latex#00C5D3
constant.other.color#00C5D3
constant.other.character-class.escape#00C5D3
constant.other.key#00C5D3
constant.other.symbol#DFCAA8
constant.other.elm#9FC8FF
constant.numeric#00C5D3
constant.language#00C5D3
constant.character.escape#00C5D3
constant.numeric.line-number.find-in-files#b0b0b0
constant.numeric.line-number.match.find-in-files#FFCE57
entity.name.section#FFCE57
entity.name.function, entity.name.function.templated, entity.name.function.member.static#8FE5C2
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#9FC8FF
entity.name.label#00C5D3
entity.name.function.preprocessor#9FC8FF
entity.name#8FE5C2
entity.name.class#9FC8FF
entity.name.constant#00C5D3
entity.name.namespace#F5F5F5
entity.other.inherited-class#9FC8FF
entity.name.function#8FE5C2
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#FF9BCB
entity.name.function.operator#FF9BCB
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator#B7B5BA
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#9FC8FF
entity.other.attribute-name#9FC8FF
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css#8FE5C2
entity.other.attribute-name.id.css#DFCAA8
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#9FC8FF
entity.name.function, support.function#8FE5C2
entity.other.git-status.hex#00C5D3
entity.other.jinja2.delimiter#B7B5BA
entity.name.operator.custom-literal#F5F5F5
entity.name.operator.custom-literal.string#FFCE57
entity.name.operator.custom-literal.number#00C5D3
entity.name.type.rust#9FC8FF
entity.name.lifetime.rust#FF9BCB
invalid#FF9BCB
invalid.deprecated#DFCAA8
keyword#FF9BCB
keyword.control#FF9BCB
keyword.control.directive#FF9BCB
keyword.operator, keyword.operator.member, keyword.operator.new#FF9BCB
keyword.other.substitution#B7B5BA
keyword.other.template.begin, keyword.other.template.end#FF9BCB
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#B7B5BA
keyword.other.parenthesis.elm#B7B5BA
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#9FC8FF
keyword.control.rust, keyword.operator.misc.rust#FF9BCB
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#FF9BCB
markup.boldbold
markup.heading#FFCE57
markup.raw#DFCAA8
markup.underlineunderline
markup.underline.link#8FE5C2
markup.inserted, markup.inserted punctuation.definition.inserted#8FE5C2
markup.deleted, markup.deleted punctuation.definition.deleted#FF9BCB
markup.changed, markup.changed punctuation.definition.changed#FFCE57
markup.ignored, markup.ignored punctuation.definition.ignored#B7B5BA
markup.untracked#B7B5BA
markup.quote
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#B7B5BA
meta.function-call.generic.python, support.function.builtin.python#8FE5C2
meta.function-call.python meta.function-call.arguments.python#F5F5F5
meta.instance.constructor#8FE5C2
meta.attribute-with-value.class string, meta.attribute.class.html string#8FE5C2
meta.attribute-with-value.id string, meta.attribute.id.html string#DFCAA8
source.json meta.mapping.key string#F5F5F5
source.yaml meta.mapping.key string#FF9BCB
meta.object.member#F5F5F5
meta.property-list.css variable.other#DFCAA8
entity.name.constant.preprocessor, meta.preprocessor#00C5D3
meta.diff.git-diff.header#FFCE57
meta.type_params.rust#F5F5F5
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string#B4CFDA
meta.type variable, meta.type variable.other.readwrite#00C5D3
punctuation#B7B5BA
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.parameter, punctuation.accessor, punctuation.terminator#B7B5BA
punctuation.definition.group#F5F5F5
punctuation.definition.comment#919391
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#B4CFDA
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#DFCAA8
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF9BCB
markup.underline.link punctuation#8FE5C2
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array#B7B5BA
source#F5F5F5
source.scss, source.sass#B7B5BA
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#DFCAA8
source.git-show.commit.sha#00C5D3
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file#B7B5BA
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#00C5D3
source.git-show meta.diff.range.unified#DFCAA8
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#B7B5BA
storage#FF9BCB
storage.type#9FC8FF
storage.type.extends#FF9BCB
storage.type.function.arrow#FF9BCB
storage.modifier, storage.type.modifier#FF9BCB
storage.class.restructuredtext.ref#00C5D3
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#FF9BCB
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust#9FC8FF
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust#FF9BCB
storage.modifier.import.java#F5F5F5
string#FFCE57
string.unquoted.label#F5F5F5
string source#F5F5F5
string source punctuation.section.embedded, string punctuation.definition.string source#B7B5BA
string.other.link.title, string.other.link.description#FF9BCB
string.other.link.description.title#9FC8FF
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF9BCB
string.other.ref, string.other.restructuredtext.ref#8FE5C2
string.other.git-status.help.key#C4C4C4
string.other.git-status.remote#FF9BCB
support.constant#9FC8FF
support.constant.handlebars#B7B5BA
support.type.vendor-prefix.css#C4C4C4
support.function#8FE5C2
support.function.delimiter.elm#B7B5BA
support.type, entity.name.type.object.console#9FC8FF
support.variable, support.variable.property#9FC8FF
support.type.property-name#F5F5F5
support.class#9FC8FF
support.constant.core.rust#00C5D3
comment support, comment support.class#919391
text#F5F5F5
text.find-in-files#F5F5F5
variable, variable.other#F5F5F5
variable.parameter, parameters variable.function#DFCAA8
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#C4C4C4
variable.language.arguments#00C5D3
variable.other.class#9FC8FF
variable.other.constant#00C5D3
variable.other.readwrite#F5F5F5
variable.other.member#F5F5F5
variable.other.enummember#00C5D3
variable.other.property, variable.other.property.static, variable.other.event#F5F5F5
variable.function#8FE5C2
variable.other.substitution#DFCAA8
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#00C5D3
source.jinja2 variable.other.jinja2.block#8FE5C2
source.jinja2 variable.other.jinja2#DFCAA8

Shiki preview

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

Loading...

Safira Theme by Yinz - VS Code Theme