Cooland

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#212121
• activityBar.border#2D2D2D
• activityBar.foreground#6B6F82
• activityBarBadge.background#314559
• activityBarBadge.foreground#fff
• badge.background#42505e
• badge.foreground#fff
• button.background#0BC7D1AA
• button.foreground#fff
• button.hoverBackground#0BC7D1BB
• debugExceptionWidget.background#212121
• debugExceptionWidget.border#2D2D2D
• debugToolBar.background#212121
• diffEditor.insertedTextBackground#95e6cb44
• diffEditor.removedTextBackground#f0717844
• dropdown.background#212121
• editor.background#212121
• editor.findMatchBackground#0BC7D133
• editor.findMatchHighlightBackground#0BC7D133
• editor.findRangeHighlightBackground#0BC7D133
• editor.foreground#E0E2F0
• editor.lineHighlightBackground#212121
• editor.rangeHighlightBackground#212121
• editor.selectionBackground#313131
• editor.wordHighlightBackground#0BC7D133
• editor.wordHighlightStrongBackground#0BC7D133
• editorBracketMatch.border#2D2D2D
• editorCursor.foreground#0BC7D1
• editorError.foreground#ff3333
• editorGroup.background#212121
• editorGroup.border#2D2D2D
• editorGroupHeader.noTabsBackground#212121
• editorGroupHeader.tabsBackground#212121
• editorGroupHeader.tabsBorder#2D2D2D
• editorGutter.addedBackground#c2d94c
• editorGutter.deletedBackground#ff3333
• editorGutter.modifiedBackground#50b4e6
• editorHoverWidget.background#212121
• editorHoverWidget.border#2D2D2D
• editorIndentGuide.background#3A3A3A
• editorLineNumber.foreground#4E4E4E
• editorLink.activeForeground#0BC7D1
• editorLink.foreground#0BC7D1
• editorMarkerNavigation.background#212121
• editorOverviewRuler.border#2D2D2D
• editorRuler.foreground#2D2D2D
• editorSuggestWidget.background#212121
• editorSuggestWidget.border#2D2D2D
• editorSuggestWidget.highlightForeground#0BC7D1
• editorSuggestWidget.selectedBackground#1d1d1d
• editorWarning.foreground#0BC7D1
• editorWhitespace.foreground#3A3A3A
• editorWidget.background#212121
• extensionButton.prominentBackground#0BC7D1AA
• extensionButton.prominentForeground#fff
• extensionButton.prominentHoverBackground#0BC7D1BB
• focusBorder#6B6F828A
• foreground#838695
• input.background#212121
• input.border#6B6F824C
• input.foreground#E0E2F0
• input.placeholderForeground#6B6F828A
• inputOption.activeBorder#6B6F828A
• inputValidation.errorBackground#212121
• inputValidation.errorBorder#DC6565
• inputValidation.infoBackground#212121
• inputValidation.infoBorder#50b4e6
• inputValidation.warningBackground#212121
• inputValidation.warningBorder#E1B072
• list.activeSelectionBackground#2D2D2D
• list.activeSelectionForeground#E0E2F0
• list.focusAndSelectionBackground#2D2D2D
• list.focusAndSelectionForeground#E0E2F0
• list.focusBackground#1d1d1d
• list.focusForeground#E0E2F0
• list.highlightForeground#0BC7D1
• list.hoverBackground#1d1d1d
• list.hoverForeground#E0E2F0
• list.inactiveSelectionBackground#212121
• list.inactiveSelectionForeground#E0E2F0
• notification.background#2D2D2D
• panel.background#212121
• panel.border#2D2D2D
• panelTitle.activeBorder#0BC7D1
• panelTitle.activeForeground#E0E2F0
• panelTitle.inactiveForeground#6B6F82
• peekView.border#2D2D2D
• peekViewEditor.background#212121
• peekViewEditor.matchHighlightBackground#0BC7D133
• peekViewResult.background#212121
• peekViewResult.fileForeground#6B6F82
• peekViewResult.matchHighlightBackground#0BC7D133
• peekViewTitle.background#212121
• peekViewTitleDescription.foreground#6B6F82
• peekViewTitleLabel.foreground#6B6F82
• pickerGroup.border#2D2D2D
• pickerGroup.foreground#0BC7D1
• progressBar.background#0BC7D1
• scrollbar.shadow#00000011
• scrollbarSlider.activeBackground#ffffff22
• scrollbarSlider.background#ffffff11
• scrollbarSlider.hoverBackground#ffffff22
• selection.background#313131fd
• sideBar.background#212121
• sideBar.border#2D2D2D
• sideBarSectionHeader.background#212121
• sideBarSectionHeader.foreground#6B6F82
• sideBarTitle.foreground#6B6F82
• statusBar.background#212121
• statusBar.border#2D2D2D
• statusBar.debuggingBackground#212121
• statusBar.debuggingForeground#6B6F82
• statusBar.foreground#6B6F82
• statusBar.noFolderBackground#212121
• statusBarItem.activeBackground#2D2D2D
• statusBarItem.hoverBackground#1d1d1d
• statusBarItem.prominentBackground#2D2D2D
• statusBarItem.prominentHoverBackground#1d1d1d
• tab.activeBackground#212121
• tab.activeBorder#0BC7D1
• tab.activeForeground#E0E2F0
• tab.border#2D2D2D
• tab.inactiveBackground#212121
• tab.inactiveForeground#6B6F82
• tab.unfocusedActiveForeground#E0E2F0AA
• tab.unfocusedInactiveForeground#6B6F82
• terminal.ansiBlack#2D2D2D
• terminal.ansiBlue#50b4e6
• terminal.ansiBrightBlack#686868
• terminal.ansiBrightBlue#6871ff
• terminal.ansiBrightCyan#a6fde1
• terminal.ansiBrightGreen#cbe645
• terminal.ansiBrightMagenta#ff77ff
• terminal.ansiBrightRed#f07178
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffee99
• terminal.ansiCyan#95e6cb
• terminal.ansiGreen#c2d94c
• terminal.ansiMagenta#ca30c7
• terminal.ansiRed#ff7733
• terminal.ansiWhite#c7c7c7
• terminal.ansiYellow#E1B072
• terminal.background#212121
• terminal.foreground#E0E2F0
• textBlockQuote.background#212121
• textLink.activeForeground#0BC7D1
• textLink.foreground#0BC7D1
• textPreformat.foreground#E0E2F0
• titleBar.activeBackground#212121
• titleBar.activeForeground#6B6F82
• titleBar.border#2D2D2D
• titleBar.inactiveBackground#212121
• titleBar.inactiveForeground#6B6F82
• walkThrough.embeddedEditorBackground#212121
• welcomeOverlay.foreground#E0E2F0
• welcomePage.quickLinkBackground#1d1d1d
• welcomePage.quickLinkHoverBackground#2D2D2D
• widget.shadow#000000b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).