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.activeBackground#2a2c2e
  • activityBar.activeBorder#3377cc
  • activityBar.activeFocusBorder#3377cc
  • activityBar.background#3a3c3e
  • activityBar.border#2a2c2e
  • activityBar.dropBorder#335577
  • activityBar.foreground#ddeeff
  • activityBar.inactiveForeground#8899aa
  • activityBarBadge.background#225599
  • activityBarBadge.foreground#aaccee
  • badge.background#225599
  • badge.foreground#aaccee
  • breadcrumb.activeSelectionForeground#337799
  • breadcrumb.background#333744
  • breadcrumb.focusForeground#aaabbb
  • breadcrumb.foreground#777888
  • breadcrumbPicker.background#2a2c3e
  • button.background#1155aa
  • button.foreground#ddeeff
  • button.hoverBackground#3377cc
  • button.secondaryBackground#445566
  • button.secondaryForeground#ccceee
  • button.secondaryHoverBackground#667788
  • charts.blue#1177aa
  • charts.foreground#aaabbb
  • charts.green#11aa33
  • charts.lines#66778899
  • charts.orange#aa5511
  • charts.purple#7733aa
  • charts.red#aa1133
  • charts.yellow#aa9911
  • checkbox.background#3a3c3e
  • checkbox.border#555666
  • checkbox.foreground#aaabbb
  • debugConsole.errorForeground#993355
  • debugConsole.infoForeground#3377aa
  • debugConsole.sourceForeground#aaabbb
  • debugConsole.warningForeground#aa7733
  • debugExceptionWidget.background#553344
  • debugExceptionWidget.border#772244
  • debugIcon.breakpointDisabledForeground#aa7799
  • debugIcon.breakpointForeground#aa2266
  • debugIcon.breakpointStackframeForeground#557733
  • debugToolBar.background#777555
  • debugView.exceptionLabelBackground#553344
  • debugView.stateLabelBackground#334455
  • descriptionForeground#777888
  • diffEditor.diagonalFill#222333
  • diffEditor.insertedTextBackground#44557733
  • diffEditor.removedTextBackground#77554433
  • dropdown.background#3a3c3e
  • dropdown.border#555666
  • dropdown.foreground#aaabbb
  • dropdown.listBackground#222333
  • editor.background#2a2c2e
  • editor.findMatchBackground#22443377
  • editor.findMatchBorder#ccaa33
  • editor.findMatchHighlightBackground#224433cc
  • editor.findRangeHighlightBackground#223344cc
  • editor.foldBackground#00112233
  • editor.foreground#aabbcc
  • editor.hoverHighlightBackground#22445577
  • editor.inactiveSelectionBackground#22337799
  • editor.lineHighlightBackground#31333777
  • editor.lineHighlightBorder#0000
  • editor.linkedEditingBackground#2a232e
  • editor.rangeHighlightBackground#22334466
  • editor.selectionBackground#225599
  • editor.selectionForeground#aaccee
  • editor.selectionHighlightBackground#33366699
  • editor.wordHighlightBackground#ccaa3311
  • editorBracketHighlight.foreground1#ffaa3377
  • editorBracketHighlight.foreground2#ccff3377
  • editorBracketHighlight.foreground3#33ff7777
  • editorBracketHighlight.foreground4#33aaff77
  • editorBracketHighlight.foreground5#77ccff77
  • editorBracketHighlight.foreground6#ccaaff77
  • editorBracketHighlight.unexpectedBracket.foreground#aa3355
  • editorBracketMatch.background#22443399
  • editorBracketMatch.border#0000
  • editorCodeLens.foreground#778899
  • editorCursor.foreground#ccaa77
  • editorError.foreground#aa3355
  • editorGroup.border#212327
  • editorGroup.dropBackground#33557744
  • editorGroup.emptyBackground#2a2c33
  • editorGroupHeader.border#212327
  • editorGroupHeader.noTabsBackground#213337
  • editorGroupHeader.tabsBackground#313337
  • editorGroupHeader.tabsBorder#212327
  • editorGutter.addedBackground#227755
  • editorGutter.background#333744
  • editorGutter.commentRangeForeground#554466
  • editorGutter.deletedBackground#776622
  • editorGutter.foldingControlForeground#446677
  • editorGutter.modifiedBackground#335577
  • editorHint.foreground#55aa33
  • editorHoverWidget.background#2a2c37
  • editorHoverWidget.border#222333
  • editorHoverWidget.statusBarBackground#2a3337
  • editorInfo.foreground#3355cc
  • editorLightBulb.foreground#aa9933
  • editorLightBulbAutoFix.foreground#3377cc
  • editorLineNumber.activeForeground#aa8822
  • editorLineNumber.foreground#667788
  • editorLink.activeForeground#3399ff
  • editorMarkerNavigation.background#212327
  • editorMarkerNavigationError.background#553344
  • editorMarkerNavigationInfo.background#334455
  • editorMarkerNavigationWarning.background#554433
  • editorOverviewRuler.addedForeground#337755
  • editorOverviewRuler.background#2a2c2e
  • editorOverviewRuler.border#222333
  • editorOverviewRuler.bracketMatchForeground#33554466
  • editorOverviewRuler.commonContentForeground#66677766
  • editorOverviewRuler.currentContentForeground#33ccaa77
  • editorOverviewRuler.deletedForeground#775555
  • editorOverviewRuler.errorForeground#aa3355
  • editorOverviewRuler.findMatchForeground#22557799
  • editorOverviewRuler.incomingContentForeground#33aacc77
  • editorOverviewRuler.infoForeground#3355aa
  • editorOverviewRuler.modifiedForeground#446688
  • editorOverviewRuler.rangeHighlightForeground#22335577
  • editorOverviewRuler.selectionHighlightForeground#44466688
  • editorOverviewRuler.warningForeground#aa5533
  • editorPane.background#2a2c33
  • editorRuler.foreground#414347
  • editorSuggestWidget.background#2a2c37
  • editorSuggestWidget.border#222333
  • editorUnnecessaryCode.opacity#7777
  • editorWarning.foreground#aa5533
  • editorWhitespace.foreground#33554466
  • editorWidget.background#313337
  • editorWidget.border#212327
  • editorWidget.foreground#aabbcc
  • editorWidget.resizeBorder#336677
  • errorForeground#aa3355
  • extensionBadge.remoteBackground#116677
  • extensionBadge.remoteForeground#ccceee
  • extensionButton.prominentBackground#007733
  • extensionButton.prominentForeground#ccceee
  • extensionButton.prominentHoverBackground#229955
  • extensionIcon.preReleaseForeground#33aa7799
  • extensionIcon.starForeground#ccaa3399
  • extensionIcon.verifiedForeground#3377cc99
  • focusBorder#33779900
  • foreground#aaabbb
  • gitDecoration.addedResourceForeground#33cc77
  • gitDecoration.conflictingResourceForeground#ffaa33
  • gitDecoration.deletedResourceForeground#cc2244
  • gitDecoration.ignoredResourceForeground#666777
  • gitDecoration.modifiedResourceForeground#3399cc
  • gitDecoration.stageDeletedResourceForeground#aa1122
  • gitDecoration.stageModifiedResourceForeground#3377cc
  • gitDecoration.submoduleResourceForeground#7755aa
  • gitDecoration.untrackedResourceForeground#aa3377
  • icon.foreground#666777
  • input.background#3a3c3e
  • input.border#555666
  • input.foreground#aaabbb
  • input.placeholderForeground#777888
  • inputOption.activeBackground#313337
  • inputOption.activeBorder#0000
  • inputOption.activeForeground#33aacc
  • inputValidation.errorBackground#553344
  • inputValidation.errorBorder#772244
  • inputValidation.infoBackground#334455
  • inputValidation.infoBorder#224477
  • inputValidation.warningBackground#554433
  • inputValidation.warningBorder#77aa4422
  • list.activeSelectionBackground#224477
  • list.activeSelectionForeground#ddeeff
  • list.deemphasizedForeground#556677
  • list.dropBackground#33557744
  • list.errorForeground#aa3355
  • list.filterMatchBackground#666222
  • list.filterMatchBorder#ccaa3300
  • list.focusBackground#114455
  • list.focusForeground#ddeeff
  • list.focusOutline#117788
  • list.highlightForeground#ccaa33
  • list.hoverBackground#223344
  • list.hoverForeground#aaabbb
  • list.inactiveSelectionBackground#223355
  • list.inactiveSelectionForeground#aabbcc
  • list.invalidItemForeground#cc1122
  • list.warningForeground#aa6622
  • listFilterWidget.background#313337
  • listFilterWidget.noMatchesOutline#aa3355
  • listFilterWidget.outline#555666
  • menu.background#333444
  • menu.border#222333
  • menu.foreground#bbbccc
  • menu.selectionBackground#225599
  • menu.selectionBorder#22559900
  • menu.selectionForeground#aabbcc
  • menu.separatorBackground#555666
  • menubar.selectionBackground#225599
  • menubar.selectionBorder#22559900
  • menubar.selectionForeground#aabbcc
  • merge.commonContentBackground#66677733
  • merge.commonHeaderBackground#66677766
  • merge.currentContentBackground#33ccaa33
  • merge.currentHeaderBackground#33ccaa77
  • merge.incomingContentBackground#33aacc33
  • merge.incomingHeaderBackground#33aacc77
  • mergeEditor.change.background#332731
  • mergeEditor.change.word.background#37312a
  • mergeEditor.conflict.handled.minimapOverViewRuler#396c
  • mergeEditor.conflict.handledFocused.border#1a37
  • mergeEditor.conflict.handledUnfocused.border#0717
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#c13c
  • mergeEditor.conflict.unhandledFocused.border#a137
  • mergeEditor.conflict.unhandledUnfocused.border#7017
  • minimap.background#232629
  • minimap.errorHighlight#aa3355
  • minimap.findMatchHighlight#22554477
  • minimap.selectionHighlight#22557799
  • minimap.warningHighlight#aa5533
  • minimapGutter.addedBackground#227744
  • minimapGutter.deletedBackground#772244
  • minimapGutter.modifiedBackground#224477
  • minimapSlider.activeBackground#55223344
  • minimapSlider.background#11133355
  • minimapSlider.hoverBackground#33355566
  • notebook.cellBorderColor#222333
  • notebook.cellEditorBackground#11112222
  • notebook.cellHoverBackground#22334499
  • notebook.cellInsertionIndicator#33aacc77
  • notebook.cellToolbarSeparator#222333
  • notebook.focusedCellBackground#313337
  • notebook.focusedCellBorder#337799cc
  • notebook.focusedEditorBorder#222333
  • notebook.outputContainerBackgroundColor#212c3c
  • notebook.outputContainerBorderColor#222333
  • notebookStatusErrorIcon.foreground#993366
  • notebookStatusRunningIcon.foreground#336699
  • notebookStatusSuccessIcon.foreground#339966
  • notificationCenter.border#213337
  • notificationCenterHeader.background#224455
  • notificationCenterHeader.foreground#ddeeff
  • notificationLink.foreground#3377cc
  • notifications.background#223344
  • notifications.border#212327
  • notifications.foreground#aabbcc
  • notificationsErrorIcon.foreground#cc2233
  • notificationsInfoIcon.foreground#3377cc
  • notificationsWarningIcon.foreground#cc7733
  • notificationToast.border#212337
  • panel.background#3a3c3e
  • panel.border#555666
  • panel.dropBorder#335577
  • panelSection.border#2a2c2e
  • panelSection.dropBackground#33557744
  • panelSectionHeader.background#313337
  • panelTitle.activeBorder#3377cc
  • panelTitle.activeForeground#bbbccc
  • panelTitle.inactiveForeground#666777
  • peekView.border#222333
  • peekViewEditor.background#272e3e
  • peekViewEditor.matchHighlightBorder#ccaa11
  • peekViewEditorGutter.background#313743
  • peekViewResult.background#212731
  • peekViewResult.fileForeground#aabbcc
  • peekViewResult.lineForeground#99aabb
  • peekViewResult.selectionBackground#225599
  • peekViewResult.selectionForeground#ddeeff
  • peekViewTitle.background#273351
  • peekViewTitleDescription.foreground#aaccee
  • peekViewTitleLabel.foreground#dddeee
  • pickerGroup.border#55566666
  • pickerGroup.foreground#4488cc
  • problemsErrorIcon.foreground#cc2233
  • problemsInfoIcon.foreground#3377cc
  • problemsWarningIcon.foreground#cc7733
  • progressBar.background#1177aa
  • quickInput.background#2a2c37
  • quickInput.foreground#aaabbb
  • quickInputList.focusBackground#114455
  • quickInputTitle.background#33557799
  • sash.hoverBorder#33557799
  • scrollbar.shadow#11223344
  • scrollbarSlider.activeBackground#6699cc66
  • scrollbarSlider.background#6699cc33
  • scrollbarSlider.hoverBackground#6699cc66
  • searchEditor.findMatchBackground#224433
  • searchEditor.findMatchBorder#ccaa33
  • searchEditor.textInputBorder#555666
  • selection.background#225599
  • settings.focusedRowBackground#313337
  • settings.focusedRowBorder#313337
  • settings.headerBorder#444455
  • settings.headerForeground#cccddd
  • settings.modifiedItemIndicator#775533
  • sideBar.background#313337
  • sideBar.border#212327
  • sideBar.dropBackground#33557744
  • sideBar.foreground#aaabbb
  • sideBarSectionHeader.background#3a3c3e
  • sideBarSectionHeader.border#4a4c4e
  • sideBarSectionHeader.foreground#aaabbb
  • sideBarTitle.foreground#dddeee
  • statusBar.background#334466
  • statusBar.border#cccccc33
  • statusBar.debuggingBackground#555444
  • statusBar.foreground#aabbcc
  • statusBar.noFolderBackground#444555
  • statusBarItem.activeBackground#442233
  • statusBarItem.compactHoverBackground#22335599
  • statusBarItem.errorBackground#773355
  • statusBarItem.hoverBackground#22334477
  • statusBarItem.prominentBackground#553377
  • statusBarItem.remoteBackground#336644
  • symbolIcon.arrayForeground#557788
  • symbolIcon.constantForeground#5599cc
  • symbolIcon.fieldForeground#8855dd
  • symbolIcon.keywordForeground#aa7733
  • symbolIcon.objectForeground#557788
  • symbolIcon.stringForeground#669933
  • tab.activeBackground#313337
  • tab.activeBorder#3377cc
  • tab.activeForeground#ddeeff
  • tab.activeModifiedBorder#aa3377
  • tab.border#2a2c2e
  • tab.hoverBackground#223344
  • tab.inactiveBackground#313337
  • tab.inactiveForeground#aaabbb
  • tab.lastPinnedBorder#2a2c3e
  • tab.unfocusedActiveBorder#3377cc
  • terminal.ansiBlack#223344
  • terminal.ansiBlue#2244aa
  • terminal.ansiBrightBlack#445566
  • terminal.ansiBrightBlue#3377ff
  • terminal.ansiBrightCyan#33ccff
  • terminal.ansiBrightGreen#77cc33
  • terminal.ansiBrightMagenta#aa77ff
  • terminal.ansiBrightRed#ff2233
  • terminal.ansiBrightWhite#aabbcc
  • terminal.ansiBrightYellow#ffcc33
  • terminal.ansiCyan#2288aa
  • terminal.ansiGreen#339911
  • terminal.ansiMagenta#6644aa
  • terminal.ansiRed#991122
  • terminal.ansiWhite#778899
  • terminal.ansiYellow#aa8822
  • terminal.background#0a1c2e
  • terminal.border#2a2c2e
  • terminal.dropBackground#33557744
  • terminal.foreground#aaabbb
  • terminal.inactiveSelectionBackground#22557799
  • terminal.initialHintForeground#9955cc
  • terminal.selectionBackground#225599
  • terminal.selectionForeground#aaccee
  • terminal.tab.activeBorder#3377cc
  • terminalCommandDecoration.defaultBackground#553377
  • terminalCommandDecoration.errorBackground#773355
  • terminalCommandDecoration.successBackground#337755
  • terminalCursor.background#ccaa77
  • terminalCursor.foreground#ccaa77
  • textBlockQuote.background#212737
  • textBlockQuote.border#223355
  • textCodeBlock.background#2a2c2e
  • textLink.activeForeground#3399ff
  • textLink.foreground#3399ff
  • textPreformat.foreground#668899
  • textSeparator.foreground#666777
  • titleBar.activeBackground#333999
  • titleBar.activeForeground#aabbcc
  • titleBar.border#222333aa
  • titleBar.inactiveBackground#555777
  • titleBar.inactiveForeground#aaabbb
  • tree.indentGuidesStroke#444555
  • walkThrough.embeddedEditorBackground#11112222
  • welcomePage.background#2a2c2e
  • welcomePage.progress.background#445566
  • welcomePage.progress.foreground#3366aa
  • widget.shadow#11223344

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#556677italic
comment.block.documentation#339966italic
constant#5599cc
constant.character, meta.shebang, keyword.control.import.reg#2288aa
constant.character.escape#008866
constant.language, constant.other.option, constant.other.option.dash#aa6633
constant.other#3377aa
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent, constant.other.color.rgb-value.hex, punctuation.definition.constant, meta.diff.range#33aacc
entity.name#4477cc
entity.name.function.preprocessor#33bb99
entity.name.class, support.class#0088cc
entity.name.function, entity.name.command#ccaa11
entity.name.method, entity.name.function.member#ccaa33
entity.name.tag#cc7733
entity.name.section#2288cc
entity.other.attribute-name, support.function.regname, string.key.json5#9955dd
invalid#aa6633underline
invalid.illegal#aa1133underline
invalid.illegal.annotation#3377aa
invalid.deprecated#aa4466
keyword, keyword.control, storage.type.js, storage.type.function#cc7733
keyword.blade, keyword.control.blade, meta.directive.blade#cc2255
keyword.control.directive, punctuation.definition.directive, storage.type.format, support.type#3399aa
keyword.file.content.ignore, string.directory.content.ignore#668844
keyword.operator#778899
keyword.operator.list, keyword.operator.pipe, keyword.operator.expression#cc7733
keyword.operator.logical#996633
keyword.operator.redirect#446677
keyword.other#779955
keyword.other.dotenv#779955
markup.deleted.negate.content.ignore#446677
meta.preprocessor#3399aa
source, text#aabbcc
source.diff#667788
markup.bold, strongbold
markup.deleted.negate.content.ignore#446677
markup.italic, emphasisitalic
markup.underlineunderline
markup.fenced_code.block, markup.inline.raw, markup.raw#778899
string, markup.quote#77aa33
punctuation.definition.inserted, punctuation.definition.to-file, meta.diff.header.to-file#88cc66
punctuation.definition.deleted, punctuation.definition.from-file, meta.diff.header.from-file#cc6688
punctuation.definition.deleted, punctuation.definition.inserted, punctuation.definition.from-file, punctuation.definition.to-filebold
meta.diff.header.from-file, meta.diff.header.to-fileunderline
markup.inserted#66cc88
markup.changed#6688cc
markup.deleted#aa6688
punctuation.definition.variable#666DDD
punctuation.definition.heading, markup.heading#9955cc
punctuation.definition.string#77aa33
punctuation.section, punctuation.definition.range#336699
punctuation.separator, punctuation.definition.evaluation#aa8822
punctuation.accessor.js#aa6622
keyword.operator.assignment, punctuation.separator.key-value, punctuation.separator.dictionary.key-value, punctuation.terminator#557788
meta.separator, punctuation.definition, punctuation.definition source, punctuation.definition.list, meta.tag.xml#556677
meta.brace, support.function.construct, support.function.construct source#557788
variable#666ddd
variable.other.bracket#4488cc
variable.language, support.function, support.function.misc#aa6655
property, support.variable.property#9955dd
variable.parameter#8855cc
storage.modifier#aa6633
storage.type, keyword.other.type#00aacc
support.constant, variable.other.constant#3377cc
support.type.property-name#9955dd
meta.diff.header, header#9977ddunderline
meta.link, meta.link.reference#3377ccunderline
string.other.link.title#3399ff
constant.other.symbol.negate.ignore#aa7733
constant.other.symbol.asterisk.ignore#77aa22
constant.separator.directory.ignore, constant.restriced.file.ignore, constant.character.directory.ignore#448866
entity.gitconfig, entity.name.tag.gitconfig#2288cc
support.gitconfig#557788
storage.gitconfig, variable.other.constant.object.gitconfig#8855dd
Galizur Theme by Raziel Anarki - VS Code Theme