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#c94c00
  • activityBar.background#f5f1e8
  • activityBar.border#e8e0d5
  • activityBar.foreground#8a7d68
  • activityBarBadge.background#c94c00
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#c94c00
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#5c4a3a
  • breadcrumb.foreground#8a7d68
  • breadcrumbSeparator.foreground#c4b59d
  • button.background#c94c00
  • button.foreground#ffffff
  • button.hoverBackground#b03d00
  • button.secondaryBackground#e8e0d5
  • button.secondaryForeground#5c4a3a
  • button.secondaryHoverBackground#d9d0c1
  • button.separator#c4b59d
  • checkbox.background#f5f1e8
  • checkbox.border#d9d0c1
  • checkbox.foreground#5c4a3a
  • checkbox.selectBackground#c94c00
  • checkbox.selectBorder#c94c00
  • checkbox.selectForeground#ffffff
  • contextmenu.background#ffffff
  • contextmenu.foreground#5c4a3a
  • contextmenuItem.selectionBackground#ffd699
  • contextmenuItem.selectionForeground#5c4a3a
  • currentFindMatchBackground#c94c00
  • currentFindMatchForeground#5c4a3a
  • debugToolBar.background#ffffff
  • debugToolBar.border#e8e0d5
  • diffEditor.border#e8e0d5
  • diffEditor.insertedLineBackground#8b5cf622
  • diffEditor.insertedTextBackground#8b5cf633
  • diffEditor.removedLineBackground#e8686822
  • diffEditor.removedTextBackground#e8686833
  • dropdown.background#ffffff
  • dropdown.border#d9d0c1
  • dropdown.foreground#5c4a3a
  • dropdown.listBackground#ffffff
  • editor.background#faf8f3
  • editor.callStackForeground#5c4a3a
  • editor.debugExceptionWidget.background#ffffff
  • editor.debugExceptionWidget.border#e8e0d5
  • editor.evaluatedExpressionForeground#5c4a3a
  • editor.foreground#5c4a3a
  • editor.inactiveSelectionBackground#e8e0d5
  • editor.inlineValuesBackground#e8e0d5
  • editor.inlineValuesForeground#8a7d68
  • editor.lineHighlightBackground#f5f1e8
  • editor.lineHighlightBorder#e8e0d5
  • editor.markdownSupport.codeLabelForeground#c94c00
  • editor.markdownSupport.inlineCodeForeground#c2410c
  • editor.selectionBackground#ffd699
  • editor.selectionHighlightBackground#f5f1e8
  • editor.snippetFinalTabStopHighlightBackground#16a34a33
  • editor.snippetFinalTabStopHighlightBorder#16a34a88
  • editor.snippetTabstopHighlightBackground#c94c0033
  • editor.snippetTabstopHighlightBorder#c94c0088
  • editor.stackFrameHighlightBackground#ffd699
  • editor.wordHighlightBackground#ffd699
  • editor.wordHighlightStrongBackground#c9b896
  • editorBracketHighlight.foreground1#c94c00
  • editorBracketHighlight.foreground2#7c3aed
  • editorBracketHighlight.foreground3#c2410c
  • editorBracketHighlight.foreground4#d32f2f
  • editorBracketHighlight.foreground5#16a34a
  • editorBracketHighlight.foreground6#2563eb
  • editorBracketMatch.background#ffd699
  • editorBracketMatch.border#c94c00
  • editorCodeLens.foreground#a89c84
  • editorCursor.foreground#c94c00
  • editorError.foreground#d32f2f
  • editorGhostText.foreground#c4b59d
  • editorGutter.addedBackground#7c3aed66
  • editorGutter.background#faf8f3
  • editorGutter.deletedBackground#d32f2f66
  • editorGutter.foldingCollapsedBackground#c4b59d44
  • editorGutter.foldingControlBackground#c4b59d
  • editorGutter.foldingExpandedBackground#c4b59d88
  • editorGutter.modifiedBackground#c94c0066
  • editorHint.foreground#16a34a
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#e8e0d5
  • editorHoverWidget.foreground#5c4a3a
  • editorHoverWidget.statusBarBackground#f5f1e8
  • editorIndentGuide.activeBackground#d9d0c1
  • editorIndentGuide.activeBackground1#d9d0c1
  • editorIndentGuide.activeBackground2#d9d0c1
  • editorIndentGuide.activeBackground3#d9d0c1
  • editorIndentGuide.activeBackground4#d9d0c1
  • editorIndentGuide.activeBackground5#d9d0c1
  • editorIndentGuide.activeBackground6#d9d0c1
  • editorIndentGuide.background#e8e0d5
  • editorIndentGuide.background1#e8e0d5
  • editorIndentGuide.background2#e8e0d5
  • editorIndentGuide.background3#e8e0d5
  • editorIndentGuide.background4#e8e0d5
  • editorIndentGuide.background5#e8e0d5
  • editorIndentGuide.background6#e8e0d5
  • editorInfo.foreground#c94c00
  • editorLineNumber.activeForeground#8a7d68
  • editorLineNumber.foreground#c4b59d
  • editorLink.activeForeground#c94c00
  • editorMarkerNavigation.background#f5f1e8
  • editorMarkerNavigationError.background#f8d7da
  • editorMarkerNavigationInfo.background#d4e4f4
  • editorMarkerNavigationWarning.background#fff3cd
  • editorOverviewRuler.border#e8e0d5
  • editorOverviewRuler.findMatchForeground#c94c00
  • editorOverviewRuler.rangeHighlightForeground#c94c00
  • editorOverviewRuler.scrollbarSliderActiveBackground#c94c00aa
  • editorOverviewRuler.scrollbarSliderBackground#c4b59d88
  • editorOverviewRuler.scrollbarSliderHoverBackground#b8a88888
  • editorOverviewRuler.selectionHighlightForeground#c94c00
  • editorRuler.foreground#e8e0d5
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#e8e0d5
  • editorSuggestWidget.foreground#5c4a3a
  • editorSuggestWidget.highlightForeground#c94c00
  • editorSuggestWidget.selectedBackground#ffd699
  • editorSuggestWidget.selectedForeground#5c4a3a
  • editorWarning.foreground#c94c00
  • editorWidget.background#ffffff
  • editorWidget.border#e8e0d5
  • editorWidget.resizeBorder#e8e0d5
  • editorWindowDivider.border#e8e0d5
  • extensionBadge.background#ffd699
  • extensionBadge.foreground#c94c00
  • extensionButton.background#c94c00
  • extensionButton.foreground#ffffff
  • extensionButton.hoverBackground#b03d00
  • extensionButton.prominentBackground#c94c00
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#b03d00
  • extensionIcon.starForeground#f59e0b
  • extensionIcon.verifiedForeground#c94c00
  • findMatchBackground#ffd699
  • findMatchForeground#5c4a3a
  • findRangeHighlightBackground#e8e0d5
  • findWidgetBackground#ffffff
  • findWidgetBorder#e8e0d5
  • findWidgetForeground#5c4a3a
  • gitDecoration.addedResourceForeground#5c7a45
  • gitDecoration.conflictingResourceForeground#d32f2f
  • gitDecoration.deletedResourceForeground#d32f2f
  • gitDecoration.ignoredResourceForeground#9ca3af
  • gitDecoration.modifiedResourceForeground#c94c00
  • gitDecoration.submoduleResourceForeground#8a7d68
  • gitDecoration.untrackedResourceForeground#5c7a45
  • input.background#f5f1e8
  • input.border#d9d0c1
  • input.foreground#5c4a3a
  • input.placeholderForeground#c4b59d
  • inputOption.activeBackground#ffd699
  • inputOption.activeBorder#c94c00
  • inputOption.activeForeground#5c4a3a
  • inputValidation.errorBackground#f8d7da
  • inputValidation.errorBorder#d32f2f
  • inputValidation.infoBackground#d4e4f4
  • inputValidation.infoBorder#c94c00
  • inputValidation.warningBackground#fff3cd
  • inputValidation.warningBorder#c94c00
  • keybindingLabel.background#e8e0d5
  • keybindingLabel.border#c4b59d
  • keybindingLabel.foreground#5c4a3a
  • keybindingTable.headerBackground#f5f1e8
  • keybindingTable.rowsBackground#faf8f3
  • list.activeSelectionBackground#ffd699
  • list.activeSelectionForeground#5c4a3a
  • list.background#faf8f3
  • list.errorForeground#d32f2f
  • list.focusBackground#ffd699
  • list.focusForeground#5c4a3a
  • list.foreground#5c4a3a
  • list.highlightForeground#c94c00
  • list.hoverBackground#f5f1e8
  • list.hoverForeground#5c4a3a
  • list.inactiveSelectionBackground#e8e0d5
  • list.inactiveSelectionForeground#5c4a3a
  • list.warningForeground#c94c00
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#d32f2f
  • listFilterWidget.outline#c94c00
  • markerNavigation.error.background#f8d7da
  • markerNavigation.error.contentBackground#ffffff
  • markerNavigation.info.background#d4e4f4
  • markerNavigation.info.contentBackground#ffffff
  • markerNavigation.warning.background#fff3cd
  • markerNavigation.warning.contentBackground#ffffff
  • menu.background#ffffff
  • menu.border#e8e0d5
  • menu.foreground#5c4a3a
  • menu.selectionBackground#ffd699
  • menu.selectionBorder#c94c00
  • menu.selectionForeground#5c4a3a
  • menu.separatorBackground#e8e0d5
  • messageToast.toastBackground#ffffff
  • messageToast.toastBorder#e8e0d5
  • minimap.background#f5f1e8
  • minimap.errorHighlight#d32f2f
  • minimap.findMatchPreview#e69500
  • minimap.warningHighlight#c94c00
  • minimapSlider.activeBackground#c94c00aa
  • minimapSlider.background#c4b59d88
  • minimapSlider.hoverBackground#b8a88888
  • notificationCenter.border#e8e0d5
  • notificationCenterHeader.background#f5f1e8
  • notificationCenterHeader.foreground#5c4a3a
  • notificationLink.foreground#c94c00
  • notifications.background#ffffff
  • notifications.border#e8e0d5
  • notifications.foreground#5c4a3a
  • notificationToast.border#e8e0d5
  • pickerGroup.border#e8e0d5
  • pickerGroup.foreground#8a7d68
  • problemsErrorIcon.foreground#d32f2f
  • problemsInfoIcon.foreground#c94c00
  • problemsWarningIcon.foreground#c94c00
  • progressBar.background#c94c00
  • ratingIconStar.activeForeground#c94c00
  • referenceSearchEditor.background#f5f1e8
  • referenceSearchEditor.border#e8e0d5
  • remoteExplorer.background#faf8f3
  • remoteExplorer.filterBorder#e8e0d5
  • scrollbarSlider.activeBackground#c94c00aa
  • scrollbarSlider.background#c4b59d88
  • scrollbarSlider.hoverBackground#b8a88888
  • searchEditor.findMatchBackground#ffd699
  • searchEditor.textInputBorder#d9d0c1
  • settings.checkboxBackground#f5f1e8
  • settings.checkboxBorder#d9d0c1
  • settings.checkboxForeground#5c4a3a
  • settings.focusedRowBackground#f5f1e8
  • settings.headerBorder#e8e0d5
  • settings.headerForeground#5c4a3a
  • settings.modifiedItemIndicator#c94c00
  • settings.rowHoverBackground#e8e0d5
  • settings.sashBorder#e8e0d5
  • settings.sliderBackground#e8e0d5
  • settings.sliderForeground#c94c00
  • settings.sliderHoverBackground#d9d0c1
  • sideBar.background#f5f1e8
  • sideBar.border#e8e0d5
  • sideBar.foreground#6d5a48
  • sideBarSectionHeader.background#e8e0d5
  • sideBarSectionHeader.foreground#6d5a48
  • sideBarTitle.foreground#5c4a3a
  • statusBar.background#c94c00
  • statusBar.border#b03d00
  • statusBar.debuggingBackground#b03d00
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#c94c00
  • statusBar.noFolderBorder#b03d00
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#b03d00
  • statusBarItem.hoverBackground#b03d00
  • statusBarItem.prominentBackground#b03d00
  • statusBarItem.prominentHoverBackground#a03700
  • statusBarItem.remoteBackground#c94c00
  • statusBarItem.remoteForeground#ffffff
  • symbolIcon.classForeground#FFD700
  • symbolIcon.colorForeground#5c4a3a
  • symbolIcon.constantForeground#c2410c
  • symbolIcon.constructorForeground#7c3aed
  • symbolIcon.enumeratorForeground#0891b2
  • symbolIcon.enumeratorMemberForeground#c2410c
  • symbolIcon.eventForeground#c94c00
  • symbolIcon.fieldForeground#6b4423
  • symbolIcon.fileForeground#5c4a3a
  • symbolIcon.folderForeground#c94c00
  • symbolIcon.functionForeground#2563eb
  • symbolIcon.interfaceForeground#0891b2
  • symbolIcon.keyForeground#c94c00
  • symbolIcon.keywordForeground#c94c00
  • symbolIcon.moduleForeground#7c3aed
  • symbolIcon.namespaceForeground#7c3aed
  • symbolIcon.nullForeground#9ca3af
  • symbolIcon.numberForeground#c2410c
  • symbolIcon.objectForeground#5c4a3a
  • symbolIcon.operatorForeground#8a7d68
  • symbolIcon.packageForeground#0891b2
  • symbolIcon.propertyForeground#6b4423
  • symbolIcon.referenceForeground#8a7d68
  • symbolIcon.snippetForeground#5c7a45
  • symbolIcon.stringForeground#5c7a45
  • symbolIcon.structForeground#7c3aed
  • symbolIcon.textForeground#5c4a3a
  • symbolIcon.typeParameterForeground#c2410c
  • symbolIcon.unitForeground#c2410c
  • symbolIcon.variableForeground#6b4423
  • tab.activeBackground#ffffff
  • tab.activeBorder#c94c00
  • tab.activeForeground#5c4a3a
  • tab.border#e8e0d5
  • tab.inactiveBackground#f5f1e8
  • tab.inactiveForeground#8a7d68
  • tab.unfocusedActiveBorder#e8e0d5
  • terminal.ansiBlack#4a3a2a
  • terminal.ansiBlue#be185d
  • terminal.ansiBrightBlack#5c4a3a
  • terminal.ansiBrightBlue#be185d
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#8b5cf6
  • terminal.ansiBrightMagenta#22c55e
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#f5f1e8
  • terminal.ansiBrightYellow#c94c00
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#7c3aed
  • terminal.ansiMagenta#16a34a
  • terminal.ansiRed#d32f2f
  • terminal.ansiWhite#e8e0d5
  • terminal.ansiYellow#c94c00
  • terminal.background#faf8f3
  • terminal.border#e8e0d5
  • terminal.foreground#5c4a3a
  • terminal.inactiveSelectionBackground#e8e0d5
  • terminal.selectionBackground#ffd699
  • terminalCursor.foreground#c94c00
  • titleBar.activeBackground#ffffff
  • titleBar.activeBorder#c94c00
  • titleBar.activeForeground#5c4a3a
  • titleBar.border#e8e0d5
  • titleBar.inactiveBackground#f5f1e8
  • titleBar.inactiveForeground#a89c84
  • toolbar.activeBackground#c94c00
  • toolbar.activeForeground#ffffff
  • toolbar.hoverBackground#ffd699
  • tree.indentGuidesStroke#e8e0d5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9e9e9eitalic
string.quoted.triple.python, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end#9e9e9eitalic
string.quoted, string.unquoted#5c7a45
string.quoted.f#4a6540
string.quoted.r#5c7a45
string.quoted.b#4a6540
constant.numeric#c2410c
constant.language#dc2626
constant.language.none#9ca3af
keyword.control#F31518bold
keyword.operator#c2410c
keyword.declaration, storage.type#15803d
keyword.import#15803d
entity.name.function, meta.function#2563eb
support.function.builtin#dc2626
meta.method#2563eb
entity.name.class, storage.class, entity.name.type.class, support.class, entity.name.class.python#d69e2ebold
entity.other.inherited-class, entity.other.inherited-class.python, entity.name.type.class.inherited, support.type.python#d69e2eitalic
meta.decorator, entity.name.function.decorator#ea580c
variable.parameter#6b4423
variable.other, variable#6b4423
variable.other.member, variable.other.object.property, meta.member.access, meta.property.object, support.variable.property, variable.other.property, entity.name.function.member, meta.method-call, support.function.magic, support.function.builtin.python, entity.name.function.decorator.python#c94c00
variable.language.self#0891b2italic
variable.other.property#c94c00
support#dc2626
support.type#0891b2
meta.type.hint, storage.type.hint#0891b2italic
keyword.control.exception#F31518bold
entity.name.exception#b45309
storage.modifier.async#0891b2
keyword.control.await#0891b2bold
keyword.declaration.lambda#15803dbold
keyword.control.flow#F31518
keyword.control.flow.return, keyword.control.yield#F31518
keyword.declaration.global, keyword.declaration.nonlocal#15803d
keyword.control.with#c2410c
keyword.as#15803d
keyword.operator.logical#c2410c
keyword.operator.comparison#8a7d68
keyword.operator.arithmetic#8a7d68
keyword.operator.bitwise#8a7d68
keyword.operator.assignment#8a7d68
keyword.operator.assignment.walrus#c2410c
entity.name.function.dunder#dc2626
variable.other.readwrite.dunder#dc2626
variable.other.readwrite.private#6b4423
meta.index#6b4423
meta.slice#6b4423
meta.mapping#5c4a3a
meta.mapping.key#6b4423
constant.other.ellipsis#9ca3af
variable.parameter, variable#6b4423
entity.name.command#c94c00
string.quoted.double, string.quoted.single#5c7a45
keyword.control, keyword.operator#F31518
comment.line.shebang#9ca3afitalic
entity.name.function.shell#2563eb
sh.operator#8a7d68
keyword.operator.redirect#c94c00
word.parameter#d97706
punctuation#8a7d68
punctuation.definition.brackets#8a7d68
punctuation.definition.string#8a7d68
invalid#d32f2f
Warm Orange Theme by JerryJ - VS Code Theme