Blue Green Theme (Dark)
Publisher: BrantThemes in package: 1
Simple dark theme with blue and green accents.
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#00ccff
- activityBar.background#181818
- activityBar.border#00ccff
- activityBar.foreground#00ff2a
- activityBar.inactiveForeground#00ccff
- activityBarBadge.background#00ff2a
- activityBarBadge.foreground#181818
- breadcrumb.activeSelectionForeground#00ff2a
- breadcrumb.background#181818
- breadcrumb.focusForeground#00ff2a
- breadcrumb.foreground#00ccff
- breadcrumbPicker.background#00ccff
- button.background#00ccff
- button.foreground#181818
- button.hoverBackground#00ff2a
- debugExceptionWidget.background#00ccff
- debugExceptionWidget.border#000000
- debugIcon.breakpointCurrentStackframeForeground#00ccff
- debugIcon.breakpointDisabledForeground#00ff2a
- debugIcon.continueForeground#00ccff
- debugIcon.disconnectForeground#00ccff
- debugIcon.pauseForeground#00ccff
- debugIcon.restartForeground#00ccff
- debugIcon.startForeground#00ccff
- debugIcon.stepBackForeground#00ccff
- debugIcon.stepIntoForeground#00ccff
- debugIcon.stepOutForeground#00ccff
- debugIcon.stepOverForeground#00ccff
- debugIcon.stopForeground#00ccff
- debugToolBar.background#181818
- debugToolBar.border#00ccff
- descriptionForeground#00ccff
- dropdown.background#008cff
- dropdown.border#181818
- dropdown.foreground#181818
- dropdown.listBackground#008cff
- editor.background#181818
- editor.findMatchBackground#181818
- editor.findMatchBorder#00ff2a
- editor.findMatchHighlightBackground#181818
- editor.findMatchHighlightBorder#00ccff
- editor.foreground#ffffff
- editor.hoverHighlightBackground#181818
- editor.inactiveSelectionBackground#3a3d41
- editor.lineHighlightBackground#181818
- editor.lineHighlightBorder#00ccff
- editor.selectionHighlightBackground#181818
- editor.selectionHighlightBorder#00ff2a
- editor.stackFrameHighlightBackground#181818
- editor.symbolHighlightBackground#181818
- editor.symbolHighlightBorder#00ccff
- editor.wordHighlightBackground#181818
- editor.wordHighlightBorder#00ccff
- editor.wordHighlightStrongBackground#181818
- editor.wordHighlightStrongBorder#00ccff
- editorBracketMatch.background#181818
- editorBracketMatch.border#00ccff
- editorCodeLens.foreground#00ccff
- editorCursor.foreground#00ff2a
- editorError.border#ff9837
- editorError.foreground#181818
- editorGroup.border#00ccff
- editorGroup.dropBackground#00ccff
- editorGroup.emptyBackground#181818
- editorGroup.focusedEmptyBorder#00ccff
- editorGroupHeader.border#00ccff
- editorGroupHeader.tabsBackground#181818
- editorGroupHeader.tabsBorder#00ccff
- editorGutter.addedBackground#181818
- editorGutter.background#181818
- editorGutter.commentRangeForeground#9b9b9b
- editorGutter.deletedBackground#181818
- editorGutter.foldingControlForeground#00ccff
- editorGutter.modifiedBackground#181818
- editorHint.border#00ff21
- editorHint.foreground#00ff2a
- editorHoverWidget.background#00ccff
- editorHoverWidget.border#181818
- editorHoverWidget.foreground#181818
- editorHoverWidget.statusBarBackground#181818
- editorIndentGuide.activeBackground#00ccff
- editorIndentGuide.background#181818
- editorInfo.border#00ff2a
- editorInfo.foreground#00ccff
- editorLineNumber.activeForeground#00ccff
- editorLineNumber.foreground#00ccff
- editorLink.activeForeground#00ff2a
- editorMarkerNavigation.background#00ccff
- editorMarkerNavigationError.background#00ccff
- editorMarkerNavigationInfo.background#00ccff
- editorMarkerNavigationWarning.background#00ccff
- editorPane.background#00ccff
- editorSuggestWidget.background#00ccff
- editorSuggestWidget.border#00ccff
- editorSuggestWidget.foreground#181818
- editorSuggestWidget.highlightForeground#181818
- editorSuggestWidget.selectedBackground#00ff2a
- editorWidget.background#00ccff
- editorWidget.border#181818
- editorWidget.foreground#181818
- editorWidget.resizeBorder#181818
- extensionBadge.remoteBackground#00ff2a
- extensionBadge.remoteForeground#181818
- extensionButton.prominentBackground#00ff2a
- extensionButton.prominentForeground#181818
- extensionButton.prominentHoverBackground#00ff2a
- input.background#181818
- input.border#181818
- input.foreground#00ccff
- input.placeholderForeground#00ccff
- list.activeSelectionBackground#00ff2a
- list.activeSelectionForeground#181818
- list.dropBackground#00ccff
- list.errorForeground#ff9837
- list.hoverBackground#00ccff
- list.hoverForeground#181818
- menu.background#00ccff
- menu.border#181818
- menu.foreground#181818
- menu.selectionBackground#181818
- menu.selectionBorder#00ff2a
- menu.selectionForeground#00ccff
- menu.separatorBackground#181818
- menubar.selectionBackground#181818
- menubar.selectionBorder#00ff2a
- menubar.selectionForeground#00ccff
- notificationCenter.border#181818
- notificationCenterHeader.background#181818
- notificationCenterHeader.foreground#00ccff
- notificationLink.foreground#ff9837
- notifications.background#00ccff
- notifications.border#00ccff
- notifications.foreground#181818
- notificationsErrorIcon.foreground#ff9837
- notificationsInfoIcon.foreground#00ff2a
- notificationsWarningIcon.foreground#ff9837
- notificationToast.border#00ccff
- panel.background#181818
- panel.border#00ccff
- panel.dropBackground#00ccff
- panelInput.border#00ccff
- panelTitle.activeBorder#b6ced4
- panelTitle.activeForeground#00ccff
- panelTitle.inactiveForeground#008cff
- peekView.border#00ccff
- peekViewEditor.background#181818
- peekViewEditorGutter.background#181818
- peekViewResult.background#181818
- peekViewResult.fileForeground#00ccff
- peekViewResult.lineForeground#00ccff
- peekViewResult.selectionBackground#00ccff
- peekViewResult.selectionForeground#181818
- peekViewTitle.background#00ccff
- peekViewTitleDescription.foreground#181818
- peekViewTitleLabel.foreground#181818
- problemsErrorIcon.foreground#ff9837
- problemsInfoIcon.foreground#ff9837
- problemsWarningIcon.foreground#ff9837
- progressBar.background#00ff2a
- quickInput.background#181818
- quickInput.foreground#00ccff
- quickInputTitle.background#181818
- scrollbarSlider.activeBackground#00ccff
- scrollbarSlider.background#00ccff
- scrollbarSlider.hoverBackground#00ccff
- searchEditor.textInputBorder#00ccff
- selection.background#00ff2a
- settings.checkboxBackground#00ccff
- settings.checkboxBorder#181818
- settings.checkboxForeground#181818
- settings.dropdownBackground#008cff
- settings.dropdownBorder#181818
- settings.dropdownForeground#181818
- settings.dropdownListBorder#181818
- settings.headerForeground#00ccff
- settings.numberInputBackground#00ccff
- settings.numberInputBorder#181818
- settings.numberInputForeground#181818
- settings.textInputBackground#00ccff
- settings.textInputBorder#181818
- settings.textInputForeground#181818
- sideBar.background#181818
- sideBar.border#00ccff
- sideBar.foreground#00ccff
- sideBarSectionHeader.background#00ccff
- sideBarSectionHeader.border#181818
- sideBarSectionHeader.foreground#181818
- sideBarTitle.foreground#00ccff
- statusBar.background#00ccff
- statusBar.border#181818
- statusBar.debuggingBackground#00ccff
- statusBar.debuggingBorder#181818
- statusBar.debuggingForeground#181818
- statusBar.foreground#181818
- statusBar.noFolderBackground#00ccff
- statusBar.noFolderBorder#181818
- statusBar.noFolderForeground#181818
- statusBarItem.activeBackground#00ff2a
- statusBarItem.hoverBackground#00ff2a
- statusBarItem.remoteBackground#16825d
- statusBarItem.remoteForeground#ffffff
- tab.activeBackground#00ccff
- tab.activeBorder#181818
- tab.activeForeground#181818
- tab.border#181818
- tab.hoverBackground#00ff2a
- tab.hoverBorder#181818
- tab.hoverForeground#181818
- tab.inactiveBackground#181818
- tab.inactiveForeground#00ccff
- terminal.ansiBlack#00ccff
- terminal.ansiBlue#00ccff
- terminal.ansiBrightBlack#00ccff
- terminal.ansiBrightBlue#00ccff
- terminal.ansiBrightCyan#00ccff
- terminal.ansiBrightGreen#00ccff
- terminal.ansiBrightMagenta#00ccff
- terminal.ansiBrightRed#00ccff
- terminal.ansiBrightWhite#00ccff
- terminal.ansiBrightYellow#00ccff
- terminal.ansiCyan#00ccff
- terminal.ansiGreen#00ccff
- terminal.ansiMagenta#00ccff
- terminal.ansiRed#00ccff
- terminal.ansiWhite#00ccff
- terminal.ansiYellow#00ccff
- terminal.background#181818
- terminal.border#00ccff
- terminal.foreground#00ccff
- terminal.selectionBackground#00ff2a
- terminalCursor.foreground#00ff2a
- textLink.activeForeground#00ccff
- textLink.foreground#00ccff
- titleBar.activeBackground#00ccff
- titleBar.activeForeground#181818
- titleBar.border#181818
- welcomePage.background#181818
- welcomePage.buttonBackground#181818
- welcomePage.buttonHoverBackground#00ff2a
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| meta.embedded, source.groovy.embedded | #D4D4D4 | — |
| emphasis | — | italic |
| strong | — | bold |
| header | #000080 | — |
| comment | #6A9955 | — |
| constant.language | #569CD6 | — |
| constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent | #B5CEA8 | — |
| constant.regexp | #646695 | — |
| entity.name.tag | #569CD6 | — |
| entity.name.tag.css | #D7BA7D | — |
| entity.other.attribute-name | #9CDCFE | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss | #D7BA7D | — |
| invalid | #F44747 | — |
| markup.underline | — | underline |
| markup.bold | #569CD6 | bold |
| markup.heading | #569CD6 | bold |
| markup.italic | — | italic |
| markup.inserted | #B5CEA8 | — |
| markup.deleted | #CE9178 | — |
| markup.changed | #569CD6 | — |
| punctuation.definition.quote.begin.markdown | #6A9955 | — |
| punctuation.definition.list.begin.markdown | #6796E6 | — |
| markup.inline.raw | #CE9178 | — |
| punctuation.definition.tag | #808080 | — |
| meta.preprocessor, entity.name.function.preprocessor | #569CD6 | — |
| meta.preprocessor.string | #CE9178 | — |
| meta.preprocessor.numeric | #B5CEA8 | — |
| meta.structure.dictionary.key.python | #9CDCFE | — |
| meta.diff.header | #569CD6 | — |
| storage | #569CD6 | — |
| storage.type | #569CD6 | — |
| storage.modifier, keyword.operator.noexcept | #569CD6 | — |
| string, entity.name.operator.custom-literal.string, meta.embedded.assembly | #CE9178 | — |
| string.tag | #CE9178 | — |
| string.value | #CE9178 | — |
| string.regexp | #D16969 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded | #569CD6 | — |
| meta.template.expression | #D4D4D4 | — |
| support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded | #9CDCFE | — |
| keyword | #569CD6 | — |
| keyword.control | #569CD6 | — |
| keyword.operator | #D4D4D4 | — |
| keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike | #569CD6 | — |
| keyword.other.unit | #B5CEA8 | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #569CD6 | — |
| support.function.git-rebase | #9CDCFE | — |
| constant.sha.git-rebase | #B5CEA8 | — |
| storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java | #D4D4D4 | — |
| variable.language | #569CD6 | — |
| comment | #9B9B9B | — |
| punctuation.definition.comment | #9B9B9B | — |
| string | #9CDCFE | — |
| meta.embedded.assembly | #9CDCFE | — |
| keyword - keyword.operator | #00CCFF | — |
| keyword.control | #00CCFF | — |
| storage | #00CCFF | — |
| storage.type | #00CCFF | — |
| constant.numeric | #FF9837 | — |
| entity.name.type | #3AA6FF | — |
| entity.name.class | #3AA6FF | — |
| support.type | #3AA6FF | — |
| support.class | #3AA6FF | — |
| entity.name.function | #00FF2A | — |
| support.function | #00FF2A | — |
| entity.name.tag.css, keyword.operator, keyword.other.unit, punctuation.separator.key-value | #008CFF | — |
| meta.function-call, meta.member.access, support.type.property-name, variable.other.object.property, variable.other.object | #00CCFF | — |
| punctuation.definition.arguments | #FFFFFF | — |
| entity.other.attribute-name, entity.other.attribute-name.class.css | #00FF2A | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...