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.activeBorder#1eb897c6
  • activityBar.activeFocusBorder#6272A4
  • activityBar.background#000000
  • activityBar.border#000000
  • activityBar.foreground#768CAD
  • activityBar.inactiveForeground#2b2f35
  • activityBarBadge.background#3D2EA3
  • activityBarBadge.foreground#c0ccdb
  • badge.background#141619
  • badge.foreground#c5d1e0
  • breadcrumb.background#0f1113
  • button.background#4C3ACCb0
  • button.foreground#c0ccdb
  • button.hoverBackground#3e2ea39f
  • debugToolBar.background#141619
  • diffEditor.insertedLineBackground#22346800
  • diffEditor.insertedTextBackground#00ffae20
  • diffEditor.removedLineBackground#72336a66
  • diffEditor.removedTextBackground#ff00007c
  • diffEditorGutter.insertedLineBackground#00ffaeac
  • diffEditorGutter.removedLineBackground#72336aff
  • diffEditorOverview.insertedForeground#02b40b
  • diffEditorOverview.removedForeground#a10000
  • dropdown.background#0f1113
  • dropdown.border#141619
  • dropdown.foreground#8f98a3
  • editor.background#0c0d0f
  • editor.findMatchBackground#4c00ff49
  • editor.findMatchBorder#ff00ff00
  • editor.findMatchForeground#c300ffe2
  • editor.findMatchHighlightBackground#4c00ff49
  • editor.findMatchHighlightForeground#ffffffd4
  • editor.findRangeHighlightBorder#ff00ff2c
  • editor.foldBackground#00a3731a
  • editor.foreground#8f98a3
  • editor.hoverHighlightBackground#1b1d22cb
  • editor.inactiveSelectionBackground#5d00ff34
  • editor.lineHighlightBackground#97d5ff0d
  • editor.lineHighlightBorder#30323a00
  • editor.rangeHighlightBackground#97d5ff0d
  • editor.selectionBackground#00ffc369
  • editor.selectionHighlightBackground#9000ff58
  • editor.selectionHighlightBorder#9000ff00
  • editor.wordHighlightBackground#97d5ff0d
  • editor.wordHighlightBorder#ff00e100
  • editor.wordHighlightStrongBackground#97d5ff0d
  • editor.wordHighlightStrongBorder#ff00e100
  • editor.wordHighlightTextBackground#97d5ff0d
  • editor.wordHighlightTextBorder#ff00e100
  • editorBracketMatch.background#0c0d0f
  • editorBracketMatch.border#ff00eadb
  • editorCodeLens.foreground#7f8490
  • editorCursor.background#ffffff
  • editorCursor.foreground#ff00eac9
  • editorError.foreground#BF4040
  • editorGroup.border#000000
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#0f1113
  • editorGutter.addedBackground#003D29
  • editorGutter.background#090a0b
  • editorGutter.deletedBackground#751A1A
  • editorGutter.modifiedBackground#7A5A00
  • editorHoverWidget.background#141619
  • editorHoverWidget.border#141619
  • editorLineNumber.foreground#414852
  • editorLink.activeForeground#00a373
  • editorMarkerNavigation.background#141619
  • editorOverviewRuler.addedForeground#003D29
  • editorOverviewRuler.border#7f7f7f4d
  • editorOverviewRuler.deletedForeground#751A1A
  • editorOverviewRuler.errorForeground#BF4040
  • editorOverviewRuler.findMatchForeground#c300ff9a
  • editorOverviewRuler.infoForeground#4C3ACC
  • editorOverviewRuler.modifiedForeground#7A5A00
  • editorOverviewRuler.rangeHighlightForeground#5d00ff34
  • editorOverviewRuler.warningForeground#ED8C5E
  • editorOverviewRuler.wordHighlightStrongForeground#5d00ff34
  • editorRuler.foreground#2b2f35
  • editorSuggestWidget.background#141619
  • editorSuggestWidget.border#141619
  • editorSuggestWidget.foreground#8f98a3
  • editorSuggestWidget.highlightForeground#00a373
  • editorSuggestWidget.selectedBackground#414852
  • editorWhitespace.foreground#212429
  • editorWidget.background#141619
  • editorWidget.border#414852
  • extensionButton.prominentBackground#00a373
  • extensionButton.prominentForeground#c5d1e0
  • extensionButton.prominentHoverBackground#00e5a1
  • focusBorder#00a373
  • foreground#8f98a3
  • gitDecoration.addedResourceForeground#a7da1e
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#861D1D
  • gitDecoration.ignoredResourceForeground#58616e
  • gitDecoration.modifiedResourceForeground#B8B36E
  • gitDecoration.renamedResourceForeground#f7b83d
  • gitDecoration.stageDeletedResourceForeground#E03FA0
  • gitDecoration.stageModifiedResourceForeground#7363E0
  • gitDecoration.submoduleResourceForeground#3E9CEA
  • gitDecoration.untrackedResourceForeground#8DB819
  • input.background#090a0b
  • input.border#363b43
  • input.foreground#8f98a3
  • input.placeholderForeground#3d434c
  • inputOption.activeBorder#1EB897
  • list.activeSelectionBackground#3D2EA3b0
  • list.activeSelectionForeground#c0ccdb
  • list.errorForeground#BF4040
  • list.focusBackground#363b43
  • list.hoverBackground#1b1d21
  • list.inactiveSelectionBackground#141619
  • panel.background#0f1113
  • panel.border#212429
  • panelTitle.activeBorder#00a373
  • panelTitle.inactiveForeground#636d7c
  • peekView.border#00a373
  • peekViewEditor.background#0b0c0e
  • peekViewEditor.matchHighlightBackground#9a6fc455
  • peekViewEditorGutter.background#0f1113
  • peekViewResult.background#1f2227
  • peekViewResult.fileForeground#b3c1d4
  • peekViewResult.lineForeground#a0b2c8
  • peekViewResult.matchHighlightBackground#9a6fc455
  • peekViewResult.selectionBackground#191b1f
  • peekViewResult.selectionForeground#8f98a3
  • peekViewTitle.background#0f1113
  • peekViewTitleDescription.foreground#b6c4d5
  • peekViewTitleLabel.foreground#8f98a3
  • progressBar.background#c5d1e0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#00a373aa
  • scrollbarSlider.background#414852aa
  • scrollbarSlider.hoverBackground#00a37355
  • sideBar.background#090a0b
  • sideBar.border#000000
  • sideBar.foreground#8f98a3
  • sideBarSectionHeader.background#090a0b
  • sideBarSectionHeader.border#090a0b
  • sideBarSectionHeader.foreground#8f98a3
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.foreground#414852
  • statusBar.noFolderBackground#141619
  • tab.activeBackground#0f1113
  • tab.activeBorder#0f1113
  • tab.activeBorderTop#00b27d
  • tab.activeForeground#B3BDCC
  • tab.activeModifiedBorder#000000
  • tab.border#0c0d0f
  • tab.hoverBackground#1b1e22
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#6f7a8a
  • tab.lastPinnedBorder#0c0d0f
  • tab.unfocusedActiveBackground#0c0d0f
  • tab.unfocusedActiveBorder#0f1113
  • tab.unfocusedHoverBackground#1b1e22
  • tab.unfocusedInactiveBackground#000000
  • terminal.ansiBlack#1f2227
  • terminal.ansiBlue#c5d1e0
  • terminal.ansiBrightBlack#414852
  • terminal.ansiBrightBlue#c5d1e0
  • terminal.ansiBrightCyan#cdb7e2
  • terminal.ansiBrightGreen#19ffbb
  • terminal.ansiBrightMagenta#19ffbb
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#c5d1e0
  • terminal.ansiBrightYellow#c5d1e0
  • terminal.ansiCyan#9a6fc4
  • terminal.ansiGreen#00a373
  • terminal.ansiMagenta#00a373
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#d0d9e4
  • terminal.ansiYellow#9a6fc4
  • terminal.background#090a0b
  • terminal.border#414852
  • terminal.foreground#8f98a3
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#414852
  • titleBar.border#000000
  • titleBar.inactiveBackground#141619
  • window.activeBorder#090a0b
  • window.inactiveBorder#141619

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.numeric#ED8C5E
constant.language#ED8C5E
meta#B3BDCC
meta.property-value, support.constant.property-value, constant.other.color.rgb-value, constant.other.color#ED8C5E
constant.character, constant.other#9a6fc4
constant.other.placeholder#5AC4ED
variable, meta.definition.variable.name, entity.name.variable#768CAD
storage#9a6fc4
storage.type#566176italic
entity.name.class#9a6fc4underline
entity.other.inherited-class#9a6fc4
variable.parameter#72777Fitalic
storage.type.function, storage.type.function.ts, storage.type.function.tsx#CC9808
entity.name.function, entity.name.function.go, entity.name.function.tsx#1EB897
entity.name.tag#1EB897
keyword#1EB897
keyword.operator#1EB897
keyword.control#E03FA0italic
constant.character.escape#CC9808
keyword.function#CC9808italic
support.function#9a6fc4
support.constant#CC9808
support.type, support.class, meta.return-type#768CADitalic
support.variable#FF85CB
entity.other.attribute-name#8a92a0
support.class.component#3E9CEA
keyword.var#61748Fitalic
support.type.primitive#768CAD
variable.other.property, variable.object.property#B3BDCC
variable.other.assignment, variable.other.constant, variable.other.enummember#B8B36E
support.other.variable
invalid#BF4040
invalid.deprecated#BF4040
meta.diff, meta.diff.header#76818e
markup.deleted#861D1D
markup.inserted#A6E22E
markup.changed#f7b83d
constant.numeric.line-number.find-in-files-match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#a0a8b1
meta.structure.dictionary.json, meta.structure.dictionary.value.json, string.quoted.double.json#8F98A3
meta.property-value, punctuation.separator.key-value#C0CCDB
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#12A176
meta.use support.class.builtin, meta.other.inherited-class, support.class.builtin#12A176
variable.other#B3BDCC
variable.parameter.function.coffee#aaaaaa
entity.name.section.markdown#9a6fc4
punctuation.definition.heading.markdown#12A176
markup.raw.inline.markdown#cccccc
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#12A176
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#12A176
punctuation.definition.metadata.markdown#12A176
comment.line, comment.block#394252
punctuation.definition.comment#212631
punctuation.terminator.statement#566176
punctuation.separator.comma, punctuation.other.comma#F770FF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, punctuation.definition.binding-pattern.object, punctuation.definition.block#bf64ff
punctuation.other.period, punctuation.other.colon, punctuation.accessor.ts, punctuation.accessor.optional.ts#1EB897
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#12A176
markup.bold.markdown, markup.italic.markdown#12A176
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#664e4d
markup.deleted.git_gutter#861D1D
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
meta.template.expression#c0ccdb
string#7363E0
variable.parameter#3E9CEA
entity.name.type#768CADitalic
storage.type.string.go, storage.type.numeric#7363E0
support.type.property-name.json.comments, string.json.comments meta.structure.dictionary.json.comments, meta.structure.dictionary.value.json.comments, meta.structure.dictionary.json.comments source.json.comments#7363E0
support.type.property-name#7363E0
entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#FF85CB
storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#768CAD
Maus Theme by Moon Maus - VS Code Theme