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.activeBackground#1F2430
  • activityBar.background#1F2430
  • activityBar.border#1F2430
  • activityBar.foreground#d7a18087
  • activityBar.inactiveForeground#ffffff38
  • activityBarBadge.background#d7a18087
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d7a180
  • breadcrumb.background#1F2430
  • breadcrumb.focusForeground#ffffff70
  • breadcrumb.foreground#ffffff50
  • breadcrumbPicker.background#1F2430
  • button.background#a95927
  • button.foreground#ffffff95
  • button.secondaryBackground#242424
  • button.secondaryHoverBackground#262626
  • debugToolbar.background#1F2430
  • debugToolbar.border#1F2430
  • diffEditor.insertedTextBackground#c3e88d22
  • diffEditor.removedTextBackground#ff537022
  • editor.background#1F2430
  • editor.foreground#ffffff93
  • editorBracketHighlight.foreground1#d7a180
  • editorBracketHighlight.foreground2#82AAFF
  • editorBracketHighlight.foreground3#C792EA
  • editorBracketMatch.background#ffffff10
  • editorBracketMatch.border#d7a180
  • editorCodeLens.foreground#ffffff50
  • editorGroupHeader.border#1F2430
  • editorGroupHeader.dropBackground#242424
  • editorGroupHeader.noTabsBackground#1F2430
  • editorGroupHeader.tabsBackground#1F2430
  • editorGroupHeader.tabsBorder#242424
  • editorGutter.addedBackground#c3e88d55
  • editorGutter.background#1F2430
  • editorGutter.deletedBackground#ff537055
  • editorGutter.modifiedBackground#ffd7bf99
  • editorInlayHint.background#242424
  • editorInlayHint.foreground#ffffff66
  • editorLightBulb.foreground#FFCB6B
  • editorLineNumber.activeForeground#d7a180
  • editorLineNumber.foreground#ffffff33
  • editorOverviewRuler.background#1F2430
  • editorOverviewRuler.border#1F2430
  • editorWhitespace.foreground#222734
  • editorWidget.background#1F2430
  • editorWidget.foreground#ffffff70
  • editorWidget.resizeBorder#1F2430
  • focusBorder#1F2430
  • gitDecoration.modifiedResourceForeground#ffd7bfe7
  • input.background#232837
  • input.border#181b23
  • input.foreground#ffffff93
  • list.activeSelectionBackground#9f7c6785
  • list.activeSelectionForeground#ffffff95
  • list.activeSelectionIconForeground#ffffff95
  • list.dropBackground#1F2430
  • list.focusBackground#1F2430
  • list.focusForeground#ffffff93
  • list.highlightForeground#d7a180
  • list.hoverBackground#9f7c6785
  • list.hoverForeground#ffffff95
  • list.inactiveSelectionBackground#9f7c6785
  • list.inactiveSelectionForeground#ffffff95
  • menu.background#1F2430
  • menu.foreground#ffffff93
  • menu.selectionBackground#d7a18057
  • menu.separatorBackground#d7a18057
  • menubar.background#1F2430
  • menubar.foreground#ffffff93
  • menubar.selectionBackground#d7a18057
  • menubar.selectionBorder#d7a18057
  • minimap.selectionHighlight#b1ffcf40
  • notification.background#1F2430
  • notification.buttonBackground#a95927
  • notification.buttonForeground#ffffff
  • notification.buttonHoverBackground#d7a180
  • notification.foreground#ffffff93
  • panel.background#1F2430
  • panel.border#1F2430
  • panelTitle.activeForeground#d7a180
  • panelTitle.inactiveForeground#ffffff50
  • peekViewEditor.background#1F2430
  • peekViewEditor.matchHighlightBackground#d7a18040
  • peekViewResult.background#1F2430
  • peekViewResult.matchHighlightBackground#d7a18040
  • pickerGroup.border#00000000
  • pickerGroup.foreground#d7a180
  • progressBar.background#d7a180
  • scrollbar.shadow#1F2430
  • scrollbarSlider.activeBackground#d7a18053
  • scrollbarSlider.background#d7a18033
  • scrollbarSlider.hoverBackground#d7a18043
  • selection.background#9f7c67
  • sideBar.background#1F2430
  • sideBar.border#1F2430
  • sideBar.foreground#ffffff93
  • sideBarSectionHeader.background#1F2430
  • sideBarSectionHeader.foreground#ffffff93
  • sideBarTitle.foreground#ffffff93
  • sideBySideEditor.horizontalBorderColor#1F2430
  • sideBySideEditor.verticalBorder#1F2430
  • statusBar.background#1F2430
  • statusBar.debuggingBackground#cc6633
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1F2430
  • statusBarItem.remoteBackground#1F2430
  • statusBarItem.remoteForeground#a2ff6ec1
  • tab.activeBackground#1F2430
  • tab.activeBorder#262626
  • tab.activeForeground#ffffff93
  • tab.border#1F2430
  • tab.inactiveBackground#1F2430
  • tab.inactiveForeground#ffffff33
  • tab.unfocusedActiveBorder#26262655
  • tab.unfocusedActiveForeground#ffffff70
  • tab.unfocusedForeground#ffffff50
  • terminal.ansiBlack#1F2430
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#546E7A
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFCB6B
  • terminal.background#1F2430
  • terminal.foreground#ffffff93
  • terminalCursor.foreground#d7a180
  • textLink.activeForeground#b1ffcfcc
  • textLink.foreground#d7a180
  • titleBar.activeBackground#1F2430
  • titleBar.activeForeground#ffffff93
  • titleBar.border#00000000
  • tree.indentGuidesStroke#d7a18057
  • welcomePage.background#1F2430
  • widget.border#00000000
  • window.activeBorder#1F2430
  • window.inactiveBorder#1F2430

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6370italic
keyword, storage.type, storage.modifier#c96eea—
support.type, entity.name.type, entity.name.type.interface, entity.name.type.struct#e5c07b—
entity.name.function, meta.function-call, variable.function, support.function#72c6e8italic
variable, identifier, variable.parameter#e9d7a6—
constant.numeric, constant.language, support.constant, constant.character, constant.boolean#d19a66—
string, constant.other.symbol#98C379—
support.function, support.class, support.other.package#e5c07b—
keyword.operator, punctuation#56b6c2—
variable.other.field#e9d7a6—
invalid, invalid.illegal#e06c75—
entity.name.tag#e06c75—
entity.other.attribute-name#c96eeaitalic
entity.other.attribute-name, JSXAttribute, meta.jsx.attribute, meta.tsx.attribute#E5C07Bitalic
entity.name.type.class.jsx, entity.name.type.class.tsx, support.class.component.jsx, support.class.component.tsx#E5C07Bitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#c96eea—
support.constant.property-value.css, support.constant.property-value.scss#FFB454—
support.type.property-name.css, support.type.property-name.scss#72c6e8italic
text.html.derivative#ffffff85italic
punctuation.definition.heading.markdown, markup.heading.markdown, markup.italic.markdown, markup.inline.raw.markdown#e06c75italic
entity.name.section.markdown#98C379—
variable.language.this.tsx, variable.language.this.jsx, variable.language.this.ts, variable.language.this.js, punctuation.accessor.tsx, punctuation.accessor.jsx, punctuation.accessor.ts, punctuation.accessor.js#98C379—
Aklesky Dark Flat by aklesky - VS Code Theme