ark

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#fefdf8
• activityBar.activeBorder#f7bf52
• activityBar.activeFocusBorder#f7bf52
• activityBar.background#fefdf8
• activityBar.border#fefdf8
• activityBar.dropBorder#f7bf52
• activityBar.foreground#305074
• activityBar.inactiveForeground#ececec
• activityBarBadge.background#fdd679
• activityBarBadge.foreground#305074
• badge.background#fdd679
• badge.foreground#305074
• breadcrumb.activeSelectionForeground#fdd679
• breadcrumb.background#fefdf8
• breadcrumb.focusForeground#fdd679
• breadcrumb.foreground#305074
• button.background#305074
• button.border#f7bf52
• button.foreground#ececec
• button.hoverBackground#78a0ac
• button.secondaryBackground#305074
• button.secondaryForeground#ececec
• button.secondaryHoverBackground#78a0ac
• button.separator#ececec
• checkbox.background#fefdf8
• checkbox.border#f7bf52
• checkbox.foreground#305074
• checkbox.selectBackground#fdd679
• checkbox.selectBorder#f7bf52
• debugExceptionWidget.background#ececec
• debugExceptionWidget.border#f7bf52
• debugToolBar.background#ececec
• debugToolBar.border#f7bf52
• descriptionForeground#305074
• diffEditor.border#f7bf52
• diffEditor.insertedTextBackground#ececec
• diffEditor.insertedTextBorder#ececec
• diffEditor.removedTextBackground#fefdf8
• diffEditor.removedTextBorder#fefdf8
• disabledForeground#f7bf52
• dropdown.background#fefdf8
• dropdown.border#f7bf52
• dropdown.foreground#305074
• dropdown.listBackground#fefdf8
• editor.background#fdf6e3
• editor.findMatchBackground#fdd679
• editor.findMatchBorder#f7bf52
• editor.findMatchHighlightBackground#fefdf8
• editor.findMatchHighlightBorder#f7bf52
• editor.findRangeHighlightBackground#eee8d5
• editor.findRangeHighlightBorder#f7bf52
• editor.foldBackground#eee8d574
• editor.foreground#118600
• editor.hoverHighlightBackground#fefdf8
• editor.inactiveSelectionBackground#fdd679
• editor.lineHighlightBackground#eee8d5
• editor.lineHighlightBorder#fdf6e3
• editor.rangeHighlightBackground#eee8d5
• editor.rangeHighlightBorder#f7bf52
• editor.selectionBackground#fdd679
• editor.selectionHighlightBackground#fefdf8
• editor.selectionHighlightBorder#f7bf52
• editor.wordHighlightBackground#fefdf8
• editor.wordHighlightBorder#f7bf52
• editor.wordHighlightStrongBackground#fefdf8
• editor.wordHighlightStrongBorder#eee8d5
• editorBracketMatch.background#71afcd7a
• editorBracketMatch.border#71afcd7a
• editorCodeLens.foreground#305074
• editorCursor.background#fdf6e3
• editorCursor.foreground#71afcd
• editorError.background#fdf6e3
• editorError.border#fdf6e3
• editorError.foreground#e51400
• editorGroup.border#f7bf52
• editorGroup.dropBackground#fdd679
• editorGroup.dropIntoPromptBackground#fefdf8
• editorGroup.dropIntoPromptForeground#305074
• editorGroup.emptyBackground#fdf6e3
• editorGroup.focusedEmptyBorder#f7bf52
• editorGroupHeader.border#ffffff
• editorGroupHeader.noTabsBackground#fefdf8
• editorGroupHeader.tabsBackground#fefdf8
• editorGroupHeader.tabsBorder#fefdf8
• editorGutter.addedBackground#38a346
• editorGutter.background#fdf6e3
• editorGutter.commentRangeForeground#424242
• editorGutter.deletedBackground#ed2540
• editorGutter.foldingControlForeground#305074
• editorGutter.modifiedBackground#305074
• editorHoverWidget.background#fefdf8
• editorHoverWidget.border#f7bf52
• editorHoverWidget.foreground#305074
• editorIndentGuide.activeBackground1#939393
• editorIndentGuide.background1#d3d3d3
• editorInfo.background#fdf6e3
• editorInfo.border#fdf6e3
• editorInfo.foreground#75beff
• editorLineNumber.activeForeground#71afcd
• editorLineNumber.foreground#ececec
• editorLink.activeForeground#71afcd
• editorMarkerNavigation.background#fefdf8
• editorMarkerNavigationError.background#f7bf52
• editorMarkerNavigationInfo.background#f7bf52
• editorMarkerNavigationWarning.background#f7bf52
• editorOverviewRuler.background#fefdf8
• editorOverviewRuler.border#fefdf8
• editorPane.background#fefdf8
• editorRuler.foreground#f7bf52
• editorSuggestWidget.background#fefdf8
• editorSuggestWidget.border#f7bf52
• editorSuggestWidget.foreground#305074
• editorSuggestWidget.highlightForeground#78a0ac
• editorSuggestWidget.selectedBackground#fdd679
• editorWarning.background#fdf6e3
• editorWarning.border#fdf6e3
• editorWarning.foreground#f7bf52
• editorWhitespace.foreground#fefdf8
• editorWidget.background#ececec
• editorWidget.foreground#305074
• editorWidget.resizeBorder#f7bf52
• errorForeground#f7bf52
• focusBorder#f7bf52
• foreground#305074
• gitDecoration.addedResourceForeground#38a346
• gitDecoration.conflictingResourceForeground#4242d1
• gitDecoration.deletedResourceForeground#ed2540
• gitDecoration.ignoredResourceForeground#305074
• gitDecoration.modifiedResourceForeground#f7bf52
• gitDecoration.stageDeletedResourceForeground#ed2540
• gitDecoration.stageModifiedResourceForeground#f7bf52
• gitDecoration.submoduleResourceForeground#305074
• gitDecoration.untrackedResourceForeground#38a346
• icon.foreground#305074
• input.background#fefdf8
• input.border#f7bf52
• input.foreground#305074
• input.placeholderForeground#ececec
• inputOption.activeBackground#fefdf8
• inputOption.activeBorder#f7bf52
• inputOption.activeForeground#305074
• inputOption.hoverBackground#fdd679
• inputValidation.errorBackground#ececec
• inputValidation.errorBorder#f7bf52
• inputValidation.errorForeground#305074
• inputValidation.infoBackground#ececec
• inputValidation.infoBorder#f7bf52
• inputValidation.infoForeground#305074
• inputValidation.warningBackground#ececec
• inputValidation.warningBorder#f7bf52
• inputValidation.warningForeground#305074
• list.activeSelectionBackground#fdd679
• list.activeSelectionForeground#305074
• list.activeSelectionIconForeground#305074
• list.deemphasizedForeground#305074
• list.dropBackground#fdd679
• list.errorForeground#ed2540
• list.filterMatchBackground#fdd679
• list.filterMatchBorder#f7bf52
• list.focusAndSelectionOutline#fdd679
• list.focusBackground#fdd679
• list.focusForeground#305074
• list.focusHighlightForeground#305074
• list.focusOutline#fdd679
• list.highlightForeground#305074
• list.hoverBackground#fefdf8
• list.hoverForeground#305074
• list.inactiveFocusBackground#fefdf8
• list.inactiveFocusOutline#fdd679
• list.inactiveSelectionBackground#fdd679
• list.inactiveSelectionForeground#305074
• list.inactiveSelectionIconForeground#305074
• list.invalidItemForeground#305074
• list.warningForeground#ed2540
• listFilterWidget.background#fefdf8
• listFilterWidget.noMatchesOutline#f7bf52
• listFilterWidget.outline#fdd679
• listFilterWidget.shadow#fdd679
• menu.background#ececec
• menu.border#f7bf52
• menu.foreground#305074
• menu.selectionBackground#fdd679
• menu.selectionBorder#fefdf8
• menu.selectionForeground#305074
• menu.separatorBackground#f7bf52
• menubar.selectionBackground#fdd679
• menubar.selectionBorder#fefdf8
• menubar.selectionForeground#f7bf52
• merge.commonContentBackground#ececec
• merge.commonHeaderBackground#ececec
• merge.currentContentBackground#fdf6e3
• merge.currentHeaderBackground#fefdf8
• merge.incomingContentBackground#fdf6e3
• merge.incomingHeaderBackground#fefdf8
• minimap.background#fdf6e3
• minimap.errorHighlight#e51400
• minimap.findMatchHighlight#a8ac94
• minimap.foregroundOpacity#fefdf830
• minimap.selectionHighlight#6584b6
• minimap.selectionOccurrenceHighlight#fdd679
• minimap.warningHighlight#e9a700
• minimapGutter.addedBackground#81b88b
• minimapGutter.deletedBackground#ca4b51
• minimapGutter.modifiedBackground#66afe0
• minimapSlider.activeBackground#fdd679
• minimapSlider.background#ececec
• minimapSlider.hoverBackground#fdd679
• notificationCenter.border#f7bf52
• notificationCenterHeader.background#ececec
• notificationCenterHeader.foreground#305074
• notifications.background#ececec
• notifications.border#f7bf52
• notifications.foreground#305074
• notificationsErrorIcon.foreground#ed2540
• notificationsInfoIcon.foreground#78a0ac
• notificationsWarningIcon.foreground#f7bf52
• notificationToast.border#f7bf52
• panel.background#fefdf8
• panel.border#f7bf52
• panelSection.border#f7bf52
• panelTitle.activeBorder#f7bf52
• panelTitle.activeForeground#305074
• panelTitle.inactiveForeground#305074
• peekView.border#f7bf52
• peekViewEditor.background#fefdf8
• peekViewEditor.matchHighlightBackground#fdd679
• peekViewEditor.matchHighlightBorder#fdd679
• peekViewEditorGutter.background#fefdf8
• peekViewResult.background#fefdf8
• peekViewResult.fileForeground#305074
• peekViewResult.lineForeground#305074
• peekViewResult.matchHighlightBackground#fdd679
• peekViewResult.selectionBackground#fdd679
• peekViewResult.selectionForeground#305074
• peekViewTitle.background#fefdf8
• peekViewTitleDescription.foreground#305074
• peekViewTitleLabel.foreground#305074
• pickerGroup.border#f7bf52
• pickerGroup.foreground#78a0ac
• profileBadge.background#fdd679
• profileBadge.foreground#305074
• progressBar.background#fdd679
• sash.hoverBorder#f7bf52
• scrollbar.shadow#ececec
• scrollbarSlider.activeBackground#fdd679
• scrollbarSlider.background#305074
• scrollbarSlider.hoverBackground#fdd679
• selection.background#fdd679
• settings.focusedRowBackground#ffffff07
• settings.headerForeground#305074
• sideBar.background#ececec
• sideBar.border#ececec
• sideBar.dropBackground#fdd679
• sideBar.foreground#305074
• sideBarSectionHeader.background#ececec
• sideBarSectionHeader.border#fefdf8
• sideBarSectionHeader.foreground#305074
• sideBarTitle.foreground#305074
• sideBySideEditor.horizontalBorder#f7bf52
• sideBySideEditor.verticalBorder#f7bf52
• statusBar.background#fefdf8
• statusBar.border#fefdf8
• statusBar.debuggingBackground#fefdf8
• statusBar.debuggingBorder#fefdf8
• statusBar.debuggingForeground#305074
• statusBar.foreground#305074
• statusBar.noFolderBackground#fdd679
• statusBar.noFolderBorder#fdd679
• statusBar.noFolderForeground#305074
• statusBarItem.activeBackground#FFFFFF25
• statusBarItem.hoverBackground#fdd679
• statusBarItem.remoteBackground#fdd679
• statusBarItem.remoteForeground#305074
• tab.activeBackground#fefdf8
• tab.activeBorder#fefdf8
• tab.activeBorderTop#fefdf8
• tab.activeForeground#305074
• tab.activeModifiedBorder#f7bf52
• tab.border#fefdf8
• tab.hoverBackground#fefdf8
• tab.hoverBorder#f7bf52
• tab.hoverForeground#305074
• tab.inactiveBackground#ececec
• tab.inactiveForeground#305074
• tab.inactiveModifiedBorder#f7bf52
• tab.unfocusedActiveBackground#ececec
• tab.unfocusedActiveBorder#ececec
• tab.unfocusedActiveBorderTop#ececec
• tab.unfocusedActiveForeground#305074
• tab.unfocusedActiveModifiedBorder#f7bf52
• tab.unfocusedHoverBackground#fefdf8
• tab.unfocusedHoverBorder#f7bf52
• tab.unfocusedInactiveBackground#ececec
• tab.unfocusedInactiveForeground#305074
• tab.unfocusedInactiveModifiedBorder#f7bf52
• terminal.ansiBlack#000000
• terminal.ansiBlue#0451a5
• terminal.ansiBrightBlack#666666
• terminal.ansiBrightBlue#0451a5
• terminal.ansiBrightCyan#0598bc
• terminal.ansiBrightGreen#14ce14
• terminal.ansiBrightMagenta#bc05bc
• terminal.ansiBrightRed#cd3131
• terminal.ansiBrightWhite#a5a5a5
• terminal.ansiBrightYellow#b5ba00
• terminal.ansiCyan#0598bc
• terminal.ansiGreen#00bc00
• terminal.ansiMagenta#bc05bc
• terminal.ansiRed#cd3131
• terminal.ansiWhite#555555
• terminal.ansiYellow#949800
• terminal.border#f7bf52
• terminal.foreground#305074
• terminal.selectionBackground#fdd679
• terminalCursor.background#71afcd
• terminalCursor.foreground#305074
• textBlockQuote.background#fefdf8
• textBlockQuote.border#f7bf52
• textCodeBlock.background#fefdf8
• textLink.activeForeground#f7bf52
• textLink.foreground#78a0ac
• textPreformat.foreground#f7bf52
• titleBar.activeBackground#ececec
• titleBar.activeForeground#305074
• titleBar.border#ececec
• titleBar.inactiveBackground#ececec
• titleBar.inactiveForeground#305074
• toolbar.activeBackground#ececec
• toolbar.hoverBackground#fdd679
• tree.inactiveIndentGuidesStroke#fefdf8
• tree.indentGuidesStroke#fdd679
• tree.tableColumnsBorder#f7bf52
• tree.tableOddRowsBackground#fefdf8
• walkThrough.embeddedEditorBackground#00000050
• widget.border#f7bf52
• widget.shadow#fdd679
• window.activeBorder#f7bf52
• window.inactiveBorder#f7bf52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).