Skip to main content
Coding Theme

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.activeBorder#222
  • activityBar.background#000000
  • activityBar.border#111
  • activityBar.foreground#bfbfbf
  • activityBar.inactiveForeground#3d3d3d
  • activityBarBadge.background#333333
  • badge.background#1B1B1B
  • badge.foreground#bfbfbf
  • button.background#333333
  • button.hoverBackground#333
  • checkbox.border#000
  • debugIcon.breakpointCurrentStackframeForeground#919191
  • debugIcon.breakpointDisabledForeground#919191
  • debugIcon.breakpointForeground#e00
  • debugIcon.breakpointStackframeForeground#919191
  • debugIcon.breakpointUnverifiedForeground#919191
  • debugIcon.continueForeground#919191
  • debugIcon.disconnectForeground#919191
  • debugIcon.pauseForeground#919191
  • debugIcon.restartForeground#919191
  • debugIcon.startForeground#919191
  • debugIcon.stepBackForeground#919191
  • debugIcon.stepIntoForeground#919191
  • debugIcon.stepOutForeground#919191
  • debugIcon.stepOverForeground#919191
  • debugIcon.stopForeground#919191
  • debugToolBar.background#000000
  • dropdown.background#000000
  • dropdown.foreground#919191
  • editor.background#000000
  • editor.findMatchBackground#B78608
  • editor.findMatchBorder#000000
  • editor.findMatchHighlightBackground#666666
  • editor.findMatchHighlightBorder#000
  • editor.foldBackground#000000
  • editor.foreground#fff
  • editor.hoverHighlightBackground#1B1B1B
  • editor.lineHighlightBackground#1B1B1B
  • editor.selectionBackground#222
  • editor.symbolHighlightBackground#666
  • editorBracketMatch.background#333
  • editorBracketMatch.border#333
  • editorCursor.foreground#D7DAE1
  • editorError.foreground#ff0000
  • editorGroup.border#000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#222
  • editorHoverWidget.statusBarBackground#000000
  • editorIndentGuide.activeBackground#3d3d3d
  • editorIndentGuide.background#000
  • editorInfo.foreground#5c5c5c
  • editorLightBulb.foreground#ff5
  • editorLineNumber.activeForeground#bbb
  • editorLineNumber.foreground#444
  • editorLink.activeForeground#bfbfbf
  • editorOverviewRuler.border#0a0a0a
  • editorRuler.foreground#141414
  • editorSuggestWidget.foreground#fff
  • editorSuggestWidget.highlightForeground#bfbfbf
  • editorSuggestWidget.selectedBackground#1B1B1B
  • editorSuggestWidget.selectedIconForeground#fff
  • editorWarning.foreground#cace00
  • editorWhitespace.foreground#1a1a1a
  • editorWidget.background#000000
  • focusBorder#000000
  • gitDecoration.addedResourceForeground#c0c0c0
  • gitDecoration.conflictingResourceForeground#c0c0c0
  • gitDecoration.deletedResourceForeground#606060
  • gitDecoration.ignoredResourceForeground#666
  • gitDecoration.modifiedResourceForeground#c0c0c0
  • gitDecoration.submoduleResourceForeground#606060
  • gitDecoration.untrackedResourceForeground#c0c0c0
  • icon.foreground#ffffff
  • input.background#000000
  • input.border#000000
  • input.foreground#fff
  • list.activeSelectionBackground#1B1B1B
  • list.activeSelectionForeground#fff
  • list.errorForeground#ff6846
  • list.filterMatchBackground#333
  • list.filterMatchBorder#000000
  • list.focusBackground#000
  • list.highlightForeground#999999
  • list.hoverBackground#141414
  • list.inactiveSelectionBackground#1B1B1B
  • list.inactiveSelectionForeground#fff
  • list.warningForeground#ffbb58
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#ff6846
  • listFilterWidget.outline#3d3d3d
  • menu.background#000000
  • menu.foreground#919191
  • menubar.selectionBackground#000000
  • panel.border#111
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#bfbfbf
  • panelTitle.inactiveForeground#3d3d3d
  • peekView.border#383838
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#000000
  • peekViewEditor.matchHighlightBorder#3d3d3d
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#060606
  • peekViewResult.fileForeground#999999
  • peekViewResult.lineForeground#3d3d3d
  • peekViewResult.matchHighlightBackground#1B1B1B
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#bfbfbf
  • pickerGroup.foreground#9d9d9d
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#000
  • scrollbarSlider.background#ffffff1f
  • scrollbarSlider.hoverBackground#ffffff0f
  • settings.checkboxBorder#000
  • settings.dropdownBorder#000
  • settings.modifiedItemIndicator#383838
  • settings.textInputBorder#000
  • sideBar.background#000000
  • sideBar.border#222
  • sideBar.foreground#fff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000
  • statusBar.background#000000
  • statusBar.border#333
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#000
  • statusBar.debuggingForeground#919191
  • statusBar.foreground#919191
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#000
  • statusBar.noFolderForeground#919191
  • statusBarItem.activeBackground#000000
  • statusBarItem.hoverBackground#000000
  • symbolIcon.arrayForeground#919191
  • symbolIcon.booleanForeground#919191
  • symbolIcon.classForeground#919191
  • symbolIcon.colorForeground#919191
  • symbolIcon.constantForeground#919191
  • symbolIcon.constructorForeground#919191
  • symbolIcon.enumeratorForeground#919191
  • symbolIcon.enumeratorMemberForeground#919191
  • symbolIcon.eventForeground#919191
  • symbolIcon.fieldForeground#919191
  • symbolIcon.fileForeground#919191
  • symbolIcon.folderForeground#919191
  • symbolIcon.functionForeground#919191
  • symbolIcon.interfaceForeground#919191
  • symbolIcon.keyForeground#919191
  • symbolIcon.keywordForeground#919191
  • symbolIcon.methodForeground#919191
  • symbolIcon.moduleForeground#919191
  • symbolIcon.namespaceForeground#919191
  • symbolIcon.nullForeground#919191
  • symbolIcon.numberForeground#919191
  • symbolIcon.objectForeground#919191
  • symbolIcon.operatorForeground#919191
  • symbolIcon.packageForeground#919191
  • symbolIcon.propertyForeground#919191
  • symbolIcon.referenceForeground#919191
  • symbolIcon.snippetForeground#919191
  • symbolIcon.stringForeground#919191
  • symbolIcon.structForeground#919191
  • symbolIcon.textForeground#919191
  • symbolIcon.typeParameterForeground#919191
  • symbolIcon.unitForeground#919191
  • symbolIcon.variableForeground#919191
  • tab.activeBackground#1B1B1B
  • tab.activeForeground#fff
  • tab.border#222
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#555
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#111333
  • terminal.ansiBrightBlack#1a1a1a
  • terminal.ansiBrightBlue#000cb8
  • terminal.ansiBrightCyan#666666
  • terminal.ansiBrightGreen#4d4d4d
  • terminal.ansiBrightMagenta#1d00c0
  • terminal.ansiBrightRed#808080
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#D7DAE1
  • terminal.ansiCyan#666666
  • terminal.ansiGreen#4d4d4d
  • terminal.ansiMagenta#999999
  • terminal.ansiRed#808080
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#D7DAE1
  • terminal.background#000000
  • terminal.foreground#999999
  • terminalCursor.background#000000
  • terminalCursor.foreground#D7DAE1
  • textLink.activeForeground#ffffff
  • textLink.foreground#ffffff
  • textPreformat.foreground#919191
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#919191
  • titleBar.border#000
  • titleBar.inactiveBackground#000000
  • tree.indentGuidesStroke#00000000
  • window.activeBorder#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#CCCCCC
comment, punctuation.definition.comment#666666
punctuation.definition.variable, punctuation.definition.array#ffc0c0
none#D7DAE1
keyword.operator#7df4f8
keyword#7df4f8
variable#fff
entity.name.function, meta.require, support.function.any-method#fff
meta.function.definition.rust, entity.name.type.lifetime.rust#ddditalic
support.class, entity.name.class, entity.name.type.class#7df4f8bold
meta.class#F5F5F5
keyword.other.special-method#B0B0B0
storage#7df4f8
support.function#fff
string, constant.other.symbol, entity.other.inherited-class#ffc0c0
constant.numeric#fff
none#919191
constant#919191
entity.name.tag#FFFFFF
entity.other.attribute-name#fff
punctuation.brackets.angle.rust#7DF4F8
string.quoted.other.lt-gt.include.cpp, string.quoted.double.include.cpp#fff
constant.language.c#fffbold
entity.other.attribute-name.id, punctuation.definition.entity#888
meta.selector#B0B0B0
none#919191
markup.heading punctuation.definition.heading, entity.name.section#606060
keyword.other.unit#919191
markup.bold, punctuation.definition.bold#999999bold
markup.italic, punctuation.definition.italic#B0B0B0italic
markup.raw.inline#8A8A8A
string.other.link, punctuation.definition.string.end.markdown#FFFFFF
meta.link#919191
markup.list#FFFFFF
markup.quote#919191
meta.separator#D7DAE1
markup.inserted#8A8A8A
markup.deleted#FFFFFF
markup.changed#B0B0B0
constant.other.color#808080
string.regexp#808080
constant.character.escape#ffd0d0
punctuation.section.embedded, variable.interpolation#B0B0B0
invalid.illegal#F5F5F5
invalid.broken#000000
invalid.deprecated#F5F5F5
invalid.unimplemented#F5F5F5
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

Electric Ice Theme - Coding Theme