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#2e2e3f
  • activityBar.foreground#cfbfad
  • activityBar.inactiveForeground#8b8bcd
  • activityBarBadge.background#4e4e8f
  • activityBarBadge.foreground#eeeeee
  • badge.background#4e4e8f
  • badge.foreground#eeeeee
  • breadcrumb.activeSelectionForeground#eeeeee
  • breadcrumb.background#2e2e3f
  • breadcrumb.focusForeground#eeeeee
  • breadcrumb.foreground#cfbfad
  • diffEditor.insertedTextBackground#306d3055
  • diffEditor.removedTextBackground#6d303055
  • editor.background#1e1e27
  • editor.findMatchBackground#cd8b60
  • editor.findMatchHighlightBackground#ad7b57
  • editor.foreground#cfbfad
  • editor.guides.activeBackground#4b208f
  • editor.guides.background#3b205d
  • editor.lineHighlightBackground#2e2e37
  • editor.selectionBackground#4e4e8f
  • editor.selectionForeground#eeeeee
  • editorBracketHighlight.foreground1#cfbfad
  • editorBracketHighlight.foreground2#cfbfad
  • editorBracketHighlight.foreground3#cfbfad
  • editorBracketHighlight.foreground4#cfbfad
  • editorBracketHighlight.foreground5#cfbfad
  • editorBracketHighlight.foreground6#cfbfad
  • editorBracketHighlight.unexpectedBracket.foreground#ce4e4e
  • editorBracketMatch.background#4e4e8f
  • editorBracketMatch.border#cfbfad
  • editorColorLens.foreground#c080d0
  • editorCursor.background#404040
  • editorCursor.foreground#8b8bff
  • editorError.background#6e2e2e
  • editorError.foreground#ffffff
  • editorFold.background#4b208f
  • editorFold.foreground#cfcfcd
  • editorGroup.border#3e3e5e
  • editorGroup.dropBackground#4e4e8f80
  • editorGroupHeader.tabsBackground#2e2e3f
  • editorGutter.addedBackground#306d30
  • editorGutter.background#2e2e2e
  • editorGutter.deletedBackground#6d3030
  • editorGutter.modifiedBackground#306b8f
  • editorHoverWidget.background#2e2e3f
  • editorHoverWidget.border#4e4e8f
  • editorHoverWidget.foreground#cfbfad
  • editorInfo.foreground#7e7eae
  • editorLightBulb.foreground#ffcd00
  • editorLightBulbAutoFix.foreground#00ff8b
  • editorLineNumber.activeForeground#cfbfad
  • editorLineNumber.background#2e2e2e
  • editorLineNumber.foreground#8b8bcd
  • editorOverviewRuler.addedForeground#306d30
  • editorOverviewRuler.deletedForeground#6d3030
  • editorOverviewRuler.errorForeground#ce4e4e
  • editorOverviewRuler.infoForeground#7e7eae
  • editorOverviewRuler.modifiedForeground#306b8f
  • editorOverviewRuler.warningForeground#ce8e4e
  • editorRuler.foreground#3b205d
  • editorSuggestWidget.background#2e2e3f
  • editorSuggestWidget.foreground#cfbfad
  • editorSuggestWidget.highlightForeground#eeeeee
  • editorSuggestWidget.selectedBackground#4e4e8f
  • editorWarning.background#ce8e4e
  • editorWarning.foreground#ffffff
  • editorWhitespace.foreground#3b205d
  • editorWidget.background#2e2e3f
  • editorWidget.border#4e4e8f
  • editorWidget.foreground#cfbfad
  • list.activeSelectionBackground#4e4e8f
  • list.activeSelectionForeground#eeeeee
  • list.hoverBackground#4e4e8f
  • list.hoverForeground#eeeeee
  • menu.background#2e2e3f
  • menu.foreground#cfbfad
  • menu.selectionBackground#4e4e8f
  • menu.selectionForeground#eeeeee
  • menubar.selectionBackground#4e4e8f
  • menubar.selectionForeground#eeeeee
  • notifications.background#2e2e3f
  • notifications.foreground#cfbfad
  • panel.background#2e2e3f
  • panel.border#4e4e8f
  • panelTitle.activeForeground#cfbfad
  • panelTitle.inactiveForeground#8b8bcd
  • problemsErrorIcon.foreground#ce4e4e
  • problemsInfoIcon.foreground#7e7eae
  • problemsWarningIcon.foreground#ce8e4e
  • quickInput.background#2e2e3f
  • quickInput.foreground#cfbfad
  • scrollbarSlider.activeBackground#4e4e8fff
  • scrollbarSlider.background#4e4e8f80
  • scrollbarSlider.hoverBackground#4e4e8fbb
  • sideBar.background#2e2e2e
  • sideBar.foreground#cfbfad
  • statusBar.background#3e3e5e
  • statusBar.foreground#b9b9b9
  • statusBar.noFolderBackground#3e3e5e
  • statusBarItem.remoteBackground#3e3e5e
  • tab.activeBackground#3e3e5e
  • tab.activeForeground#b9b9b9
  • tab.border#4e4e8f
  • tab.inactiveBackground#2e2e3f
  • tab.inactiveForeground#8b8bcd
  • terminal.background#1e1e27
  • terminal.foreground#cfbfad
  • titleBar.activeBackground#3e3e5e
  • titleBar.activeForeground#b9b9b9
  • titleBar.inactiveBackground#2e2e3f
  • titleBar.inactiveForeground#8b8bcd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#cd8b00
keyword#808bed
storage.type#808bed
entity.name.function#ff8bff
variable#cfbfad
constant.character#ffcd8b
entity.name.tag#808bed
entity.other.attribute-name#ff8bff
meta.preprocessor#409090
support.constant#ffcd8b
support.function#ff8bff
support.function.builtin#ff8bff
entity.name.function.member#ff8bff
keyword.control.import, constant.language.import-export#409090
keyword.control.flow#808bed
storage.type.function#808bed
keyword.control, keyword.operator.logical, keyword.operator.word, keyword.operator.logical.python#808bed
variable.language.special#cfbfad
constant.language.python#ff8bff
support.variable.magic#cfbfad
punctuation#cfbfad
punctuation.definition.parameters#cfbfad
punctuation.definition.bracket#cfbfad
punctuation.definition.block#cfbfad
meta.brace#cfbfad
punctuation.definition.dictionary#cfbfad
punctuation.definition.array#cfbfad
punctuation.section#cfbfad
variable.parameter#cfbfad
support.function.magic#ff8bff
storage.type#808bed
support.type#ff8bff
support.class#808bed
keyword.operator#cfbfad
constant.numeric#ffcd8b
conflict.begin#ffffff
conflict.ours#ffffff
conflict.theirs#ffffff
conflict.end#ffffff
meta.diff.header#ffffcd
markup.deleted#ffffcd
markup.inserted#ffffcd
markup.changed#ffffcd
markup.quote#409090
comment.documentation#ad7b20
comment.documentation.parameter#fdd090
constant, variable.other#cfbfad
entity.name.type#ff8bff
entity.name.function#ff8bff
markup.underline#df9f2dbold underline
markup.boldbold
variable.parameter#cfbfad
constant.character.escape#c080d0
Inkpot Theme by bissli - VS Code Theme