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#60e8f0
  • activityBar.activeFocusBorder#60e8f0
  • activityBar.background#05070c
  • activityBar.border#05070c
  • activityBar.foreground#b3b1ad
  • activityBarBadge.background#f07178
  • activityBarBadge.foreground#0a0e14
  • badge.background#1ea8fc
  • badge.foreground#0a0e14
  • button.background#1ea8fc
  • button.foreground#0a0e14
  • button.hoverBackground#1a93df
  • debugExceptionWidget.background#0d1016
  • debugExceptionWidget.border#01060e
  • debugToolBar.background#0d1016
  • diffEditor.insertedTextBackground#c2d94c26
  • diffEditor.removedTextBackground#f2966826
  • dropdown.background#0d1016
  • dropdown.border#191e25
  • dropdown.foreground#3d424d
  • editor.background#0d1016
  • editor.findMatchBackground#1ea8fc0d
  • editor.findMatchBorder#1ea8fc
  • editor.findMatchHighlightBackground#1ea8fc0d
  • editor.findMatchHighlightBorder#1ea8fc59
  • editor.findRangeHighlightBackground#121922
  • editor.findRangeHighlightBorder#0a0e1400
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#121922
  • editor.lineHighlightBackground#23262c
  • editor.rangeHighlightBackground#01060e
  • editor.selectionBackground#3d424d
  • editor.selectionHighlightBackground#121922
  • editor.selectionHighlightBorder#1d2936
  • editor.wordHighlightBackground#121922
  • editor.wordHighlightStrongBackground#1ea8fc33
  • editorBracketMatch.background#3d424d4d
  • editorBracketMatch.border#3d424d99
  • editorCodeLens.foreground#626a73
  • editorCursor.foreground#ff4057
  • editorError.foreground#ff3333
  • editorGroup.border#01060e
  • editorGroup.emptyBackground#0d1016
  • editorGroupHeader.noTabsBackground#0a0e14
  • editorGroupHeader.tabsBackground#0a0e14
  • editorGroupHeader.tabsBorder#0d1016
  • editorGutter.addedBackground#91b36299
  • editorGutter.deletedBackground#d96c7599
  • editorGutter.modifiedBackground#6994bf99
  • editorHoverWidget.background#0d1016
  • editorHoverWidget.border#000000
  • editorHoverWidget.foreground#cbccc6
  • editorIndentGuide.activeBackground#3d424db3
  • editorIndentGuide.background#3d424d66
  • editorLineNumber.activeForeground#60e8f0
  • editorLineNumber.foreground#3d424d
  • editorLink.activeForeground#1ea8fc
  • editorMarkerNavigation.background#0d1016
  • editorOverviewRuler.addedForeground#91b36299
  • editorOverviewRuler.border#0d1016
  • editorOverviewRuler.deletedForeground#d96c7599
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#6994bf99
  • editorOverviewRuler.warningForeground#1ea8fc
  • editorRuler.foreground#3d424d66
  • editorSuggestWidget.background#0d1016
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#cbccc6
  • editorSuggestWidget.highlightForeground#1ea8fc
  • editorSuggestWidget.selectedBackground#01060e
  • editorWarning.foreground#1ea8fc
  • editorWhitespace.foreground#3d424d99
  • editorWidget.background#0d1016
  • editorWidget.foreground#cbccc6
  • extensionButton.prominentBackground#1ea8fc
  • extensionButton.prominentForeground#0a0e14
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#292d36
  • foreground#3d424d
  • gitDecoration.conflictingResourceForeground#d96c75
  • gitDecoration.deletedResourceForeground#d96c75b3
  • gitDecoration.ignoredResourceForeground#242831
  • gitDecoration.modifiedResourceForeground#a6cc70
  • gitDecoration.submoduleResourceForeground#ffee99b3
  • gitDecoration.untrackedResourceForeground#d96c75
  • input.background#0d1016
  • input.border#191e25
  • input.foreground#b3b1ad
  • input.placeholderForeground#2e323c
  • inputOption.activeBorder#1ea8fc
  • inputValidation.errorBackground#0a0e14
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#0a0e14
  • inputValidation.infoBorder#95e6cb
  • inputValidation.warningBackground#0a0e14
  • inputValidation.warningBorder#ffb454
  • list.activeSelectionBackground#191e2a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#01060e
  • list.focusForeground#ffcc66
  • list.highlightForeground#1ea8fc
  • list.hoverBackground#3d424d66
  • list.hoverForeground#65e2e9
  • list.inactiveSelectionBackground#3d424d66
  • list.inactiveSelectionForeground#60e8f0
  • list.invalidItemForeground#2e323c
  • panel.background#060b0f
  • panel.border#00010a
  • panelTitle.activeBorder#1ea8fc
  • panelTitle.activeForeground#b3b1ad
  • panelTitle.inactiveForeground#3d424d
  • peekView.border#01060e
  • peekViewEditor.background#0d1016
  • peekViewEditor.matchHighlightBackground#1ea8fc33
  • peekViewResult.background#0d1016
  • peekViewResult.fileForeground#3d424d
  • peekViewResult.matchHighlightBackground#1ea8fc33
  • peekViewTitle.background#0d1016
  • peekViewTitleDescription.foreground#3d424d
  • peekViewTitleLabel.foreground#3d424d
  • pickerGroup.border#01060e
  • pickerGroup.foreground#242831
  • progressBar.background#1ea8fc
  • quickInput.list.focusBackground#01060e
  • scrollbar.shadow#01060e
  • scrollbarSlider.activeBackground#3d424db3
  • scrollbarSlider.background#3d424d66
  • scrollbarSlider.hoverBackground#3d424d99
  • selection.background#4e545f
  • settings.headerForeground#b3b1ad
  • settings.modifiedItemIndicator#6994bf
  • sideBar.background#080c11
  • sideBar.border#080c11
  • sideBar.foreground#b8b0b0
  • sideBarSectionHeader.background#080c11
  • sideBarSectionHeader.foreground#3d424d
  • sideBarTitle.foreground#707a8c
  • statusBar.background#0a0e14
  • statusBar.border#01060e
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#0a0e14
  • statusBar.foreground#3d424d
  • statusBar.noFolderBackground#0d1016
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#01060e
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#1ea8fc
  • tab.activeBackground#0d1016
  • tab.activeBorderTop#1ea8fc
  • tab.activeForeground#b3b1ad
  • tab.border#0a0e14
  • tab.hoverBackground#3d424d66
  • tab.inactiveBackground#0a0e14
  • tab.inactiveForeground#3d424d
  • tab.unfocusedActiveBorderTop#3d424d
  • tab.unfocusedActiveForeground#3d424d
  • tab.unfocusedInactiveForeground#3d424d
  • terminal.ansiBlack#01060e
  • terminal.ansiBlue#95e6cb
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#95e6cb
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#c2d94c
  • terminal.ansiBrightMagenta#ffee99
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#91b362
  • terminal.ansiMagenta#fae994
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#060b0f
  • terminal.foreground#b3b1ad
  • terminalCursor.foreground#ff4057
  • textBlockQuote.background#0d1016
  • textLink.activeForeground#1ea8fc
  • textLink.foreground#1ea8fc
  • textPreformat.foreground#b3b1ad
  • titleBar.activeBackground#0a0e14
  • titleBar.activeForeground#b3b1ad
  • titleBar.border#01060e
  • titleBar.inactiveBackground#0a0e14
  • titleBar.inactiveForeground#3d424d
  • walkThrough.embeddedEditorBackground#0d1016
  • widget.shadow#00010a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5c6773italic
string, constant.other.symbol#60e8f0—
string.regexp, constant.character, constant.other#ffffff—
constant.numeric#60e8f0—
constant.numeric.css#f07178—
constant.language#d4bfff—
constant.language.boolean#d4bfff—
variable#dadbc0—
variable.other.constant#d4bfff—
variable.member#f28779—
variable.language#00f0ffitalic
variable.language.this#00f0ffitalic
support.variable#ffa759—
storage#1ea8fc—
storage.type#1ea8fcitalic
storage.modifier.async#f07178italic
storage.type.class#1ea8fcitalic
keyword#1ea8fc—
keyword.control.flow#1ea8fc—
keyword.control.loop#1ea8fc—
keyword.control.conditional#1ea8fc—
keyword.control.trycatch#1ea8fc—
keyword.operator#c286ff—
keyword.operator.new#1ea8fc—
punctuation.separator, punctuation.terminator#cbccc6b3—
punctuation.section#dadbc0—
punctuation.accessor#ec0000—
source.java storage.type, source.haskell storage.type, source.c storage.type#95e6cb—
entity.other.inherited-class#FF8F40—
storage.type.function#ffa759—
storage.type.function.arrow#f07178
source.java storage.type.primitive#95e6cb—
variable.parameter, meta.parameter#d4bfffitalic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffffff—
support.function, support.macro#ffffff—
support.function.console#ffd580—
entity.name.import, entity.name.package#bae67e—
entity.name#c286ff—
entity.name.function#ffffff—
entity.name.class#ff8f40—
entity.name.tag, meta.tag.sgml#fc4085—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#b3b1ad—
text.html.derivative#dadbc0—
entity.other.attribute-name#1ea8fcitalic
support.constant#f28779italic
support.type, support.class, source.go storage.type#ff0779—
support.class.promise#ffa759—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#dadbc0—
invalid#ff3333—
meta.diff, meta.diff.header#c594c5—
source.ruby variable.other.readwrite#ffd580—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#95e6cb—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5c6773—
support.type.property-name#bae67e
entity.other.attribute-name.class.css#bae67e
entity.other.attribute-name.id.css#ffcc66
support.type.property-name.css#dadbc0
constant.numeric.line-number.find-in-files - match#5c6773—
constant.numeric.line-number.match#ffa759—
entity.name.filename.find-in-files#bae67e—
message.error#ff3333—
markup.heading, markup.heading entity.name#bae67ebold
markup.underline.link, string.other.link#95e6cb—
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italic—bold italic
markup.raw——
markup.raw.inline——
meta.separator#5c6773bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffd580—
markup.inserted#a6cc70—
markup.changed#77a8d9—
markup.deleted#f27983—
markup.strike#ffe6b3—
markup.table#5ccfe6—
text.html.markdown markup.inline.raw#f29e74—
text.html.markdown meta.dummy.line-break#5c6773—
punctuation.definition.markdown#5c6773—
string.json support.type.property-name.json#c286ff—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1ea8fc—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffffff—
constant.language.json#8815fc—
constant.numeric.json#c286ff—
string.unquoted, constant.other.object.key#1ea8fc—
meta.brace.curly, meta.brace.round, meta.brace.square#b3b1ad—
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ffa759—
meta.object-literal.key#ffb454—
entity.name.type#ffffff—
entity.name.type.class#ffffff—
support.type.primitive#ffffff—
text.gitignore#ffd76ditalic
Electric Ice Theme by jenny_death - VS Code Theme