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.background#1E2A24
  • activityBar.foreground#EAE2D8
  • activityBar.inactiveForeground#8A8578
  • activityBarBadge.background#C84C3A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C84C3A
  • badge.foreground#FFFFFF
  • breadcrumb.focusForeground#3F75B6
  • breadcrumb.foreground#8A8578
  • button.background#C84C3A
  • button.foreground#FFFFFF
  • button.hoverBackground#A53A2E
  • diffEditor.diagonalFill#1B3A34
  • diffEditor.insertedTextBackground#3FA45B22
  • diffEditor.removedTextBackground#C84C3A22
  • editor.background#121A16
  • editor.findMatchHighlightBackground#E0B62C44
  • editor.foreground#EAE2D8
  • editor.inactiveSelectionBackground#3F75B622
  • editor.lineHighlightBackground#1E2A24
  • editor.selectionBackground#3FA45B44
  • editor.selectionHighlightBackground#3FA45B22
  • editor.wordHighlightBackground#3FA45B33
  • editor.wordHighlightStrongBackground#3FA45B44
  • editorBracketHighlight.foreground1#E0B62C
  • editorBracketHighlight.foreground2#3F75B6
  • editorBracketHighlight.foreground3#3FA45B
  • editorBracketHighlight.foreground4#FFDE3E
  • editorBracketHighlight.foreground5#B85C8A
  • editorBracketHighlight.foreground6#6FD488
  • editorBracketMatch.background#3F75B644
  • editorBracketMatch.border#3F75B6
  • editorCursor.foreground#C84C3A
  • editorGroupHeader.tabsBackground#1E2A24
  • editorGroupHeader.tabsBorder#1B3A34
  • editorGutter.addedBackground#3FA45B
  • editorGutter.deletedBackground#C84C3A
  • editorGutter.modifiedBackground#3F75B6
  • editorHoverWidget.background#1E2A24
  • editorHoverWidget.border#1B3A34
  • editorIndentGuide.activeBackground1#FF4A40
  • editorIndentGuide.background1#1B3A34
  • editorLineNumber.activeForeground#C84C3A
  • editorLineNumber.foreground#6A655C
  • editorLink.activeForeground#3F75B6
  • editorWhitespace.foreground#2A4A40
  • editorWidget.background#1E2A24
  • editorWidget.border#1B3A34
  • focusBorder#3F75B688
  • foreground#EAE2D8
  • gitDecoration.addedResourceForeground#3FA45B
  • gitDecoration.deletedResourceForeground#C84C3A
  • gitDecoration.ignoredResourceForeground#6A655C
  • gitDecoration.modifiedResourceForeground#3F75B6
  • gitDecoration.untrackedResourceForeground#E0B62C
  • list.activeSelectionBackground#3FA45B44
  • list.activeSelectionForeground#EAE2D8
  • list.activeSelectionIconForeground#EAE2D8
  • list.errorForeground#C84C3A
  • list.focusBackground#3FA45B44
  • list.hoverBackground#3F75B61A
  • list.inactiveSelectionBackground#3F75B622
  • list.warningForeground#E0B62C
  • merge.border#1B3A34
  • merge.currentHeaderBackground#3FA45B22
  • merge.incomingHeaderBackground#3F75B622
  • minimap.errorHighlight#C84C3A
  • minimap.findMatchHighlight#E0B62C44
  • minimap.selectionHighlight#3FA45B44
  • minimap.warningHighlight#E0B62C
  • notificationCenterHeader.background#1E2A24
  • notifications.background#1E2A24
  • notifications.foreground#EAE2D8
  • panel.background#121A16
  • panel.border#1B3A34
  • peekViewEditor.background#1E2A24
  • peekViewResult.background#121A16
  • selection.background#3FA45B44
  • sideBar.background#1E2A24
  • sideBar.foreground#DAD2C8
  • sideBarSectionHeader.background#1E2A24
  • sideBarTitle.foreground#EAE2D8
  • statusBar.background#1E2A24
  • statusBar.debuggingBackground#E0B62C
  • statusBar.debuggingForeground#121A16
  • statusBar.foreground#EAE2D8
  • statusBar.noFolderBackground#1E2A24
  • tab.activeBackground#121A16
  • tab.activeBorder#C84C3A
  • tab.activeForeground#EAE2D8
  • tab.border#1B3A34
  • tab.inactiveBackground#1E2A24
  • tab.inactiveForeground#9A9588
  • terminal.ansiBlack#1E2A24
  • terminal.ansiBlue#3F75B6
  • terminal.ansiBrightBlack#6A655C
  • terminal.ansiBrightBlue#4A8FD8
  • terminal.ansiBrightCyan#6FD488
  • terminal.ansiBrightGreen#3AB865
  • terminal.ansiBrightMagenta#C878A2
  • terminal.ansiBrightRed#FF6E5A
  • terminal.ansiBrightWhite#F5F0E8
  • terminal.ansiBrightYellow#FFDE3E
  • terminal.ansiCyan#4CBF6E
  • terminal.ansiGreen#3FA45B
  • terminal.ansiMagenta#B85C8A
  • terminal.ansiRed#C84C3A
  • terminal.ansiWhite#DAD2C8
  • terminal.ansiYellow#E0B62C
  • terminal.background#121A16
  • terminal.foreground#EAE2D8
  • terminalCursor.foreground#C84C3A
  • titleBar.activeBackground#1E2A24
  • titleBar.activeForeground#EAE2D8
  • titleBar.inactiveForeground#8A8578

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7568italic
comment.documentation, comment.block.documentation#9A9588
invalid.illegal#FF6E5A
keyword.operator#C8BEB4
keyword, storage#C84C3Abold
storage.type, support.type#3F75B6
constant.language, support.constant, variable.language#E0B62C
variable, support.variable#EAE2D8
entity.name.function, support.function#3F75B6bold
entity.name.type, entity.other.inherited-class, support.class#B85C8A
entity.name.exception#C84C3A
constant.numeric, constant.character, constant#E0B62C
string#4CBF6E
string.regexp#5DCFA3
constant.other.symbol#E0B62C
punctuation#C8BEB4
meta.tag#3F75B6
entity.other.attribute-name#5DCFA3
support.type.property-name#E0B62C
support.constant.property-value#4CBF6E
markup.heading#C84C3Abold
meta.link#3F75B6
markup.inserted#4CBF6E
markup.deleted#C84C3A
markup.changed#3F75B6
Korean Dancheong Dark by weston0713 - VS Code Theme