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.activeBackground#7c48e2
  • activityBar.activeBorder#c2fe0b
  • activityBar.background#93ada0
  • activityBar.foreground#c2fe0b
  • activityBar.inactiveForeground#545860
  • activityBarBadge.background#c2fe0b
  • activityBarBadge.foreground#282a2c
  • badge.background#c2fe0b
  • badge.foreground#282a2c
  • breadcrumb.background#4034c0
  • breadcrumb.foreground#c0c8cf
  • button.background#c2fe0b
  • button.foreground#282a2c
  • checkbox.background#282a2c
  • debugIcon.breakpointForeground#ff5c00
  • dropdown.background#282a2c
  • editor.background#353a3c
  • editor.findMatchBackground#00f080
  • editor.findMatchBorder#c2fe0b
  • editor.findMatchForeground#353a3cf0
  • editor.findMatchHighlightBackground#00f08080
  • editor.findMatchHighlightForeground#353a3cf0
  • editor.inactiveSelectionBackground#4034c0fe
  • editor.lineHighlightBackground#282a2c
  • editor.rangeHighlightBackground#282a2c80
  • editor.selectionBackground#4034c0
  • editor.selectionHighlightBackground#4034c0fe
  • editor.wordHighlightBackground#282a2c80
  • editorBracketMatch.border#ff69b4
  • editorCursor.background#282a2c
  • editorCursor.foreground#c2fe0b
  • editorError.foreground#c4071c
  • editorGroup.border#687880
  • editorGroup.dropBackground#282a2c80
  • editorGroupHeader.tabsBackground#545860
  • editorGutter.background#545860
  • editorHint.foreground#c2fe0b
  • editorInfo.foreground#4d9dd6
  • editorInlayHint.background#282a2c
  • editorInlayHint.foreground#545860
  • editorLineNumber.activeForeground#c2fe0b
  • editorLineNumber.foreground#282a2c
  • editorRuler.foreground#545860
  • editorStickyScroll.border#687880
  • editorStickyScrollGutter.background#c2fe0b
  • editorWarning.foreground#ff5c00
  • errorForeground#c4071c
  • focusBorder#c2fe0b
  • gitDecoration.addedResourceForeground#00f080
  • gitDecoration.deletedResourceForeground#c4071c
  • gitDecoration.ignoredResourceForeground#687880
  • gitDecoration.modifiedResourceForeground#c2fe0b
  • gitDecoration.untrackedResourceForeground#4d9dd6
  • input.background#282a2c
  • list.activeSelectionBackground#282a2c
  • list.dropBackground#282a2c80
  • list.hoverBackground#404346
  • list.inactiveSelectionBackground#282a2c
  • menu.background#282a2c
  • menu.foreground#f1f1f1
  • menu.selectionBackground#c2fe0b
  • menu.selectionForeground#282a2c
  • menubar.selectionBackground#c2fe0b
  • menubar.selectionForeground#282a2c
  • notifications.background#282a2c
  • notifications.foreground#f1f1f1
  • notificationToast.border#687880
  • panel.background#404346
  • panel.border#687880
  • panelSection.dropBackground#282a2c80
  • peekView.border#ff69b4
  • peekViewEditor.background#282a2c
  • peekViewEditor.matchHighlightBackground#282a2c
  • peekViewEditor.matchHighlightBorder#ff69b4
  • peekViewEditorGutter.background#404346
  • peekViewResult.background#282a2c
  • peekViewTitle.background#282a2c
  • peekViewTitleDescription.foreground#93ada0
  • sash.hoverBorder#00f080
  • scrollbar.shadow#282a2c
  • scrollbarSlider.activeBackground#00f080
  • scrollbarSlider.background#93ada0
  • scrollbarSlider.hoverBackground#00f080
  • selection.background#c2fe0b40
  • settings.focusedRowBackground#282a2c
  • settings.modifiedItemIndicator#c2fe0b
  • sideBar.background#353a3c
  • sideBar.border#687880
  • sideBar.dropBackground#282a2c80
  • sideBarSectionHeader.background#282a2c
  • sideBarSectionHeader.border#687880
  • sideBarSectionHeader.foreground#93ada0
  • statusBar.background#c0c8cf
  • statusBar.debuggingBackground#ff69b4
  • statusBar.foreground#545860
  • statusBar.noFolderBackground#c0c8cf
  • statusBarItem.prominentBackground#c2fe0b
  • tab.activeBackground#4034c0
  • tab.activeBorderTop#c2fe0b
  • tab.activeForeground#c2fe0b
  • tab.border#545860
  • tab.inactiveBackground#545860
  • tab.inactiveForeground#c0c8cf
  • terminal.background#282a2c
  • terminal.foreground#f1f1f1
  • textLink.activeForeground#c2fe0b
  • textLink.foreground#c2fe0b
  • titleBar.activeBackground#4893c2
  • titleBar.activeForeground#282a2c
  • titleBar.inactiveBackground#4893c2
  • titleBar.inactiveForeground#282a2c
  • toolbar.activeBackground#282a2c
  • toolbar.hoverBackground#7c48e2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#839496
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#839496
comment#586E75italic
string#2AA198
string.regexp#DC322F
constant.numeric#D33682
variable.language, variable.other#268BD2
keyword#859900
storage#93A1A1bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#CB4B16
entity.name.function#268BD2
punctuation.definition.variable#859900
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F
constant.language, meta.preprocessor#B58900
support.function.construct, keyword.other.new#CB4B16
constant.character, constant.other#CB4B16
entity.other.inherited-class, punctuation.separator.namespace.ruby#6C71C4
variable.parameter
entity.name.tag#268BD2
punctuation.definition.tag#586E75
entity.other.attribute-name#93A1A1
support.function#268BD2
punctuation.separator.continuation#DC322F
support.constant, support.variable
support.type, support.class#859900
support.type.exception#CB4B16
support.other.variable
invalid#DC322F
meta.diff, meta.diff.header#268BD2italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#859900
markup.quote#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#2AA198
markup.heading#268BD2bold
markup.heading.setext#268BD2
42KM color theme by Andornaut - VS Code Theme