ToneWL

Color themes

• 

  ToneWL

• 

  ToneWL-Light

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#DBD9D5
• activityBar.foreground#0D0709
• badge.background#95967A
• badge.foreground#07070D
• button.background#95967A
• commandCenter.activeBackground#d1e5e7
• commandCenter.background#eff1f3
• commandCenter.foreground#242a2e
• debugToolBar.background#DEE1DA
• diffEditor.insertedTextBackground#C0897A80
• diffEditor.removedTextBackground#6FC49B80
• dropdown.background#C4C5BD
• dropdown.listBackground#E1E2DD
• editor.background#f8f8ff
• editor.foreground#0D0819
• editor.lineHighlightBackground#cdc6d2
• editor.selectionBackground#dcd2e7
• editor.selectionHighlightBackground#cec2acf0
• editor.wordHighlightBackground#B5A9B3F0
• editor.wordHighlightStrongBackground#7173957f
• editorBracketHighlight.foreground1#0f9b74
• editorBracketHighlight.foreground2#0f809d
• editorBracketHighlight.foreground3#0d6ab7
• editorBracketHighlight.foreground4#463dab
• editorBracketHighlight.foreground5#6d2a9d
• editorBracketHighlight.foreground6#9d2294
• editorCursor.foreground#2f0513
• editorGroup.border#C6C7BF
• editorGroup.dropBackground#BCBFD480
• editorGroupHeader.tabsBackground#E0E1DE
• editorHoverWidget.background#C4C5BD
• editorHoverWidget.border#95967A
• editorIndentGuide.activeBackground1#919688
• editorIndentGuide.background1#B6BCAD
• editorLineNumber.activeForeground#40423D
• editorLineNumber.foreground#73736B
• editorSuggestWidget.background#D6D9D0
• editorSuggestWidget.border#95967A
• editorWhitespace.foreground#D5D7CD
• editorWidget.background#E3E5E0
• focusBorder#95967A
• input.background#C4C5BD
• inputOption.activeBorder#95967A
• inputValidation.errorBackground#6BD8AB
• inputValidation.errorBorder#34a707
• inputValidation.infoBackground#AB9E6F
• inputValidation.infoBorder#7E6500
• inputValidation.warningBackground#7B7AD7
• inputValidation.warningBorder#1D1DD1
• list.activeSelectionBackground#95967A
• list.dropBackground#C6CCBB
• list.focusBackground#C6CCBB
• list.highlightForeground#0D0709
• list.hoverBackground#CBCFC3
• list.inactiveSelectionBackground#C6CCBB
• menu.background#E1E2DD
• menu.foreground#333333
• minimap.selectionHighlight#78747E7F
• panel.border#C3C8BB
• panelTitle.activeBorder#95967A
• panelTitle.activeForeground#0D0707
• panelTitle.inactiveForeground#95967A
• peekView.border#95967A
• peekViewEditor.background#DBD9D5
• peekViewEditor.matchHighlightBackground#95967A
• peekViewResult.background#E0E1DC
• peekViewResult.matchHighlightBackground#95967A
• peekViewResult.selectionBackground#B9BCA9
• peekViewTitle.background#E3E1E0
• pickerGroup.foreground#95967A
• progressBar.background#95967A
• selection.background#4F4C47
• settings.focusedRowBackground#C6CCBB90
• sideBar.background#E0E1DC
• sideBarSectionHeader.background#D7D7D1
• statusBar.background#C4C5BD
• statusBar.debuggingBackground#95967A
• statusBar.noFolderBackground#C4C5BD
• statusBarItem.remoteBackground#BFE7F3
• tab.border#E0E1DE
• tab.inactiveBackground#CFCFC9
• tab.inactiveForeground#354130
• tab.lastPinnedBorder#C4C5BD
• terminal.ansiBlack#CCCCCC
• terminal.ansiBlue#3541A7
• terminal.ansiBrightBlack#999999
• terminal.ansiBrightBlue#2D4CF0
• terminal.ansiBrightCyan#0860BA
• terminal.ansiBrightGreen#0F9B50
• terminal.ansiBrightMagenta#7733a0
• terminal.ansiBrightRed#9c1ac1
• terminal.ansiBrightWhite#07070D
• terminal.ansiBrightYellow#1D1DD1
• terminal.ansiCyan#06638f
• terminal.ansiGreen#068905
• terminal.ansiMagenta#5714a7
• terminal.ansiRed#3b99a1
• terminal.ansiWhite#1C1C22
• terminal.ansiYellow#4c4bd4
• terminal.background#E4E5DF
• titleBar.activeBackground#cfd5d3cc
• titleBar.activeForeground#151f1c
• titleBar.inactiveBackground#cfd5d3
• titleBar.inactiveForeground#151f1a88
• widget.shadow#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).