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.activeBackground#26251f
  • activityBar.background#1e1e1e
  • activityBar.border#ffe96e18
  • activityBar.foreground#5a9997
  • activityBar.inactiveForeground#fffae966
  • activityBarBadge.background#00504d
  • activityBarBadge.foreground#fffae9
  • badge.background#4d4d4d
  • badge.foreground#fffae9
  • breadcrumb.activeSelectionForeground#fffae9
  • breadcrumb.background#1e1e1e
  • breadcrumb.focusForeground#fffae9
  • breadcrumb.foreground#ccc9c0cc
  • button.background#274342
  • button.foreground#fffae9
  • button.hoverBackground#375f5e
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#fffae9
  • button.secondaryHoverBackground#45494e
  • checkbox.background#3c3c3c
  • checkbox.border#00000000
  • checkbox.foreground#ccc9c0
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#ffe96e18
  • debugToolBar.background#333333
  • debugToolBar.border#ffe96e18
  • diffEditor.border#ffe96e18
  • diffEditor.insertedLineBackground#9bb95515
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedLineBackground#ff000015
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#3c3c3c
  • dropdown.border#00000000
  • dropdown.foreground#ccc9c0
  • editor.background#1e1e1e
  • editor.findMatchBackground#515c6aa0
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#fffae900
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#fffae900
  • editor.foldBackground#264f784d
  • editor.foreground#ccc9c0
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#4a442c30
  • editor.lineHighlightBorder#4f4f4f35
  • editor.rangeHighlightBackground#fffae90b
  • editor.rangeHighlightBorder#fffae900
  • editor.selectionBackground#ffe96e28
  • editor.selectionHighlightBackground#4643336d
  • editor.selectionHighlightBorder#495f7750
  • editor.wordHighlightBackground#5757570b
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketHighlight.unexpectedBracket.foreground#ff0008
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#fffae92e
  • editorCursor.background#000000
  • editorCursor.foreground#aeafad
  • editorError.background#B73A3400
  • editorError.border#fffae900
  • editorError.foreground#f471719b
  • editorGroup.border#ffe96e18
  • editorGroup.emptyBackground#1e1e1e
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorGutter.addedBackground#aeff006b
  • editorGutter.background#1e1e1e
  • editorGutter.commentRangeForeground#fffae94a
  • editorGutter.deletedBackground#ff000d86
  • editorGutter.foldingControlForeground#79dca5aa
  • editorGutter.modifiedBackground#00c8ffa9
  • editorHoverWidget.background#1e1e1e
  • editorHoverWidget.border#ffe96e36
  • editorHoverWidget.foreground#ccc9c0
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff62
  • editorLineNumber.activeForeground#79dca5aa
  • editorLineNumber.foreground#a2905e9d
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.border#ffe96e18
  • editorSuggestWidget.foreground#ccc9c0
  • editorSuggestWidget.highlightForeground#009400
  • editorSuggestWidget.selectedBackground#fdef9f1b
  • editorWarning.background#A9904000
  • editorWarning.border#fffae900
  • editorWarning.foreground#cca7009f
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1e1e1e
  • editorWidget.foreground#ccc9c0
  • editorWidget.resizeBorder#ffe96e18
  • focusBorder#7b7969
  • foreground#ccc9c0
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#ccc9c0
  • input.background#3c3c3c
  • input.border#00000000
  • input.foreground#ccc9c0
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#447472
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#fffae9
  • inputValidation.warningBackground#274342
  • inputValidation.warningBorder#447472
  • list.activeSelectionBackground#fdef9f1b
  • list.activeSelectionForeground#fffae9
  • list.dropBackground#383b3d
  • list.focusBackground#fdef9f1b
  • list.focusForeground#ccc9c0
  • list.highlightForeground#00be00b6
  • list.hoverBackground#2a2d2e
  • list.hoverForeground#ccc9c0
  • list.inactiveSelectionBackground#fffae910
  • list.inactiveSelectionForeground#ccc9c0
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#1e1e1e
  • menu.border#00000085
  • menu.foreground#ccc9c0
  • menu.selectionBackground#fdef9f1b
  • menu.selectionBorder#00000000
  • menu.selectionForeground#fffae9
  • menu.separatorBackground#ccc9c0
  • menubar.selectionBackground#fffae91a
  • menubar.selectionForeground#ccc9c0
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#1e1e1e
  • minimap.errorHighlight#f471719b
  • minimap.findMatchHighlight#515c6a
  • minimap.selectionHighlight#ffea6e1e
  • minimap.warningHighlight#cca7009f
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notebook.cellEditorBackground#262626
  • notificationCenter.border#ffe96e18
  • notificationCenterHeader.background#303031
  • notificationCenterHeader.foreground#ccc9c0
  • notifications.background#1e1e1e
  • notifications.border#ffe96e18
  • notifications.foreground#ccc9c0
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#ffe96e18
  • panel.background#1e1e1e
  • panel.border#ffe96e18
  • panelSection.border#80808059
  • panelTitle.activeBorder#fffae900
  • panelTitle.activeForeground#fffae9
  • panelTitle.inactiveForeground#fffae966
  • peekView.border#cca30074
  • peekViewEditor.background#23221f
  • peekViewEditor.matchHighlightBackground#ff910029
  • peekViewEditor.matchHighlightBorder#ff910053
  • peekViewEditorGutter.background#23221f
  • peekViewResult.background#1e1e1e
  • peekViewResult.fileForeground#fffae9
  • peekViewResult.lineForeground#ccc9c0
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#fdef9f1b
  • peekViewResult.selectionForeground#fffae9
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccc9c0b3
  • peekViewTitleLabel.foreground#fffae9
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#009b95
  • progressBar.background#7b7969
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#fff1c21f
  • scrollbarSlider.background#fff1c21f
  • scrollbarSlider.hoverBackground#fff1c216
  • selection.background#fdef9f1b
  • settings.focusedRowBackground#fffae907
  • settings.headerForeground#ccc9c0
  • sideBar.background#1e1e1e
  • sideBar.border#ffe96e18
  • sideBar.dropBackground#383b3d
  • sideBar.foreground#ccc9c0
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#ffe96e18
  • sideBarSectionHeader.foreground#ccc9c0
  • sideBarTitle.foreground#ccc9c0
  • statusBar.background#1e1e1e
  • statusBar.debuggingBackground#7a3e20
  • statusBar.debuggingForeground#fffae9
  • statusBar.foreground#fffae980
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#fffae9
  • statusBarItem.activeBackground#fffae925
  • statusBarItem.hoverBackground#fffae91f
  • statusBarItem.remoteBackground#00504d
  • statusBarItem.remoteForeground#fffae9
  • tab.activeBackground#fdef9f1b
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#fffae9
  • tab.border#363636
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#fffae980
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#ffe96e18
  • terminal.foreground#ccc9c0
  • terminal.selectionBackground#fffae940
  • terminalCursor.background#fbde3472
  • terminalCursor.foreground#fffae9
  • textLink.foreground#74b5ff
  • titleBar.activeBackground#1e1e1e
  • titleBar.activeForeground#ccc9c0
  • titleBar.border#00000000
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#ccc9c099
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#ccc9c0c9
emphasisitalic
strongbold
header#000080c9
comment#6A9955c9
constant.language#569CD6c9
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8c9
constant.regexp#646695c9
entity.name.tag#569CD6c9
entity.name.tag.css#D7BA7Dc9
entity.other.attribute-name#9CDCFEc9
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#D7BA7Dc9
invalid#F44747c9
markup.underlineunderline
markup.bold#569CD6c9bold
markup.heading#569CD6c9bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8c9
markup.deleted#CE9178c9
markup.changed#569CD6c9
punctuation.definition.quote.begin.markdown#6A9955c9
punctuation.definition.list.begin.markdown#6796E6c9
markup.inline.raw#CE9178c9
punctuation.definition.tag#808080c9
meta.preprocessor, entity.name.function.preprocessor#569CD6c9
meta.preprocessor.string#CE9178c9
meta.preprocessor.numeric#B5CEA8c9
meta.structure.dictionary.key.python#9CDCFEc9
meta.diff.header#569CD6c9
storage#569CD6c9
storage.type#569CD6c9
storage.modifier, keyword.operator.noexcept#569CD6c9
string, meta.embedded.assembly#CE9178c9
string.quoted.docstring#6A9955c9
meta.function-call.generic#DED157c9
string.tag#CE9178c9
string.value#CE9178c9
string.regexp#D16969c9
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569CD6c9
meta.template.expression#ccc9c0c9
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9CDCFEc9
keyword#569CD6c9
keyword.operator#f200ffc9
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#569CD6c9
keyword.other.unit#B5CEA8c9
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6c9
support.function.git-rebase#9CDCFEc9
constant.sha.git-rebase#B5CEA8c9
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#ccc9c0c9
variable.language#569CD6c9
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DCDCAAc9
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#4EC9B0c9
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#00d885c9
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#e664f7c9
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#9CDCFEc9
variable.other.constant, variable.other.enummember#4FC1FFc9
meta.object-literal.key#9CDCFEc9
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178c9
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CE9178c9
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#D16969c9
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAAc9
keyword.operator.quantifier.regexp#D7BA7Dc9
constant.character#569CD6c9
constant.character.escape#D7BA7Dc9
entity.name.label#C8C8C8c9
token.info-token#6796E6c9
token.warn-token#CD9731c9
token.error-token#F44747c9
token.debug-token#B267E6c9

Shiki preview

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

Loading...

Easy Eyes Theme by vvhg1 - VS Code Theme