Sakai Theme
Publisher: SakaiThemes in package: 7
Best Themes for Visual Studio Code
Color themes
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.activeBorder#e0def4
- activityBar.background#1A1825
- activityBar.dropBorder#26233a
- activityBar.foreground#e0def4
- activityBar.inactiveForeground#595378
- activityBarBadge.background#FF79C6
- activityBarBadge.foreground#191724
- badge.background#FF79C6
- badge.foreground#26233a
- banner.background#1A1825
- banner.foreground#e0def4
- banner.iconForeground#908caa
- breadcrumb.activeSelectionForeground#988BC7
- breadcrumb.background#191724
- breadcrumb.focusForeground#908caa
- breadcrumb.foreground#6b579c
- breadcrumbPicker.background#1A1825
- button.background#1A1825
- button.foreground#fff
- button.hoverBackground#1A1825
- button.secondaryBackground#1A1825
- button.secondaryForeground#e0def4
- button.secondaryHoverBackground#26233a
- charts.blue#9ccfd8
- charts.foreground#e0def4
- charts.green#31748f
- charts.lines#908caa
- charts.orange#988BC7
- charts.purple#c4a7e7
- charts.red#eb6f92
- charts.yellow#f6c177
- checkbox.background#1A1825
- checkbox.border#6e6a8633
- checkbox.foreground#e0def4
- debugExceptionWidget.background#1A1825
- debugExceptionWidget.border#6e6a8633
- debugIcon.breakpointCurrentStackframeForeground#908caa
- debugIcon.breakpointDisabledForeground#908caa
- debugIcon.breakpointForeground#908caa
- debugIcon.breakpointStackframeForeground#908caa
- debugIcon.breakpointUnverifiedForeground#908caa
- debugIcon.continueForeground#908caa
- debugIcon.disconnectForeground#908caa
- debugIcon.pauseForeground#908caa
- debugIcon.restartForeground#908caa
- debugIcon.startForeground#908caa
- debugIcon.stepBackForeground#908caa
- debugIcon.stepIntoForeground#908caa
- debugIcon.stepOutForeground#908caa
- debugIcon.stepOverForeground#908caa
- debugIcon.stopForeground#eb6f92
- debugToolBar.background#1A1825
- debugToolBar.border#26233a
- descriptionForeground#908caa
- diffEditor.border#26233a
- diffEditor.diagonalFill#6e6a8666
- diffEditor.insertedLineBackground#9ccfd826
- diffEditor.insertedTextBackground#9ccfd826
- diffEditor.removedLineBackground#eb6f9226
- diffEditor.removedTextBackground#eb6f9226
- diffEditorOverview.insertedForeground#9ccfd880
- diffEditorOverview.removedForeground#eb6f9280
- dropdown.background#1A1825
- dropdown.border#6e6a8633
- dropdown.foreground#e0def4
- dropdown.listBackground#1A1825
- editor.background#191724
- editor.findMatchBackground#6e6a8666
- editor.findMatchHighlightBackground#6e6a8666
- editor.findRangeHighlightBackground#6e6a8666
- editor.findRangeHighlightBorder#0000
- editor.focusedStackFrameHighlightBackground#6e6a8633
- editor.foldBackground#1A1825
- editor.foreground#e0def4
- editor.hoverHighlightBackground#0000
- editor.inactiveSelectionBackground#6e6a861a
- editor.inlineValuesBackground#0000
- editor.inlineValuesForeground#908caa
- editor.lineHighlightBackground#6e6a861a
- editor.lineHighlightBorder#0000
- editor.linkedEditingBackground#1A1825
- editor.rangeHighlightBackground#6e6a861a
- editor.selectionBackground#6e6a8633
- editor.selectionForeground#e0def4
- editor.selectionHighlightBackground#6e6a8633
- editor.selectionHighlightBorder#191724
- editor.snippetFinalTabstopHighlightBackground#6e6a8633
- editor.snippetFinalTabstopHighlightBorder#1A1825
- editor.snippetTabstopHighlightBackground#6e6a8633
- editor.snippetTabstopHighlightBorder#1A1825
- editor.stackFrameHighlightBackground#6e6a8633
- editor.symbolHighlightBackground#6e6a8633
- editor.symbolHighlightBorder#0000
- editor.wordHighlightBackground#6e6a8633
- editor.wordHighlightBorder#0000
- editor.wordHighlightStrongBackground#6e6a8633
- editor.wordHighlightStrongBorder#6e6a8633
- editorBracketHighlight.foreground1#78D1E190
- editorBracketHighlight.foreground2#e7de7990
- editorBracketHighlight.foreground3#FF79C690
- editorBracketHighlight.foreground4#c4a7e790
- editorBracketHighlight.foreground5#E9637990
- editorBracketMatch.background#0000
- editorBracketMatch.border#908caa
- editorBracketPairGuide.activeBackground1#78D1E1
- editorBracketPairGuide.activeBackground2#E7DE79
- editorBracketPairGuide.activeBackground3#FF79C6
- editorBracketPairGuide.activeBackground4#c4a7e7
- editorBracketPairGuide.activeBackground5#E96379
- editorBracketPairGuide.background1#78D1E190
- editorBracketPairGuide.background2#E7DE7990
- editorBracketPairGuide.background3#FF79C690
- editorBracketPairGuide.background4#c4a7e790
- editorBracketPairGuide.background5#E9637990
- editorCodeLens.foreground#483C67
- editorCursor.background#e0def4
- editorCursor.foreground#6e6a86
- editorError.border#0000
- editorError.foreground#eb6f92
- editorGhostText.foreground#908caa
- editorGroup.border#0000
- editorGroup.dropBackground#1A1825
- editorGroup.emptyBackground#0000
- editorGroup.focusedEmptyBorder#0000
- editorGroupHeader.noTabsBackground#0000
- editorGroupHeader.tabsBackground#0000
- editorGroupHeader.tabsBorder#0000
- editorGutter.addedBackground#9ccfd8
- editorGutter.background#191724
- editorGutter.commentRangeForeground#908caa
- editorGutter.deletedBackground#eb6f92
- editorGutter.foldingControlForeground#c4a7e7
- editorGutter.modifiedBackground#988BC7
- editorHint.border#0000
- editorHint.foreground#908caa
- editorHoverWidget.background#1A1825
- editorHoverWidget.border#524571
- editorHoverWidget.foreground#ffffff
- editorHoverWidget.highlightForeground#e0def4
- editorHoverWidget.statusBarBackground#0000
- editorIndentGuide.activeBackground#6e6a86
- editorIndentGuide.background#6e6a8666
- editorInfo.border#26233a
- editorInfo.foreground#9ccfd8
- editorInlayHint.background#26233a
- editorInlayHint.foreground#908caa
- editorInlayHint.parameterBackground#26233a
- editorInlayHint.parameterForeground#c4a7e7
- editorInlayHint.typeBackground#26233a
- editorInlayHint.typeForeground#9ccfd8
- editorLightBulb.foreground#31748f
- editorLightBulbAutoFix.foreground#988BC7
- editorLineNumber.activeForeground#e0def4
- editorLineNumber.foreground#6d5c97
- editorLink.activeForeground#988bc7
- editorMarkerNavigation.background#1A1825
- editorMarkerNavigationError.background#1A1825
- editorMarkerNavigationInfo.background#1A1825
- editorMarkerNavigationWarning.background#1A1825
- editorOverviewRuler.addedForeground#9ccfd880
- editorOverviewRuler.background#191724
- editorOverviewRuler.border#6e6a8666
- editorOverviewRuler.bracketMatchForeground#908caa
- editorOverviewRuler.commonContentForeground#6e6a861a
- editorOverviewRuler.currentContentForeground#6e6a8633
- editorOverviewRuler.deletedForeground#eb6f9280
- editorOverviewRuler.errorForeground#eb6f9280
- editorOverviewRuler.findMatchForeground#6e6a8666
- editorOverviewRuler.incomingContentForeground#c4a7e780
- editorOverviewRuler.infoForeground#9ccfd880
- editorOverviewRuler.modifiedForeground#988BC780
- editorOverviewRuler.rangeHighlightForeground#6e6a8666
- editorOverviewRuler.selectionHighlightForeground#6e6a8666
- editorOverviewRuler.warningForeground#f6c17780
- editorOverviewRuler.wordHighlightForeground#6e6a8633
- editorOverviewRuler.wordHighlightStrongForeground#6e6a8666
- editorPane.background#0000
- editorRuler.foreground#6e6a8666
- editorSuggestWidget.background#1A1825
- editorSuggestWidget.border#0000
- editorSuggestWidget.focusHighlightForeground#988BC7
- editorSuggestWidget.foreground#908caa
- editorSuggestWidget.highlightForeground#988BC7
- editorSuggestWidget.selectedBackground#6e6a8633
- editorSuggestWidget.selectedForeground#e0def4
- editorSuggestWidget.selectedIconForeground#e0def4
- editorUnnecessaryCode.border#0000
- editorUnnecessaryCode.opacity#00000080
- editorWarning.border#0000
- editorWarning.foreground#f6c177
- editorWhitespace.foreground#6e6a86
- editorWidget.background#1A1825
- editorWidget.border#26233a
- editorWidget.foreground#908caa
- editorWidget.resizeBorder#6e6a86
- errorForeground#eb6f92
- extensionBadge.remoteBackground#c4a7e7
- extensionBadge.remoteForeground#191724
- extensionButton.prominentBackground#1A1825
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#1A1825e6
- extensionIcon.preReleaseForeground#31748f
- extensionIcon.starForeground#988BC7
- extensionIcon.verifiedForeground#c4a7e7
- focusBorder#1A1825
- foreground#e0def4
- gitDecoration.addedResourceForeground#7a6aa1
- gitDecoration.conflictingResourceForeground#422429
- gitDecoration.deletedResourceForeground#E96379
- gitDecoration.ignoredResourceForeground#514572
- gitDecoration.modifiedResourceForeground#998bc7
- gitDecoration.renamedResourceForeground#7a6aa1
- gitDecoration.stageDeletedResourceForeground#E96379
- gitDecoration.stageModifiedResourceForeground#E89E64
- gitDecoration.submoduleResourceForeground#f6c177
- gitDecoration.untrackedResourceForeground#67E480
- icon.foreground#e0def4
- input.background#26233a80
- input.border#6e6a8633
- input.foreground#e0def4
- input.placeholderForeground#908caa
- inputOption.activeBackground#988BC726
- inputOption.activeForeground#988BC7
- inputValidation.errorBackground#1A1825
- inputValidation.errorBorder#6e6a8666
- inputValidation.errorForeground#eb6f92
- inputValidation.infoBackground#1A1825
- inputValidation.infoBorder#6e6a8666
- inputValidation.infoForeground#9ccfd8
- inputValidation.warningBackground#1A1825
- inputValidation.warningBorder#6e6a8666
- inputValidation.warningForeground#9ccfd880
- keybindingLabel.background#26233a
- keybindingLabel.border#6e6a8666
- keybindingLabel.bottomBorder#6e6a8666
- keybindingLabel.foreground#c4a7e7
- keybindingTable.headerBackground#26233a
- keybindingTable.rowsBackground#1A1825
- list.activeSelectionBackground#6e6a8633
- list.activeSelectionForeground#e0def4
- list.deemphasizedForeground#908caa
- list.dropBackground#1A1825
- list.errorForeground#eb6f92
- list.filterMatchBackground#1A1825
- list.filterMatchBorder#988BC7
- list.focusBackground#1f1e2b
- list.focusForeground#e0def4
- list.focusOutline#0000
- list.highlightForeground#988BC7
- list.hoverBackground#1f1e2b
- list.hoverForeground#e0def4
- list.inactiveFocusBackground#1A1825
- list.inactiveSelectionBackground#1A1825
- list.inactiveSelectionForeground#e0def4
- list.invalidItemForeground#eb6f92
- list.warningForeground#f6c177
- listFilterWidget.background#1A1825
- listFilterWidget.noMatchesOutline#eb6f92
- listFilterWidget.outline#26233a
- menu.background#1A1825
- menu.border#6e6a861a
- menu.foreground#e0def4
- menu.selectionBackground#6e6a8633
- menu.selectionBorder#26233a
- menu.selectionForeground#e0def4
- menu.separatorBackground#6e6a8666
- menubar.selectionBackground#6e6a8633
- menubar.selectionBorder#6e6a861a
- menubar.selectionForeground#e0def4
- merge.border#26233a
- merge.commonContentBackground#6e6a8633
- merge.commonHeaderBackground#6e6a8633
- merge.currentContentBackground#f6c17780
- merge.currentHeaderBackground#f6c17780
- merge.incomingContentBackground#9ccfd880
- merge.incomingHeaderBackground#9ccfd880
- minimap.background#1A1825
- minimap.errorHighlight#eb6f9280
- minimap.findMatchHighlight#6e6a8633
- minimap.selectionHighlight#6e6a8633
- minimap.warningHighlight#f6c17780
- minimapGutter.addedBackground#9ccfd8
- minimapGutter.deletedBackground#eb6f92
- minimapGutter.modifiedBackground#988BC7
- minimapSlider.activeBackground#6e6a8666
- minimapSlider.background#6e6a8633
- minimapSlider.hoverBackground#6e6a8633
- notebook.cellBorderColor#9ccfd880
- notebook.cellEditorBackground#1A1825
- notebook.cellHoverBackground#26233a80
- notebook.focusedCellBackground#6e6a861a
- notebook.focusedCellBorder#9ccfd8
- notebook.outputContainerBackgroundColor#6e6a861a
- notificationCenter.border#6e6a8633
- notificationCenterHeader.background#16151e
- notificationCenterHeader.foreground#e0def4
- notificationLink.foreground#c4a7e7
- notifications.background#1f1e2b
- notifications.border#6e6a8633
- notifications.foreground#e0def4
- notificationsErrorIcon.foreground#eb6f92
- notificationsInfoIcon.foreground#9ccfd8
- notificationsWarningIcon.foreground#f6c177
- notificationToast.border#6e6a8633
- panel.background#1A1825
- panel.border#0000
- panel.dropBorder#26233a
- panelInput.border#1A1825
- panelSection.dropBackground#6e6a8633
- panelSectionHeader.background#1A1825
- panelSectionHeader.foreground#e0def4
- panelTitle.activeBorder#6e6a8666
- panelTitle.activeForeground#e0def4
- panelTitle.inactiveForeground#908caa
- peekView.border#26233a
- peekViewEditor.background#1A1825
- peekViewEditor.matchHighlightBackground#6e6a8666
- peekViewResult.background#1A1825
- peekViewResult.fileForeground#908caa
- peekViewResult.lineForeground#908caa
- peekViewResult.matchHighlightBackground#6e6a8666
- peekViewResult.selectionBackground#6e6a8633
- peekViewResult.selectionForeground#e0def4
- peekViewTitle.background#26233a
- peekViewTitleDescription.foreground#908caa
- pickerGroup.border#6e6a8666
- pickerGroup.foreground#c4a7e7
- ports.iconRunningProcessForeground#988BC7
- problemsErrorIcon.foreground#eb6f92
- problemsInfoIcon.foreground#9ccfd8
- problemsWarningIcon.foreground#f6c177
- progressBar.background#988BC7
- quickInput.background#1A1825
- quickInput.foreground#908caa
- quickInputList.focusBackground#1f1d2533
- quickInputList.focusForeground#e0def4
- quickInputList.focusIconForeground#e0def4
- scrollbar.shadow#0101011a
- scrollbarSlider.activeBackground#31748f80
- scrollbarSlider.background#6e6a8633
- scrollbarSlider.hoverBackground#6e6a8666
- searchEditor.findMatchBackground#6e6a8633
- selection.background#6e6a8666
- settings.focusedRowBackground#1A1825
- settings.focusedRowBorder#6e6a8633
- settings.headerForeground#e0def4
- settings.modifiedItemIndicator#988BC7
- settings.rowHoverBackground#1A1825
- sideBar.background#16151e
- sideBar.dropBackground#1A1825
- sideBar.foreground#ffffff
- sideBarSectionHeader.background#191726
- sideBarSectionHeader.border#0000
- statusBar.background#191622
- statusBar.debuggingBackground#c4a7e7
- statusBar.debuggingForeground#191724
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#191724
- statusBar.noFolderForeground#908caa
- statusBarItem.activeBackground#6e6a8666
- statusBarItem.errorBackground#191724
- statusBarItem.errorForeground#eb6f92
- statusBarItem.hoverBackground#6e6a8633
- statusBarItem.prominentBackground#26233a
- statusBarItem.prominentForeground#e0def4
- statusBarItem.prominentHoverBackground#6e6a8633
- statusBarItem.remoteBackground#6e6a8633
- statusBarItem.remoteForeground#f6c177
- symbolIcon.arrayForeground#191724
- symbolIcon.classForeground#908caa
- symbolIcon.colorForeground#908caa
- symbolIcon.constantForeground#908caa
- symbolIcon.constructorForeground#908caa
- symbolIcon.enumeratorForeground#908caa
- symbolIcon.enumeratorMemberForeground#908caa
- symbolIcon.eventForeground#908caa
- symbolIcon.fieldForeground#908caa
- symbolIcon.fileForeground#908caa
- symbolIcon.folderForeground#908caa
- symbolIcon.functionForeground#908caa
- symbolIcon.interfaceForeground#908caa
- symbolIcon.keyForeground#908caa
- symbolIcon.keywordForeground#908caa
- symbolIcon.methodForeground#908caa
- symbolIcon.moduleForeground#908caa
- symbolIcon.namespaceForeground#908caa
- symbolIcon.nullForeground#908caa
- symbolIcon.numberForeground#908caa
- symbolIcon.objectForeground#908caa
- symbolIcon.operatorForeground#908caa
- symbolIcon.packageForeground#908caa
- symbolIcon.propertyForeground#908caa
- symbolIcon.referenceForeground#908caa
- symbolIcon.snippetForeground#908caa
- symbolIcon.stringForeground#908caa
- symbolIcon.structForeground#908caa
- symbolIcon.textForeground#908caa
- symbolIcon.typeParameterForeground#908caa
- symbolIcon.unitForeground#908caa
- symbolIcon.variableForeground#d9d8de
- tab.activeBackground#6e6a861a
- tab.activeBorderTop#FF79C680
- tab.activeForeground#ffffff
- tab.activeModifiedBorder#9ccfd8
- tab.hoverBackground#6e6a8633
- tab.inactiveBackground#0000
- tab.inactiveForeground#c4a7e7
- tab.inactiveModifiedBorder#9ccfd880
- tab.lastPinnedBorder#6e6a86
- tab.unfocusedActiveBackground#0000
- tab.unfocusedHoverBackground#0000
- tab.unfocusedInactiveBackground#0000
- tab.unfocusedInactiveModifiedBorder#9ccfd880
- terminal.ansiBlack#26233a
- terminal.ansiBlue#9ccfd8
- terminal.ansiBrightBlack#908caa
- terminal.ansiBrightBlue#c4a7e7
- terminal.ansiBrightCyan#c4a7e7
- terminal.ansiBrightGreen#9ccfd8
- terminal.ansiBrightMagenta#c4a7e7
- terminal.ansiBrightRed#eb6f92
- terminal.ansiBrightWhite#e0def4
- terminal.ansiBrightYellow#31748f
- terminal.ansiCyan#988BC7
- terminal.ansiGreen#31748f
- terminal.ansiMagenta#c4a7e7
- terminal.ansiRed#eb6f92
- terminal.ansiWhite#e0def4
- terminal.ansiYellow#f6c177
- terminal.dropBackground#6e6a8633
- terminal.foreground#e0def4
- terminal.selectionBackground#6e6a8633
- terminal.tab.activeBorder#e0def4
- terminalCursor.background#e0def4
- terminalCursor.foreground#6e6a86
- textBlockQuote.background#1A1825
- textBlockQuote.border#6e6a8633
- textCodeBlock.background#1A1825
- textLink.activeForeground#c4a7e7e6
- textLink.foreground#c4a7e7
- textPreformat.foreground#f6c177
- textSeparator.foreground#908caa
- titleBar.activeBackground#191724
- titleBar.activeForeground#ffffff
- titleBar.inactiveBackground#191724
- titleBar.inactiveForeground#ffffff
- toolbar.activeBackground#6e6a8666
- toolbar.hoverBackground#6e6a8633
- tree.indentGuidesStroke#575279
- walkThrough.embeddedEditorBackground#191724
- welcomePage.background#191724
- welcomePage.buttonBackground#1A1825
- welcomePage.buttonHoverBackground#26233a
- widget.shadow#0101011a
- window.activeBorder#1A1825
- window.inactiveBorder#1A1825
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #5A4B81 | italic |
| constant | #31748f | — |
| constant.numeric, constant.language | #9ccfd8 | — |
| entity.name | #c4a7e7 | — |
| entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type | #988BC7 | — |
| entity.other.attribute-name, entity.other.inherited-class | #c4a7e7 | italic |
| invalid | #eb6f92 | — |
| invalid.deprecated | #908caa | — |
| keyword | #FF79C6 | — |
| markup.inserted.diff | #9ccfd8 | — |
| markup.deleted.diff | #eb6f92 | — |
| meta.diff.range | #c4a7e7 | — |
| meta.tag, meta.brace | #e0def4 | — |
| meta.import, meta.export | #31748f | — |
| meta.directive.vue | #c4a7e7 | italic |
| meta.property-name.css | #9ccfd8 | — |
| meta.property-value.css | #E7DE79 | — |
| meta.tag.other.html | #908caa | — |
| punctuation | #6d5f91 | — |
| punctuation.accessor | #31748f | — |
| punctuation.definition.string | #E7DE79 | — |
| punctuation.definition.tag | #e0def4 | — |
| storage.type | #FF79C6 | — |
| storage.modifier | #FF79C6 | — |
| string | #E7DE79 | — |
| support | #988BC7 | — |
| support.constant | #78D1E1 | — |
| support.function | #eb6f92 | italic |
| variable | #988BC7 | italic |
| variable.other, variable.language, variable.function, variable.argument | #ffffff | — |
| variable.parameter | #d8a075 | — |