Skip to main content
Coding Theme

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#888888
  • activityBar.foreground#eeeeee
  • activityBarBadge.background#a7da1e
  • activityBarBadge.foreground#ffffff
  • badge.background#a7da1e
  • badge.foreground#ffffff
  • button.background#a7da1e
  • button.foreground#ffffff
  • debugTokenExpression.boolean#0167dd
  • debugTokenExpression.error#c90000
  • debugTokenExpression.name#00bd10
  • debugTokenExpression.number#0167dd
  • debugTokenExpression.string#0167dd
  • debugTokenExpression.value#000000
  • debugToolBar.background#bbddbb
  • debugView.exceptionLabelBackground#555555
  • debugView.exceptionLabelForeground#ff00FF
  • debugView.stateLabelBackground#ffaa00
  • debugView.stateLabelForeground#ff0000
  • debugView.valueChangedHighlight#66d600
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#444444
  • editor.background#fafafa
  • editor.findMatchBackground#b8ea00
  • editor.findMatchHighlightBackground#EAFFb0
  • editor.foreground#000000
  • editor.hoverHighlightBackground#a7da1e55
  • editor.lineHighlightBackground#eaeaea
  • editor.selectionBackground#d0eeff
  • editor.wordHighlightBackground#3c91e622
  • editor.wordHighlightStrongBackground#b8ea00
  • editorBracketHighlight.foreground1#000000
  • editorBracketHighlight.foreground2#0050dd
  • editorBracketHighlight.foreground3#8400ff
  • editorBracketHighlight.foreground4#00976f
  • editorBracketHighlight.foreground5#ca00c6
  • editorBracketHighlight.foreground6#00d5ed
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#ffd030
  • editorBracketMatch.border#ffa020
  • editorCursor.background#ffffff
  • editorCursor.foreground#ff0000
  • editorError.foreground#de0000
  • editorGroupHeader.tabsBackground#888888
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#eaeaea
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#0167dd
  • editorHint.border#90e000
  • editorHint.foreground#90e000
  • editorIndentGuide.background#dddddd
  • editorInfo.border#0090e0
  • editorInfo.foreground#0090e0
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#aaaaaa
  • editorLink.activeForeground#fa824c
  • editorMarkerNavigationWarning.background#ffa000
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#ffbf6955
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#009030
  • editorOverviewRuler.warningForeground#ffa020
  • editorRuler.foreground#ffffff
  • editorSuggestWidget.foreground#444444
  • editorSuggestWidget.highlightForeground#fa824c
  • editorWarning.foreground#ffaa00
  • editorWhitespace.foreground#cccccc
  • editorWidget.background#ffffff
  • editorWidget.border#ffffff
  • extensionButton.prominentBackground#fa824c
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#fba57e
  • focusBorder#fa824c
  • foreground#000000
  • gitDecoration.addedResourceForeground#3d8e00
  • gitDecoration.conflictingResourceForeground#ff8000
  • gitDecoration.deletedResourceForeground#ff4f00
  • gitDecoration.ignoredResourceForeground#b0b0b0
  • gitDecoration.modifiedResourceForeground#006ed5
  • gitDecoration.renamedResourceForeground#5f5fd7
  • gitDecoration.stageDeletedResourceForeground#808080
  • gitDecoration.stageModifiedResourceForeground#3d8e00
  • gitDecoration.submoduleResourceForeground#3d956a
  • gitDecoration.untrackedResourceForeground#6600c5
  • input.background#f2f2f2
  • input.border#888888
  • input.foreground#444444
  • input.placeholderForeground#888888
  • inputOption.activeBorder#ffbf69
  • list.activeSelectionBackground#005f00
  • list.activeSelectionForeground#afd700
  • list.errorForeground#ff6000
  • list.focusBackground#a7da1e
  • list.hoverBackground#ddeea0
  • list.inactiveSelectionBackground#dddddd
  • list.warningForeground#009dff
  • panel.background#f7f7f7
  • panel.border#aaaaaa
  • panelTitle.activeBorder#a7da1e
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#888888
  • peekView.border#555555
  • peekViewEditor.background#e8e8e8
  • peekViewEditor.matchHighlightBackground#ffbf6955
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#515151
  • peekViewResult.lineForeground#848484
  • peekViewResult.matchHighlightBackground#ffbf6955
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#515151
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#3c3c3c
  • peekViewTitleLabel.foreground#444444
  • problemsErrorIcon.foreground#ff0000
  • problemsInfoIcon.foreground#0090e0
  • problemsWarningIcon.foreground#ffaa00
  • progressBar.background#3c91e6
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#fa824caa
  • scrollbarSlider.background#ffffffaa
  • scrollbarSlider.hoverBackground#fa824c55
  • searchEditor.findMatchBackground#FF00FF
  • settings.modifiedItemIndicator#FF00FF
  • sideBar.background#dddddd
  • sideBar.foreground#444444
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.foreground#444444
  • statusBar.background#66b600
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#ffbf69
  • tab.activeForeground#000000
  • tab.border#b0b0b0
  • tab.inactiveBackground#d0d0d0
  • tab.inactiveForeground#505050
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3c91e6
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#3c91e6
  • terminal.ansiBrightCyan#00dd00
  • terminal.ansiBrightGreen#00aaaa
  • terminal.ansiBrightMagenta#cc00cc
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#ee8800
  • terminal.ansiCyan#66d600
  • terminal.ansiGreen#00dd00
  • terminal.ansiMagenta#dd00dd
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#888888
  • terminal.ansiYellow#eeee44
  • terminal.background#f2f2f2
  • terminal.foreground#000000
  • titleBar.activeBackground#888888
  • titleBar.activeForeground#444444
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#70a0d0
string, string.quoted.docstring#0060a0
constant.numeric#0070c0
constant.numeric.floating-point, constant.numeric.float#00a0a0
constant.language, meta.use.rust#3c91e6
constant.character#66b600bold
constant.other, string.quoted.rune#00a0a0bold
constant.character.format.placeholder, constant.other.placeholder#a200ff
variablebold
variable.language, variable.parameter.function#202090
support.type#ae01e2
support.type.property-name.json#000000
keyword, keyword.other.fn.rust, keyword.other.crate.rust#66b600
keyword, keyword.other.rust#8400ff
keyword.operator#000000
keyword.operator.borrow#ae01e2
keyword.control.flow, keyword.control#1177ddbold
keyword.control.import, keyword.import, keyword.package#d80050bold
storage#66b600
storage.type#ae01e2
storage.type.function, keyword.function, storage.type.class#66b600bold
storage.type.ts, storage.type.rust#229000
entity.name.class#ffbf69underline
entity.other#008b00
entity.name.function#3c91e6bold
meta.function-call#000000
meta.function-call.arguments#000000
support.function#000000
variable.parameter#229000
entity.name.tag#1177dd
entity.other.attribute-name#000bold
support.constant#0070c0bold
support.class#ae01e2bold
support.other.variable#66b600
invalid#e45e59
invalid.illegal#ff0000
invalid.deprecated#cf433e
string.quoted.double.json#1daf00
meta.diff, meta.diff.header#aaaaaa
markup.deleted#ff5f00
markup.inserted#A6E22E
markup.changed#5f5fd7
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#848484
meta.property-value, support.constant.property-value, constant.other.color#0070c0
meta.property-name support.type.property-name
meta.property-value punctuation.separator.key-value#444444
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#fa824c
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#fa824c
variable.other#000000
variable.other.assignment, variable.other.declaration#000000
variable.parameter.function.coffee#9fd356
entity.name.section.markdown, punctuation.definition.heading.markdown#66b600bold
markup.raw.inline.markdown#9fd356
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#fa824c
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#fa824c
punctuation.definition.metadata.markdown#fa824c
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#fa824c
markup.bold.markdown, markup.italic.markdown#fa824c
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#664e4d
markup.deleted.git_gutter#ff4f00
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#5f5fd7
meta.template.expression#cc2200
keyword.issue#ff6600
keyword.todo#ffaa00
keyword.done#a7da1e

Shiki preview

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

Loading...

vscode-kalisi - Coding Theme