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#88c0d0
  • activityBar.background#16191f
  • activityBar.border#3b4252
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#0e1014
  • badge.background#88c0d0
  • badge.foreground#0e1014
  • button.background#628bc0ee
  • button.foreground#0e1014
  • button.hoverBackground#628bc0b0
  • button.secondaryBackground#434c5e
  • button.secondaryForeground#e0e0e0
  • button.secondaryHoverBackground#4c566a
  • charts.blue#57a3f8
  • charts.foreground#cccccc
  • charts.green#86cf86
  • charts.lines#c8cacc80
  • charts.orange#cd861a
  • charts.purple#ad80d7
  • charts.red#ef8773
  • charts.yellow#e0b97f
  • debugConsole.errorForeground#bf616a
  • debugConsole.infoForeground#88c0d0
  • debugConsole.sourceForeground#76819c
  • debugConsole.warningForeground#e8d892
  • debugConsoleInputIcon.foreground#628bc0
  • debugExceptionWidget.background#4c566a
  • debugExceptionWidget.border#0e1014
  • debugToolBar.background#3b4252
  • descriptionForeground#e0e0e0e6
  • diffEditor.insertedTextBackground#628bc033
  • diffEditor.removedTextBackground#bf616a4d
  • dropdown.background#16191f
  • dropdown.border#3b4252
  • dropdown.foreground#e0e0e0
  • editor.background#0e1014
  • editor.findMatchBackground#ac5620
  • editor.findMatchBorder#ba5718
  • editor.findMatchHighlightBackground#a5624380
  • editor.findMatchHighlightBorder#ba5718
  • editor.findRangeHighlightBackground#88c0d033
  • editor.focusedStackFrameHighlightBackground#5e81ac
  • editor.foreground#e0e0e0
  • editor.hoverHighlightBackground#3b425299
  • editor.inactiveSelectionBackground#273545bc
  • editor.inlineValuesBackground#4c566a
  • editor.inlineValuesForeground#e0e0e0
  • editor.lineHighlightBackground#24252680
  • editor.rangeHighlightBackground#434c5e52
  • editor.selectionBackground#273545bc
  • editor.selectionHighlightBackground#273545bc
  • editor.stackFrameHighlightBackground#5e81ac
  • editor.wordHighlightBackground#89726580
  • editor.wordHighlightStrongBackground#3775aeac
  • editorBracketHighlight.foreground1#48b8cc
  • editorBracketHighlight.foreground2#88c0d0
  • editorBracketHighlight.foreground3#628bc0
  • editorBracketHighlight.foreground4#5e81ac
  • editorBracketHighlight.foreground5#48b8cc
  • editorBracketHighlight.foreground6#88c0d0
  • editorBracketHighlight.unexpectedBracket.foreground#bf616a
  • editorBracketMatch.background#0e101400
  • editorBracketMatch.border#88c0d0
  • editorCodeLens.foreground#4c566a
  • editorCursor.foreground#e0e0e0
  • editorError.border#bf616a00
  • editorError.foreground#bf616a
  • editorGroup.border#3b4252
  • editorGroup.dropBackground#3b425299
  • editorGroupHeader.border#3b425200
  • editorGroupHeader.noTabsBackground#0e1014
  • editorGroupHeader.tabsBackground#16191f
  • editorGroupHeader.tabsBorder#3b425200
  • editorGutter.addedBackground#bcd9a0
  • editorGutter.background#0e1014
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#e8d892
  • editorHint.border#e8d89200
  • editorHint.foreground#e8d892
  • editorHoverWidget.background#3b4252
  • editorHoverWidget.border#3b4252
  • editorIndentGuide.activeBackground1#76819c
  • editorIndentGuide.background1#434c5eb3
  • editorInlayHint.background#434c5e
  • editorInlayHint.foreground#e0e0e0
  • editorLineNumber.activeForeground#e0e0e0
  • editorLineNumber.foreground#4c566aaa
  • editorLink.activeForeground#88c0d0
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#bf616ac0
  • editorMarkerNavigationWarning.background#e8d892c0
  • editorOverviewRuler.addedForeground#bcd9a0
  • editorOverviewRuler.border#3b4252
  • editorOverviewRuler.currentContentForeground#3b4252
  • editorOverviewRuler.deletedForeground#bf616a
  • editorOverviewRuler.errorForeground#bf616a
  • editorOverviewRuler.findMatchForeground#88c0d066
  • editorOverviewRuler.incomingContentForeground#3b4252
  • editorOverviewRuler.infoForeground#628bc0
  • editorOverviewRuler.modifiedForeground#e8d892
  • editorOverviewRuler.rangeHighlightForeground#88c0d066
  • editorOverviewRuler.selectionHighlightForeground#88c0d066
  • editorOverviewRuler.warningForeground#e8d892
  • editorOverviewRuler.wordHighlightForeground#88c0d066
  • editorOverviewRuler.wordHighlightStrongForeground#88c0d066
  • editorRuler.foreground#434c5e
  • editorSuggestWidget.background#0e1014
  • editorSuggestWidget.border#3b4252
  • editorSuggestWidget.focusHighlightForeground#88c0d0
  • editorSuggestWidget.foreground#e0e0e0
  • editorSuggestWidget.highlightForeground#88c0d0
  • editorSuggestWidget.selectedBackground#434c5e
  • editorSuggestWidget.selectedForeground#e0e0e0
  • editorWarning.border#e8d89200
  • editorWarning.foreground#e8d892
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#0e1014
  • editorWidget.border#3b4252
  • errorForeground#bf616a
  • extensionButton.prominentBackground#434c5e
  • extensionButton.prominentForeground#e0e0e0
  • extensionButton.prominentHoverBackground#4c566a
  • focusBorder#628bc0
  • foreground#e0e0e0
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.ignoredResourceForeground#e0e0e066
  • gitDecoration.modifiedResourceForeground#e8d892
  • gitDecoration.stageDeletedResourceForeground#bf616a
  • gitDecoration.stageModifiedResourceForeground#e8d892
  • gitDecoration.submoduleResourceForeground#48b8cc
  • gitDecoration.untrackedResourceForeground#bcd9a0
  • input.background#16191f
  • input.border#3b4252
  • input.foreground#e0e0e0
  • input.placeholderForeground#e0e0e099
  • inputOption.activeBackground#5e81ac
  • inputOption.activeBorder#5e81ac
  • inputOption.activeForeground#e0e0e0
  • inputValidation.errorBackground#bf616a
  • inputValidation.errorBorder#bf616a
  • inputValidation.infoBackground#628bc0
  • inputValidation.infoBorder#628bc0
  • inputValidation.warningBackground#da9d8b
  • inputValidation.warningBorder#da9d8b
  • keybindingLabel.background#4c566a
  • keybindingLabel.border#4c566a
  • keybindingLabel.bottomBorder#4c566a
  • keybindingLabel.foreground#e0e0e0
  • list.activeSelectionBackground#5e81accc
  • list.activeSelectionForeground#0e1014
  • list.dropBackground#628bc040
  • list.errorForeground#bf616a
  • list.focusBackground#4c566a
  • list.focusForeground#e0e0e0
  • list.focusHighlightForeground#e0e0e0
  • list.highlightForeground#88c0d0
  • list.hoverBackground#3b4252
  • list.hoverForeground#e0e0e0
  • list.inactiveFocusBackground#434c5ecc
  • list.inactiveSelectionBackground#434c5e
  • list.inactiveSelectionForeground#e0e0e0
  • list.warningForeground#e8d892
  • merge.border#3b425200
  • merge.currentContentBackground#628bc04d
  • merge.currentHeaderBackground#628bc066
  • merge.incomingContentBackground#48b8cc4d
  • merge.incomingHeaderBackground#48b8cc66
  • minimap.background#0e1014
  • minimap.errorHighlight#bf616acc
  • minimap.findMatchHighlight#88c0d0cc
  • minimap.selectionHighlight#88c0d0cc
  • minimap.warningHighlight#e8d892cc
  • minimapGutter.addedBackground#bcd9a0
  • minimapGutter.deletedBackground#bf616a
  • minimapGutter.modifiedBackground#e8d892
  • minimapSlider.activeBackground#434c5eaa
  • minimapSlider.background#434c5e99
  • minimapSlider.hoverBackground#434c5eaa
  • notificationCenter.border#3b425200
  • notificationCenterHeader.background#0e1014
  • notificationCenterHeader.foreground#88c0d0
  • notificationLink.foreground#88c0d0
  • notifications.background#3b4252
  • notifications.border#0e1014
  • notifications.foreground#e0e0e0
  • notificationToast.border#3b425200
  • panel.background#16191f
  • panel.border#3b4252
  • panelTitle.activeBorder#88c0d000
  • panelTitle.activeForeground#88c0d0
  • panelTitle.inactiveForeground#e0e0e0
  • peekView.border#4c566a
  • peekViewEditor.background#16191f
  • peekViewEditor.matchHighlightBackground#88c0d04d
  • peekViewEditorGutter.background#0e1014
  • peekViewResult.background#16191f
  • peekViewResult.fileForeground#88c0d0
  • peekViewResult.lineForeground#e0e0e066
  • peekViewResult.matchHighlightBackground#88c0d0cc
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#e0e0e0
  • peekViewTitle.background#3b4252
  • peekViewTitleDescription.foreground#e0e0e0
  • peekViewTitleLabel.foreground#88c0d0
  • pickerGroup.border#3b4252
  • pickerGroup.foreground#88c0d0
  • progressBar.background#88c0d0
  • quickInputList.focusBackground#628bc0
  • quickInputList.focusForeground#0e1014
  • sash.hoverBorder#88c0d0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5e99
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5e99
  • selection.background#628bc099
  • sideBar.background#16191f
  • sideBar.border#3b4252
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#16191f
  • sideBarSectionHeader.foreground#e0e0e0
  • sideBarTitle.foreground#e0e0e0
  • statusBar.background#16191f
  • statusBar.border#3b4252
  • statusBar.debuggingBackground#88c0d0
  • statusBar.debuggingForeground#0e1014
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#16191f
  • statusBar.noFolderForeground#e0e0e0
  • statusBarItem.activeBackground#4c566a
  • statusBarItem.errorBackground#3b4252
  • statusBarItem.errorForeground#bf616a
  • statusBarItem.hoverBackground#434c5e
  • statusBarItem.prominentBackground#3b4252
  • statusBarItem.prominentHoverBackground#434c5e
  • statusBarItem.warningBackground#e8d892
  • statusBarItem.warningForeground#0e1014
  • tab.activeBackground#3b425253
  • tab.activeBorder#88c0d000
  • tab.activeBorderTop#88c0d0
  • tab.activeForeground#e0e0e0
  • tab.border#3b425200
  • tab.hoverBackground#3b4252cc
  • tab.hoverBorder#88c0d000
  • tab.inactiveBackground#16191f
  • tab.inactiveForeground#e0e0e066
  • tab.lastPinnedBorder#4c566a
  • tab.unfocusedActiveBorder#88c0d000
  • tab.unfocusedActiveBorderTop#88c0d000
  • tab.unfocusedActiveForeground#e0e0e099
  • tab.unfocusedHoverBackground#3b4252b3
  • tab.unfocusedHoverBorder#88c0d000
  • tab.unfocusedInactiveForeground#e0e0e066
  • terminal.ansiBlack#3b4252
  • terminal.background#16191f
  • terminal.border#3b4252
  • terminal.foreground#e0e0e0
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.selectionBackground#3994bc33
  • terminal.tab.activeBorder#88c0d000
  • textBlockQuote.background#3b4252
  • textBlockQuote.border#628bc0
  • textCodeBlock.background#4c566a
  • textLink.activeForeground#88c0d0
  • textLink.foreground#88c0d0
  • textPreformat.foreground#48b8cc
  • textSeparator.foreground#e0e0e0
  • titleBar.activeBackground#16191f
  • titleBar.activeForeground#e0e0e0
  • titleBar.border#3b4252
  • titleBar.inactiveBackground#16191f
  • titleBar.inactiveForeground#e0e0e066
  • tree.indentGuidesStroke#76819c
  • walkThrough.embeddedEditorBackground#0e1014
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
comment#76819c—
constant.character.format#628bc0—
constant.character.escape#e8d892—
constant.language#628bc0—
constant.numeric#bcd9a0—
constant.regexp#e8d892—
entity.name.class, entity.name.type.class, entity.name.type.instance.jsdoc#48b8cc—
entity.name.function#e8d892—
entity.name.tag#628bc0—
entity.other.inherited-class#48b8cc—
invalid.deprecated#e0e0e0—
invalid.illegal#e0e0e0—
keyword#628bc0—
keyword.operator#628bc0—
keyword.other.new#628bc0—
markup.bold—bold
markup.changed#e8d892—
markup.deleted#BF616A—
markup.inserted#bcd9a0—
meta.preprocessor#5E81AC—
punctuation#e0e0e0—
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#e0e0e0—
punctuation.definition.tag#76819c—
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#76819c—
punctuation.section#e0e0e0—
punctuation.section.embedded.begin, punctuation.section.embedded.end#628bc0—
punctuation.terminator#e0e0e0—
punctuation.definition.variable#628bc0—
storage#628bc0—
string#da9d8b—
punctuation.definition.string#da9d8b—
string.regexp#e77272—
support.class#48b8cc—
support.constant#628bc0—
support.function.kernel, support.function.builtin#e8d892—
support.function.construct#628bc0—
support.type#48b8cc—
support.type.exception#48b8cc—
token.debug-token#b48ead—
token.error-token#bf616a—
token.info-token#88c0d0—
token.warn-token#e8d892—
variable.language#628bc0—
variable.object.property#bcd9a0—
variable.other.property#9AD4F4—
variable.other.readwrite.instance#628bc0—
variable.other#e0e0e0—
variable.parameter#e0e0e0italic
punctuation.separator.pointer-access.c#628bc0—
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include, source.c storage.type.built-in.primitive#48b8cc—
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#5E81AC—
source.cs keyword.type, source.cs entity.name.type#48b8cc—
entity.other.attribute-name#e8d892—
source.css constant.other.color.rgb-value#B48EAD—
support.constant.property-value.css#DA9D8B—
support.function.misc.css, support.function.misc.scss, support.function.calc.css, support.function.calc.scss, support.function.gradient.css, support.function.gradient.scss#e8d892—
source.css meta.property-value#b48ead—
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#b48ead—
source.css punctuation.definition.keyword#628bc0—
source.css support.type.property-name#9ad4f4—
source.diff meta.diff.range.context#48b8cc—
source.diff meta.diff.header.from-file#48b8cc—
source.diff punctuation.definition.from-file#48b8cc—
source.diff punctuation.definition.range#48b8cc—
source.diff punctuation.definition.separator#628bc0—
entity.name.type.module.elixir#48b8cc—
variable.other.readwrite.module.elixir#e0e0e0bold
constant.other.symbol.elixir#e0e0e0bold
variable.other.constant.elixir#48b8cc—
source.go constant.other.placeholder.go#e8d892—
source.go entity.name.type.go#48b8cc—
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#628bc0—
source.java constant.other#e0e0e0—
source.java keyword.other.documentation#48b8cc—
source.java keyword.other.documentation.author.javadoc#48b8cc—
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#48b8cc—
source.java keyword.other.documentation.see.javadoc#48b8cc—
source.java meta.method-call meta.method#88C0D0—
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#48b8cc—
source.java meta.tag.template.value.javadoc#88C0D0—
source.java punctuation.definition.keyword.javadoc#48b8cc—
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#76819c—
source.java storage.modifier.import#48b8cc—
source.java storage.modifier.package#48b8cc—
source.java storage.type#48b8cc—
source.java storage.type.annotation#da9d8b—
source.java storage.type.generic#48b8cc—
source.java storage.type.primitive#628bc0—
source meta.var.expr new.expr entity.name.function#48b8cc—
source meta.export.default new.expr entity.name.function#48b8cc—
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#da9d8b—
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#628bc0—
source.js string.quoted.template meta.method-call.with-arguments#e0e0e0—
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#e0e0e0—
source.js support.type.primitive#628bc0—
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round#e0e0e0—
source.js variable.other.readwrite.alias#9ad4f4—
source.js meta.object-literal.key#9ad4f4—
source.js storage.type.class.jsdoc#628bc0—
source.js.jsx entity.other.attribute-name.js.jsx#9AD4F4—
source.tsx entity.other.attribute-name.tsx#9AD4F4—
punctuation.support.type.property-name, support.type.property-name#9ad4f4—
text.html.basic constant.character.entity.html#e8d892—
text.html.basic constant.other.inline-data#da9d8bitalic
text.html.basic meta.tag.sgml.doctype#5E81AC—
text.html.basic punctuation.definition.entity#628bc0—
entity.other.attribute-name.html#9AD4F4—
source.properties entity.name.section.group-title.ini#88C0D0—
source.properties punctuation.separator.key-value.ini#628bc0—
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#48b8cc—
markup.heading#88C0D0—
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#48b8cc—
text.html.markdown markup.italic—italic
text.html.markdown markup.underline.link—underline
text.html.markdown beginning.punctuation.definition.list#628bc0—
text.html.markdown beginning.punctuation.definition.quote#48b8cc—
text.html.markdown markup.quote#76819c—
text.html.markdown constant.character.math.tex#628bc0—
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#5E81AC—
text.html.markdown punctuation.definition.function.math.tex#88C0D0—
text.html.markdown punctuation.math.operator.latex#628bc0—
text.html.markdown punctuation.definition.heading#628bc0—
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#628bc0—
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#88C0D0—
source.perl punctuation.definition.variable#628bc0—
source.php meta.function-call, source.php meta.function-call.object#88C0D0—
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#da9d8b—
source.python meta.member.access meta.function-call meta.function-call.generic#e8d892—
source.ruby string.quoted.double.ruby meta.embedded.line.ruby#e0e0e0italic
source.rust entity.name.type.rust, source.rust entity.name.type.numeric.rust, source.rust entity.name.type.primitive.rust#48b8cc—
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#628bc0—
source.css.scss variable.interpolation#e0e0e0italic
source.swift meta.function-call.swift support.function.any-method.swift#48b8cc—
source.swift meta.function-call.swift meta.function-call.swift support.function.any-method.swift#e8d892—
source.swift variable.parameter.function.swift entity.name.function.swift#e0e0e0—
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#da9d8b—
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#9ad4f4—
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#E8D892—
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#48b8cc—
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#48b8cc—
source.ts support.variable, source.tsx support.variable#e0e0e0—
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round#e0e0e0—
text.xml entity.name.tag.namespace#48b8cc—
text.xml keyword.other.doctype#5E81AC—
text.xml meta.tag.preprocessor entity.name.tag#5E81AC—
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#da9d8bitalic
source.yaml entity.name.tag#48b8cc—
Nord Jujoco Theme by Jujoco - VS Code Theme