Creme

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#fdf6e3
• activityBar.background#f3f0e9
• activityBar.foreground#000000
• activityBarBadge.background#f4e4ba
• activityBarBadge.foreground#000000
• badge.background#e6d8b7
• badge.foreground#000000
• banner.background#dbd9ba
• button.background#b19d4b
• debugToolBar.background#f3e5ab
• dropdown.background#f3e5ab
• editor.background#fdf6e3
• editor.findMatchBackground#ffe5b4
• editor.findMatchBorder#ffe5b4
• editor.findMatchHighlightBackground#fff9c1
• editor.foldBackground#f4e4ba
• editor.foreground#2f2930
• editor.lineHighlightBackground#fdf6e3cc
• editorBracketHighlight.foreground1#000000
• editorBracketHighlight.foreground2#000000
• editorBracketHighlight.foreground3#000000
• editorBracketMatch.background#fdf6e3
• editorBracketMatch.border#fdf6e3
• editorCodeLens.foreground#a89e8d
• editorCursor.foreground#302c29
• editorError.foreground#b63030
• editorGroup.emptyBackground#f5f5dc
• editorGroupHeader.noTabsBackground#f3f0e9
• editorGroupHeader.tabsBackground#f3f0e9
• editorGutter.background#fdf6e3
• editorGutter.modifiedBackground#f3e5ab
• editorHoverWidget.background#f3e5ab
• editorIndentGuide.activeBackground#a89e8d
• editorIndentGuide.background#f3e5ab
• editorLineNumber.activeForeground#000000
• editorLineNumber.foreground#a2996c
• editorLink.activeForeground#f4e4ba
• editorOverviewRuler.border#fdf6e3
• editorOverviewRuler.findMatchForeground#fdf6e3
• editorRuler.foreground#fdf6e3
• editorSuggestWidget.background#f3e5ab
• editorSuggestWidget.selectedBackground#f4e4ba
• editorWarning.foreground#ceb984
• editorWidget.background#FDF1C1
• extensionButton.prominentBackground#f3e5ab
• extensionButton.prominentHoverBackground#f5f5dc
• focusBorder#000000
• input.background#f3e5ab
• inputOption.activeBackground#f3e5ab
• list.activeSelectionBackground#f4e4ba
• list.activeSelectionForeground#000000
• list.dropBackground#f5f5dc
• list.focusBackground#f3e5ab
• list.focusForeground#000000
• list.hoverBackground#f4e4babb
• list.hoverForeground#000000
• list.inactiveSelectionBackground#f4e4ba
• list.inactiveSelectionForeground#000000
• list.warningForeground#ceb984
• menu.background#f3e5abcc
• menu.foreground#000000
• menu.selectionBackground#f4e4ba
• menu.selectionForeground#4b492d
• menubar.selectionBackground#f4e4ba
• menubar.selectionForeground#000000
• merge.border#f5f5dc
• merge.currentContentBackground#f3e5ab
• merge.currentHeaderBackground#f3e5ab
• merge.incomingContentBackground#f3e5ab
• merge.incomingHeaderBackground#f4e4ba
• minimap.background#fdf6e3
• panel.background#f4e4ba
• panel.border#000000
• panelSection.border#000000
• panelTitle.activeForeground#000000
• panelTitle.inactiveForeground#000000
• peekView.border#fdf6e3
• peekViewEditor.background#f3e5ab
• peekViewEditorGutter.background#f5f5dc
• peekViewResult.background#f5f5dc
• peekViewResult.fileForeground#000000
• peekViewResult.lineForeground#000000
• peekViewResult.matchHighlightBackground#ffebcd
• peekViewResult.selectionBackground#f3fbd0
• peekViewTitle.background#e6d8b7
• peekViewTitleDescription.foreground#333333
• peekViewTitleLabel.foreground#000000
• pickerGroup.border#fdf6e3
• pickerGroup.foreground#000000
• scrollbarSlider.activeBackground#d8c3a5
• scrollbarSlider.background#e6d8b7aa
• scrollbarSlider.hoverBackground#e6d8b7dd
• settings.checkboxBackground#f5f5dc
• settings.checkboxBorder#e6d8b7
• settings.dropdownBackground#f5f5dc
• settings.dropdownBorder#e6d8b7
• settings.dropdownListBorder#e6d8b7
• settings.headerForeground#000000
• settings.modifiedItemIndicator#e6d8b7
• settings.numberInputBackground#f5f5dc
• settings.numberInputBorder#e6d8b7
• settings.textInputBackground#f5f5dc
• settings.textInputBorder#e6d8b7
• sideBar.background#e6d8b7
• sideBarSectionHeader.background#fdf6e3
• sideBarSectionHeader.foreground#302c29
• sideBarTitle.foreground#302c29
• statusBar.background#e6d8b7
• statusBar.border#fdf6e3
• statusBar.debuggingBackground#d2b09f
• statusBar.foreground#302c29
• statusBar.noFolderBackground#e6d8b7
• statusBarItem.hoverBackground#f5f5dc
• tab.activeBackground#fdf6e3
• tab.activeBorder#fdf6e3
• tab.activeForeground#302c29
• tab.inactiveBackground#f3f0e9
• tab.inactiveForeground#a89e8d
• titleBar.activeBackground#efefc8
• titleBar.activeForeground#302c29
• titleBar.inactiveBackground#f5f5dc
• titleBar.inactiveForeground#928c80
• welcomePage.progress.background#ffebcd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).