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#FF6600
  • activityBar.background#111315
  • activityBar.border#0d0f10
  • activityBar.foreground#FF6600
  • activityBar.inactiveForeground#5a616a
  • activityBarBadge.background#FF6600
  • activityBarBadge.foreground#ffffff
  • badge.background#FF6600
  • badge.foreground#ffffff
  • breadcrumb.background#141618
  • breadcrumb.focusForeground#d4d8de
  • breadcrumb.foreground#7a828d
  • button.background#FF6600
  • button.foreground#ffffff
  • button.hoverBackground#E85D00
  • button.secondaryBackground#2e3338
  • button.secondaryForeground#d4d8de
  • contrastBorder#00000000
  • debugIcon.breakpointForeground#E8503A
  • debugIcon.continueForeground#5FA8D3
  • debugIcon.restartForeground#6ABF69
  • debugIcon.startForeground#6ABF69
  • debugIcon.stopForeground#E8503A
  • debugToolBar.background#1a1d21
  • descriptionForeground#7a828d
  • diffEditor.insertedTextBackground#6abf6920
  • diffEditor.removedTextBackground#e8503a20
  • dropdown.background#1a1d21
  • dropdown.border#2e3338
  • dropdown.foreground#d4d8de
  • editor.background#141618
  • editor.findMatchBackground#ff660040
  • editor.findMatchBorder#FF6600
  • editor.findMatchHighlightBackground#ff660025
  • editor.foldBackground#00000025
  • editor.foreground#d4d8de
  • editor.lineHighlightBackground#1c1f23
  • editor.lineHighlightBorder#2a2e33
  • editor.selectionBackground#3d4550
  • editor.selectionHighlightBackground#3d455022
  • editor.wordHighlightBackground#ff660030
  • editor.wordHighlightStrongBackground#ff660040
  • editorBracketHighlight.foreground1#FFB347
  • editorBracketHighlight.foreground2#7EB8DA
  • editorBracketHighlight.foreground3#A8D5A2
  • editorBracketHighlight.foreground4#CDA4DE
  • editorBracketHighlight.foreground5#F2A6A1
  • editorBracketHighlight.foreground6#F0D264
  • editorBracketHighlight.unexpectedBracket.foreground#E8503A
  • editorBracketMatch.background#ff660030
  • editorBracketMatch.border#FF6600
  • editorCodeLens.foreground#7a828d80
  • editorCursor.foreground#FF6600
  • editorError.foreground#E8503A
  • editorGutter.addedBackground#6ABF69
  • editorGutter.background#141618
  • editorGutter.deletedBackground#E8503A
  • editorGutter.modifiedBackground#5FA8D3
  • editorHoverWidget.background#1a1d21
  • editorHoverWidget.border#2a2e33
  • editorIndentGuide.activeBackground1#ff660080
  • editorIndentGuide.background1#2a2e3340
  • editorInfo.foreground#5FA8D3
  • editorInlayHint.background#ff660015
  • editorInlayHint.foreground#d4d8deb0
  • editorLineNumber.activeForeground#FF6600
  • editorLineNumber.foreground#4a4f56
  • editorOverviewRuler.border#1c1f23
  • editorRuler.foreground#2a2e3340
  • editorSuggestWidget.background#1a1d21
  • editorSuggestWidget.border#2a2e33
  • editorSuggestWidget.foreground#c8cdd3
  • editorSuggestWidget.highlightForeground#FF6600
  • editorSuggestWidget.selectedBackground#2e3338
  • editorWarning.foreground#F0D264
  • editorWhitespace.foreground#2a2e3360
  • editorWidget.background#1a1d21
  • editorWidget.border#2a2e33
  • errorForeground#E8503A
  • errorLens.errorForeground#E8503A
  • errorLens.hintForeground#5FA8D3
  • errorLens.infoForeground#5FA8D3
  • errorLens.warningForeground#F0D264
  • focusBorder#ff660060
  • foreground#c8cdd3
  • gitDecoration.addedResourceForeground#6ABF69
  • gitDecoration.conflictingResourceForeground#F0D264
  • gitDecoration.deletedResourceForeground#E8503A
  • gitDecoration.ignoredResourceForeground#4a4f56
  • gitDecoration.modifiedResourceForeground#5FA8D3
  • gitDecoration.untrackedResourceForeground#6ABF69
  • icon.foreground#c8cdd3a0
  • input.background#1a1d21
  • input.border#2e3338
  • input.foreground#d4d8de
  • input.placeholderForeground#5a616a
  • inputOption.activeBackground#ff660040
  • inputOption.activeBorder#FF6600
  • inputOption.activeForeground#d4d8de
  • list.activeSelectionBackground#ff660025
  • list.activeSelectionForeground#d4d8de
  • list.errorForeground#E8503A
  • list.highlightForeground#FF6600
  • list.hoverBackground#1c1f2380
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#1c1f2360
  • list.warningForeground#F0D264
  • menu.background#1a1d21
  • menu.border#0d0f10
  • menu.foreground#c8cdd3
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#2e3338
  • minimap.background#141618
  • minimap.errorHighlight#E8503A
  • minimap.selectionHighlight#ff660060
  • minimap.warningHighlight#F0D264
  • notificationCenterHeader.background#1a1d21
  • notifications.background#1a1d21
  • notifications.border#2e3338
  • notifications.foreground#c8cdd3
  • notificationsErrorIcon.foreground#E8503A
  • notificationsInfoIcon.foreground#5FA8D3
  • notificationsWarningIcon.foreground#F0D264
  • panel.background#111315
  • panel.border#0d0f10
  • panelTitle.activeBorder#FF6600
  • panelTitle.activeForeground#d4d8de
  • panelTitle.inactiveForeground#5a616a
  • peekView.border#FF6600
  • peekViewEditor.background#1a1d21
  • peekViewResult.background#111315
  • peekViewTitle.background#1a1d21
  • progressBar.background#FF6600
  • quickInput.background#1a1d21
  • quickInput.foreground#d4d8de
  • quickInputList.focusBackground#ff660030
  • quickInputList.focusForeground#ffffff
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#ff660060
  • scrollbarSlider.background#d4d8de20
  • scrollbarSlider.hoverBackground#d4d8de30
  • selection.background#3d4550
  • settings.headerForeground#d4d8de
  • settings.modifiedItemIndicator#FF6600
  • sideBar.background#111315
  • sideBar.border#0d0f10
  • sideBar.foreground#b0b8c2
  • sideBarSectionHeader.background#111315
  • sideBarSectionHeader.border#0d0f10
  • sideBarSectionHeader.foreground#d4d8de
  • sideBarTitle.foreground#7a828d
  • statusBar.background#141618
  • statusBar.border#0d0f10
  • statusBar.debuggingBackground#ff660040
  • statusBar.debuggingForeground#d4d8de
  • statusBar.foreground#7a828d
  • statusBar.noFolderBackground#111315
  • statusBarItem.activeBackground#ff660030
  • statusBarItem.errorBackground#E8503A
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#2e3338
  • statusBarItem.remoteBackground#FF6600
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#F0D264
  • statusBarItem.warningForeground#1a1d21
  • tab.activeBackground#141618
  • tab.activeBorderTop#FF6600
  • tab.activeForeground#d4d8de
  • tab.border#0d0f10
  • tab.hoverBackground#141618
  • tab.inactiveBackground#111315
  • tab.inactiveForeground#5a616a
  • tab.lastPinnedBorder#0d0f10
  • terminal.ansiBlack#141618
  • terminal.ansiBlue#5FA8D3
  • terminal.ansiBrightBlack#5a616a
  • terminal.ansiBrightBlue#7EB8DA
  • terminal.ansiBrightCyan#6ECFCF
  • terminal.ansiBrightGreen#8AD88A
  • terminal.ansiBrightMagenta#CDA4DE
  • terminal.ansiBrightRed#F27A6B
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#F5DE74
  • terminal.ansiCyan#4DB8B8
  • terminal.ansiGreen#6ABF69
  • terminal.ansiMagenta#B87FCC
  • terminal.ansiRed#E8503A
  • terminal.ansiWhite#d4d8de
  • terminal.ansiYellow#F0D264
  • terminal.background#111315
  • terminal.foreground#d4d8de
  • titleBar.activeBackground#0d0f10
  • titleBar.activeForeground#d4d8de80
  • titleBar.border#0d0f10
  • titleBar.inactiveBackground#0d0f10
  • titleBar.inactiveForeground#5a616a
  • walkThrough.embeddedEditorBackground#141618
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a6370italic
string#A8D5A2—
constant.numeric#FFB347—
constant.language, constant.other#F27A6B—
keyword.operator#c8cdd3—
storage.type, storage.modifier#4DB8B8—
support.function#7EB8DA—
comment.line, comment.line.semicolon.krl, comment.line.ampersand.krl, comment.line.bug.krl, comment.line.fixme.krl, comment.line.hack.krl, comment.line.note.krl, comment.line.todo.krl#5a6370italic
comment.line.fold.krl, meta.fold.krl, keyword.control.fold.krl#6e7a4ditalic
keyword.control.krl#FF6600bold
keyword.function.movement.krl#5FA8D3bold
storage.type.krl, storage.type.interrupt.krl, storage.type.trigger.krl#4DB8B8italic
variable.language.system.krl#E8503A
constant.numeric.krl#FFB347bold
constant.numeric.hex.krl, constant.numeric.binary.krl#ff00ffbold
keyword.control.directive.krl#646695—
string.quoted.double.krl#A8D5A2—
variable.function.krl#7EB8DA—
constant.language.enum.krl, variable.other.enummember.krl#F27A6B—
support.function.builtin.krl#5FA8D3—
keyword.operator.logical.krl, keyword.operator.bitwise.krl#569cd6bold
keyword.operator.krl, keyword.operator.comparison.krl, keyword.operator.arithmetic.krl, keyword.operator.symbolic.krl#6A9955bold
KUKA KRL Extension by LiskinLabs - VS Code Theme