Chroma Library

Color themes

• 

  Quantum Green

• 

  Solar Flare

• 

  Toxic Waste

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#1a0a00
• activityBar.activeBorder#ff4500
• activityBar.background#050200
• activityBar.border#ff8000
• activityBar.foreground#ff4500
• activityBar.inactiveForeground#664422
• activityBarBadge.background#ff8000
• activityBarBadge.foreground#000000
• button.background#ff8000
• button.border#ff8000
• button.foreground#000000
• button.hoverBackground#ffa040
• dropdown.background#1a0a00
• dropdown.border#ff8000
• dropdown.foreground#ffaa40
• editor.background#1a0a00
• editor.findMatchBackground#ff800080
• editor.findMatchHighlightBackground#ff800040
• editor.foreground#ffaa40
• editor.lineHighlightBackground#2d1400
• editor.selectionBackground#ff800060
• editor.selectionHighlightBackground#ff800030
• editorCursor.foreground#ff4500
• editorGroupHeader.tabsBackground#0d0500
• editorGroupHeader.tabsBorder#ff8000
• editorGutter.background#0d0500
• editorIndentGuide.activeBackground#ff4500
• editorIndentGuide.background#664422
• editorLineNumber.activeForeground#ff4500
• editorLineNumber.foreground#996633
• editorWhitespace.foreground#664422
• errorForeground#ff4040
• focusBorder#ff8000
• foreground#ffaa40
• icon.foreground#ff4500
• input.background#1a0a00
• input.border#ff8000
• input.foreground#ffaa40
• input.placeholderForeground#996633
• list.activeSelectionBackground#ff800060
• list.activeSelectionForeground#000000
• list.hoverBackground#2d1400
• list.hoverForeground#ffffff
• list.inactiveSelectionBackground#664422
• list.inactiveSelectionForeground#ffaa40
• menu.background#1a0a00
• menu.border#ff8000
• menu.foreground#ffaa40
• menu.selectionBackground#ff800060
• menu.selectionForeground#000000
• menu.separatorBackground#ff8000
• panel.background#0d0500
• panel.border#ff8000
• panelTitle.activeBorder#ff4500
• panelTitle.activeForeground#ff4500
• panelTitle.inactiveForeground#996633
• selection.background#ff800060
• sideBar.background#0d0500
• sideBar.border#ff8000
• sideBar.foreground#ffaa40
• sideBarSectionHeader.background#1a0a00
• sideBarSectionHeader.border#ff8000
• sideBarSectionHeader.foreground#ffaa40
• sideBarTitle.foreground#ff4500
• statusBar.background#050200
• statusBar.border#ff8000
• statusBar.debuggingBackground#ff8000
• statusBar.debuggingForeground#000000
• statusBar.foreground#ffaa40
• statusBar.noFolderBackground#050200
• statusBarItem.activeBackground#2d1400
• statusBarItem.hoverBackground#1a0a00
• tab.activeBackground#1a0a00
• tab.activeBorder#ff4500
• tab.activeForeground#ff4500
• tab.border#ff8000
• tab.inactiveBackground#0d0500
• tab.inactiveForeground#996633
• terminal.ansiBlack#000000
• terminal.ansiBlue#4040ff
• terminal.ansiCyan#40ffff
• terminal.ansiGreen#40ff40
• terminal.ansiMagenta#ff40ff
• terminal.ansiRed#ff4040
• terminal.ansiWhite#ffffff
• terminal.ansiYellow#ffff40
• terminal.background#1a0a00
• terminal.foreground#ffaa40
• titleBar.activeBackground#050200
• titleBar.activeForeground#ffaa40
• titleBar.border#ff8000
• titleBar.inactiveBackground#050200
• titleBar.inactiveForeground#664422

tokenColors

TextMate scopes and font styles (syntax highlighting rules).