ohohama

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#151c24
• activityBar.border#9db7ff
• activityBar.foreground#ebf1fc
• activityBar.inactiveForeground#717881
• activityBarBadge.background#009ebd
• activityBarBadge.foreground#dce3ee
• activityErrorBadge.background#003f61
• activityErrorBadge.foreground#dce3ee
• activityWarningBadge.background#006496
• activityWarningBadge.foreground#dce3ee
• button.background#00bbdf
• button.border#00000000
• button.foreground#dce3ee
• button.hoverBackground#5174c84D
• button.secondaryBackground#009ebd
• button.secondaryBorder#00000000
• button.secondaryForeground#dce3ee
• button.secondaryHoverBackground#5174c84D
• button.separator#dce3ee
• contrastBorder#00000000
• debugIcon.breakpointForeground#005784
• diffEditor.border#00000000
• diffEditor.diagonalFill#5174c84D
• diffEditor.insertedLineBackground#0B8BEE80
• diffEditor.insertedTextBackground#0B8BEE80
• diffEditor.insertedTextBorder#00000000
• diffEditor.move.border#5174c84D
• diffEditor.moveActive.border#00000000
• diffEditor.removedLineBackground#4c535c80
• diffEditor.removedTextBackground#4c535c80
• diffEditor.removedTextBorder#00000000
• diffEditor.unchangedCodeBackground#5174c84D
• diffEditor.unchangedRegionBackground#5174c84D
• diffEditor.unchangedRegionForeground#dce3ee
• diffEditor.unchangedRegionShadow#00000000
• diffEditorGutter.insertedLineBackground#0B8BEE80
• diffEditorGutter.removedLineBackground#4c535c80
• diffEditorOverview.insertedForeground#0B8BEE80
• diffEditorOverview.removedForeground#4c535c80
• editor.background#151c24
• editor.findMatchBackground#353c44
• editor.findMatchBorder#9db7ff
• editor.findMatchForeground#00bbdf
• editor.findMatchHighlightBackground#353c44
• editor.findMatchHighlightBorder#9db7ff
• editor.findMatchHighlightForeground#00bbdf
• editor.findRangeHighlightBackground#353c44
• editor.findRangeHighlightBorder#9db7ff
• editor.foreground#dce3ee
• editor.lineHighlightBackground#ebf1fc1A
• editor.lineHighlightBorder#00000000
• editor.selectionBackground#00bbdf
• editor.selectionForeground#00bbdf
• editorError.background#151c24
• editorError.border#00000000
• editorError.foreground#003f61
• editorGutter.addedBackground#0B8BEE80
• editorGutter.addedSecondaryBackground#0B8BEE80
• editorGutter.background#151c24
• editorGutter.commentDraftGlyphForeground#0070a9
• editorGutter.commentGlyphForeground#0070a9
• editorGutter.commentRangeForeground#0070a9
• editorGutter.commentUnresolvedGlyphForeground#0070a9
• editorGutter.deletedBackground#4c535c80
• editorGutter.deletedSecondaryBackground#4c535c80
• editorGutter.foldingControlForeground#353c44
• editorGutter.itemBackground#009ebd
• editorGutter.itemGlyphForeground#009ebd
• editorGutter.modifiedBackground#006496CC
• editorGutter.modifiedSecondaryBackground#006496CC
• editorHoverWidget.background#003350
• editorInfo.background#00000000
• editorInfo.border#00000000
• editorInfo.foreground#009ebd
• editorLightBulb.foreground#009ebd
• editorLightBulbAi.foreground#009ebd
• editorLightBulbAutoFix.foreground#009ebd
• editorLineNumber.activeForeground#00bbdf
• editorLineNumber.foreground#dce3ee
• editorOverviewRuler.addedForeground#0B8BEE80
• editorOverviewRuler.background#151c24
• editorOverviewRuler.border#00000000
• editorOverviewRuler.bracketMatchForeground#003f614D
• editorOverviewRuler.commentDraftForeground#0070a9
• editorOverviewRuler.commentForeground#0070a9
• editorOverviewRuler.commentUnresolvedForeground#0070a9
• editorOverviewRuler.commonContentForeground#dce3ee
• editorOverviewRuler.currentContentForeground#dce3ee
• editorOverviewRuler.deletedForeground#4c535c80
• editorOverviewRuler.errorForeground#003f61
• editorOverviewRuler.findMatchForeground#003f614D
• editorOverviewRuler.incomingContentForeground#0B8BEE
• editorOverviewRuler.infoForeground#009ebd
• editorOverviewRuler.inlineChatInserted#0B8BEE80
• editorOverviewRuler.inlineChatRemoved#4c535c80
• editorOverviewRuler.modifiedForeground#006496CC
• editorOverviewRuler.rangeHighlightForeground#353c44
• editorOverviewRuler.selectionHighlightForeground#ebf1fc1A
• editorOverviewRuler.warningForeground#006496
• editorOverviewRuler.wordHighlightForeground#353c44
• editorOverviewRuler.wordHighlightStrongForeground#00bbdf
• editorOverviewRuler.wordHighlightTextForeground#00bbdf
• editorStickyScroll.background#717881CC
• editorWarning.background#151c24
• editorWarning.border#00000000
• editorWarning.foreground#006496
• editorWidget.foreground#717881
• errorForeground#003f61
• extensionBadge.remoteBackground#151c24
• extensionBadge.remoteForeground#009ebd
• extensionButton.background#151c24
• extensionButton.border#00000000
• extensionButton.foreground#009ebd
• extensionButton.hoverBackground#151c24
• extensionButton.prominentBackground#151c24
• extensionButton.prominentForeground#009ebd
• extensionButton.prominentHoverBackground#151c24
• extensionButton.separator#9db7ff
• extensionIcon.preReleaseForeground#009ebd
• extensionIcon.privateForeground#009ebd
• extensionIcon.sponsorForeground#009ebd
• extensionIcon.starForeground#009ebd
• extensionIcon.verifiedForeground#009ebd
• focusBorder#00000000
• gauge.background#151c24
• gauge.errorForeground#003f61
• gitDecoration.addedResourceForeground#0B8BEE80
• gitDecoration.deletedResourceForeground#4c535c80
• gitDecoration.modifiedResourceForeground#006496CC
• gitDecoration.untrackedResourceForeground#4c535c80
• icon.foreground#dce3ee
• inlineChat.background#151c24
• inlineChat.border#9db7ff
• inlineChat.foreground#dce3ee
• inlineChat.shadow#2a31394D
• inlineChatDiff.inserted#0B8BEE80
• inlineChatDiff.removed#4c535c80
• inlineChatInput.background#151c24
• inlineChatInput.border#9db7ff
• inlineChatInput.focusBorder#9db7ff
• inlineChatInput.placeholderForeground#1f262e
• inlineEdit.gutterIndicator.background#151c24
• inlineEdit.gutterIndicator.primaryBackground#00bbdf
• inlineEdit.gutterIndicator.primaryBorder#00000000
• inlineEdit.gutterIndicator.primaryForeground#dce3ee
• inlineEdit.gutterIndicator.secondaryBackground#151c24
• inlineEdit.gutterIndicator.secondaryBorder#00000000
• inlineEdit.gutterIndicator.secondaryForeground#dce3ee
• inlineEdit.gutterIndicator.successfulBackground#00a6f7
• inlineEdit.gutterIndicator.successfulBorder#00000000
• inlineEdit.gutterIndicator.successfulForeground#dce3ee
• inlineEdit.modifiedBackground#006496CC
• inlineEdit.modifiedBorder#00000000
• inlineEdit.modifiedChangedLineBackground#006496CC
• inlineEdit.modifiedChangedTextBackground#006496CC
• inlineEdit.originalBackground#151c24
• inlineEdit.originalBorder#00000000
• inlineEdit.originalChangedLineBackground#006496CC
• inlineEdit.originalChangedTextBackground#006496CC
• inlineEdit.tabWillAcceptModifiedBorder#006496CC
• inlineEdit.tabWillAcceptOriginalBorder#006496CC
• input.background#585f6866
• input.border#00000000
• input.foreground#dce3ee
• input.placeholderForeground#1f262e
• keybindingLabel.border#717881
• keybindingLabel.bottomBorder#717881
• keybindingLabel.foreground#717881
• list.activeSelectionBackground#ebf1fc1A
• list.activeSelectionForeground#ebf1fc
• list.errorForeground#003f61
• list.highlightForeground#00bbdf
• list.hoverBackground#5174c84D
• list.hoverForeground#dce3ee
• list.inactiveSelectionBackground#ebf1fc1A
• list.inactiveSelectionForeground#717881
• list.warningForeground#006496
• menu.background#151c24
• menu.foreground#717881
• menu.selectionBackground#ebf1fc1A
• menu.selectionForeground#ebf1fc
• menu.separatorBackground#9db7ff
• menubar.selectionBackground#ebf1fc1A
• menubar.selectionBorder#9db7ff
• menubar.selectionForeground#dce3ee
• minimap.background#151c24
• minimap.chatEditHighlight#009ebd
• minimap.errorHighlight#003f61
• minimap.findMatchHighlight#00bbdf
• minimap.foregroundOpacity#5174c84D
• minimap.infoHighlight#009ebd
• minimap.selectionHighlight#00bbdf
• minimap.selectionOccurrenceHighlight#009ebd
• minimap.warningHighlight#006496
• minimapGutter.addedBackground#0B8BEE80
• minimapGutter.deletedBackground#4c535c80
• minimapGutter.modifiedBackground#006496CC
• minimapSlider.activeBackground#ebf1fc
• minimapSlider.background#00677c4D
• minimapSlider.hoverBackground#5174c84D
• panelSection.border#00000000
• panelSectionHeader.background#151c24
• panelSectionHeader.foreground#00bbdf
• panelStickyScroll.background#00000000
• panelStickyScroll.border#00bbdf
• panelStickyScroll.shadow#00000000
• panelTitle.activeForeground#ebf1fc
• panelTitle.inactiveForeground#717881
• scmGraph.foreground1#001221
• scmGraph.foreground2#001e31
• scmGraph.foreground3#002840
• scmGraph.foreground4#003350
• scmGraph.foreground5#003f61
• scmGraph.historyItemBaseRefColor#dce3ee
• scmGraph.historyItemHoverAdditionsForeground#0B8BEE80
• scmGraph.historyItemHoverDefaultLabelBackground#5174c84D
• scmGraph.historyItemHoverDefaultLabelForeground#00bbdf
• scmGraph.historyItemHoverDeletionsForeground#4c535c80
• scmGraph.historyItemHoverLabelForeground#dce3ee
• scmGraph.historyItemRefColor#0B8BEE
• scmGraph.historyItemRemoteRefColor#00205B
• scrollbar.background#151c24
• scrollbarSlider.background#00677c4D
• scrollbarSlider.hoverBackground#5174c84D
• sideBar.background#151c24
• sideBar.dropBackground#3F3F3F
• sideBar.foreground#dce3ee
• sideBarSectionHeader.background#353c44
• sideBarSectionHeader.foreground#dce3ee
• sideBarStickyScroll.background#717881CC
• sideBarStickyScroll.border#9db7ff
• sideBarStickyScroll.shadow#2a31394D
• sideBarTitle.background#151c24
• sideBarTitle.foreground#dce3ee
• statusBar.background#00bbdf
• statusBar.border#00000000
• statusBar.debuggingBackground#00205B
• statusBar.debuggingBorder#00000000
• statusBar.focusBorder#00000000
• statusBar.noFolderBackground#353c44
• statusBar.noFolderBorder#00000000
• tab.activeBackground#151c24
• tab.activeBorder#00bbdf
• tab.activeBorderTop#00000000
• tab.activeForeground#dce3ee
• tab.activeModifiedBorder#00000000
• tab.hoverBackground#5174c84D
• tab.hoverBorder#9db7ff
• tab.hoverForeground#dce3ee
• tab.inactiveBackground#151c24
• tab.unfocusedInactiveBackground#151c24
• terminal.ansiBlack#080D10
• terminal.ansiBlue#00205B
• terminal.ansiBrightBlack#4c535c
• terminal.ansiBrightBlue#0B8BEE
• terminal.ansiBrightCyan#00829c
• terminal.ansiBrightGreen#0090ac
• terminal.ansiBrightMagenta#009ebd
• terminal.ansiBrightRed#00acce
• terminal.ansiBrightWhite#151c24
• terminal.ansiBrightYellow#00bbdf
• terminal.ansiCyan#007ebc
• terminal.ansiGreen#008bcf
• terminal.ansiMagenta#0098e3
• terminal.ansiRed#00a6f7
• terminal.ansiWhite#E6EDF9
• terminal.ansiYellow#41b3ff
• terminal.background#151c24
• terminal.foreground#dce3ee
• titleBar.activeBackground#151c24
• titleBar.activeForeground#ebf1fc
• titleBar.inactiveBackground#151c24
• titleBar.inactiveForeground#717881
• toolbar.activeBackground#ebf1fc
• toolbar.hoverBackground#5174c84D
• toolbar.hoverOutline#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).