Bio Dark
Publisher: studiobioThemes in package: 1
A super-cool dark theme for VS Code by studio.bio inspired by Oceanic Next and Solarized Dark. Optimized for JavaScript (React), PHP, HTML, and Sass/SCSS.
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#1E242E
- activityBar.border#1E242E
- activityBar.dropBackground#2C3749
- activityBar.foreground#898C92
- activityBarBadge.background#41608B
- badge.background#2C3749
- badge.foreground#CECECE
- button.background#486388
- button.foreground#ffffffcc
- button.hoverBackground#1D3458
- contrastActiveBorder#2C3749
- contrastBorder#2C3749
- debugExceptionWidget.background#2C3749
- debugExceptionWidget.border#2C3749
- debugToolBar.background#111929
- diffEditor.insertedTextBackground#1D345823
- diffEditor.insertedTextBorder#1E242E33
- diffEditor.removedTextBackground#F26D5833
- diffEditor.removedTextBorder#F26D584d
- dropdown.background#111929
- dropdown.border#2C3749
- dropdown.foreground#ffffffcc
- editor.background#1E242E
- editor.findMatchBackground#5098FA79
- editor.findMatchHighlightBackground#2E3248
- editor.findRangeHighlightBackground#2E3248
- editor.foreground#CECECE
- editor.hoverHighlightBackground#3c23535a
- editor.inactiveSelectionBackground#78627F5a
- editor.lineHighlightBackground#0003
- editor.rangeHighlightBackground#7437ad5a
- editor.selectionBackground#204279
- editor.selectionHighlightBackground#1D345879
- editor.wordHighlightBackground#3c2353
- editor.wordHighlightStrongBackground#1D3458
- editorBracketMatch.background#b18e2c2c
- editorBracketMatch.border#898C92
- editorCodeLens.foreground#486388b4
- editorCursor.foreground#A2D1DC
- editorError.foreground#EF5350
- editorGroup.border#2C3749
- editorGroup.dropBackground#2C3749
- editorGroup.emptyBackground#2C3749
- editorGroupHeader.noTabsBackground#0003
- editorGroupHeader.tabsBackground#1E242E
- editorGroupHeader.tabsBorder#2C3749
- editorGutter.addedBackground#295a2480
- editorGutter.background#1E242E
- editorGutter.deletedBackground#f26d5880
- editorGutter.modifiedBackground#ffe08380
- editorHoverWidget.background#111929
- editorHoverWidget.border#1E242E
- editorIndentGuide.activeBackground#323f53
- editorIndentGuide.background#242D3C
- editorLineNumber.activeForeground#CECECE
- editorLineNumber.foreground#5b5e64
- editorMarkerNavigation.background#31364a
- editorMarkerNavigationError.background#F26D58
- editorMarkerNavigationWarning.background#FAC863
- editorOverviewRuler.commonContentForeground#583d72a2
- editorOverviewRuler.currentContentForeground#583d72a2
- editorOverviewRuler.incomingContentForeground#583d72a2
- editorRuler.foreground#242D3C
- editorSuggestWidget.background#111929
- editorSuggestWidget.border#1E242E
- editorSuggestWidget.foreground#a0a1a3
- editorSuggestWidget.highlightForeground#E9ECF2
- editorSuggestWidget.selectedBackground#583d72
- editorWarning.foreground#D9984D
- editorWidget.background#2C3749
- editorWidget.border#2C3749
- errorForeground#EF5350
- extensionButton.prominentBackground#5098FAcc
- extensionButton.prominentForeground#ffffffcc
- extensionButton.prominentHoverBackground#486388
- focusBorder#2C3749
- foreground#E9ECF2
- gitDecoration.conflictingResourceForeground#FFA55Dcc
- gitDecoration.deletedResourceForeground#F26D5890
- gitDecoration.ignoredResourceForeground#486388
- gitDecoration.modifiedResourceForeground#D9984D
- gitDecoration.untrackedResourceForeground#DEF59Ac4
- input.background#1E242E
- input.border#2C3749
- input.foreground#ffffffcc
- input.placeholderForeground#41608B
- inputOption.activeBorder#ffffffcc
- inputValidation.errorBackground#F26D58f2
- inputValidation.errorBorder#F26D58
- inputValidation.infoBackground#41608Bf2
- inputValidation.infoBorder#41608B
- inputValidation.warningBackground#FAC863f2
- inputValidation.warningBorder#FFCA28
- list.activeSelectionBackground#2C3749
- list.activeSelectionForeground#ffffff
- list.dropBackground#1E242E
- list.focusBackground#111929
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#111929
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#2C3749
- list.inactiveSelectionForeground#898C92
- list.invalidItemForeground#bb80b3
- merge.currentHeaderBackground#2C3749
- merge.incomingHeaderBackground#583d725a
- notificationLink.foreground#80CBC4
- notifications.background#20252c
- notifications.foreground#E9ECF2cc
- panel.background#111929
- panel.border#1E242E
- panelTitle.activeBorder#2C3749
- panelTitle.activeForeground#E9ECF2cc
- panelTitle.inactiveForeground#898C9280
- peekView.border#2C3749
- peekViewEditor.background#1E242E
- peekViewEditor.matchHighlightBackground#2E32485a
- peekViewResult.background#111929
- peekViewResult.fileForeground#7DAFB6
- peekViewResult.lineForeground#7DAFB6
- peekViewResult.matchHighlightBackground#E9ECF2cc
- peekViewResult.selectionBackground#2C3749
- peekViewResult.selectionForeground#CECECE
- peekViewTitle.background#111929
- peekViewTitleDescription.foreground#898C92
- peekViewTitleLabel.foreground#CECECE
- pickerGroup.border#1E242E
- pickerGroup.foreground#2C3749
- scrollbar.shadow#111929
- scrollbarSlider.activeBackground#2C374980
- scrollbarSlider.background#2C374980
- scrollbarSlider.hoverBackground#2C374980
- sideBar.background#242D3C
- sideBar.border#1E242E
- sideBar.foreground#bcbcbc
- sideBarSectionHeader.background#2C3749
- sideBarSectionHeader.foreground#898C92
- sideBarTitle.foreground#CECECE
- statusBar.background#111929
- statusBar.border#1E242E
- statusBar.debuggingBackground#b66726
- statusBar.debuggingBorder#1E242E
- statusBar.debuggingForeground#E9ECF2
- statusBar.foreground#898C92
- statusBar.noFolderBackground#2C3749
- statusBar.noFolderBorder#1E242E
- statusBarItem.activeBackground#2C3749
- statusBarItem.hoverBackground#242D3C
- statusBarItem.prominentBackground#2C3749
- statusBarItem.prominentHoverBackground#1D3458
- tab.activeBackground#1E242E
- tab.activeBorder#1E242E
- tab.activeForeground#E9ECF2
- tab.border#1E242E
- tab.inactiveBackground#0003
- tab.inactiveForeground#898C92
- tab.unfocusedActiveBorder#1E242E
- tab.unfocusedActiveForeground#898C92
- tab.unfocusedInactiveForeground#898C92
- terminal.ansiBlack#111929
- terminal.ansiBlue#486388
- terminal.ansiBrightBlack#575656
- terminal.ansiBrightBlue#B0C3E7
- terminal.ansiBrightCyan#A0C4EE
- terminal.ansiBrightGreen#DEF59A
- terminal.ansiBrightMagenta#C792EA
- terminal.ansiBrightRed#f12a26
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffdd43
- terminal.ansiCyan#4885db
- terminal.ansiGreen#35be81
- terminal.ansiMagenta#bb80b3
- terminal.ansiRed#F26D58
- terminal.ansiWhite#F6F8FA
- terminal.ansiYellow#FAC863
- titleBar.activeBackground#1E242E
- titleBar.activeForeground#eeefff
- titleBar.inactiveBackground#010e1a
- walkThrough.embeddedEditorBackground#111929
- welcomePage.buttonBackground#111929
- welcomePage.buttonHoverBackground#111929
- widget.shadow#111929
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #E9ECF2ff | — |
| Global settings | #E9ECF2ff | — |
| comment, punctuation.definition.comment | #898c92c0 | normal |
| variable | #d8d8d8 | — |
| string constant.other.placeholder | #7DAFB6 | — |
| constant.other.color | #ffffff | — |
| invalid, invalid.illegal | #DF7060 | — |
| keyword | #7DAFB6 | — |
| storage.type | #bb80b3 | — |
| storage.modifier | #FFA55D | — |
| keyword.other.substitution | #5d82be | — |
| punctuation.section.embedded.php | #bb80b3 | — |
| punctuation.section.embedded.js, punctuation.section.embedded.ts, punctuation.section.embedded.jsx, punctuation.section.embedded.tsx, source.js punctuation.section.embedded | #5d82be | — |
| punctuation.section.embedded.php | #A2D1DC | — |
| punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template | #7DAFB6 | — |
| meta.tag | #B3E3CD | — |
| keyword.control | #bb80b3 | — |
| constant.other.color | #B8CD88 | — |
| meta.method.declaration storage.type.js | #82AAFF | — |
| variable.other.jsdoc, variable.other.phpdoc | #B3E3CD | — |
| variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other | #FFA55D | — |
| variable.parameter.function.js | #7986E7 | — |
| variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx | #d8d8d8 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #f26d58de | — |
| entity.name.function, meta.function-call, variable.function, support.function | #5d82be | — |
| entity.name.function.other | #FFA55D | — |
| keyword.other.special-method | #8BAAB2 | — |
| meta.block variable.other | #CECECE | — |
| support.other.variable, string.other.link | #FAC863 | — |
| constant.language, support.constant, constant.character, constant.escape, variable.parameter | #FFA55D | — |
| keyword.other | #bb80b3 | — |
| source.scss keyword.other, source.sass keyword.other, source.css keyword.other, source.pcss keyword.other | #7DAFB6 | — |
| keyword.other.unit | #F26D58 | — |
| constant.numeric | #FFA55D | — |
| string | #B8CD88 | — |
| string.template meta.template.expression | #d3423e | — |
| string.template punctuation.definition.string | #B3E3CD | — |
| constant.other.symbol, constant.other.key | #D9984D | normal |
| meta.group.braces.curly | #CECECE | normal |
| meta.group.braces.round | #A2D1DC | normal |
| markup.heading, markup.inserted.git_gutter | #7DA1D1 | normal |
| entity.name, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types | #FAC863 | — |
| support.type | #FAC863 | — |
| entity.other.attribute-name | #D9984D | |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name | #FAC863 | — |
| entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass | #B3E3CD | — |
| keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.sass | #DEF59A | — |
| variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass | #CECECE | — |
| entity.other.attribute-name.id | #bb80b3 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #F26D58 | — |
| variable.language | #f26d58de | italic |
| #844996 | normal | |
| entity.name.function.js, variable.function.constructor | #5d82be | — |
| meta.class-method.js | #D9984D | — |
| entity.other.attribute-name.php, entity.other.attribute-name.html | #B3E3CD | — |
| entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, variable.parameter, variable.language.super | #D9984D | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #7dafb6 | normal |
| entity.other.attribute-name.class | #bb80b3 | — |
| source.sass keyword.control | #FAC863 | — |
| markup.inserted, markup.inserted.diff | #DEF59A | — |
| markup.deleted, markup.deleted.diff | #F26D58 | — |
| markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file | #bb80b3 | — |
| string.regexp | #89DDFF | — |
| constant.character.escape | #A2D1DC | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #B3E3CD | normal |
| source.js constant.other.object.key.js string.unquoted.label.js | #F26D58 | normal |
| source.json meta.structure.dictionary.json support.type.property-name.json | #D9984D | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #FAC863 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #FFA55D | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #FF5370 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #C17E70 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #82AAFF | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #f07178 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #bb80b3 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #C3E88D | — |
| text.html.markdown, punctuation.definition.list_item.markdown | #EEFFFF | — |
| text.html.markdown markup.inline.raw.markdown | #bb80b3 | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #65737E | — |
| text.html.markdown meta.dummy.line-break | — | |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #C3E88D | — |
| markup.italic | #F26D58 | italic |
| markup.bold, markup.bold string | #F26D58 | bold |
| markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string | #F26D58 | bold |
| markup.underline | #FFA55D | underline |
| markup.strike | strike | |
| markup.quote punctuation.definition.blockquote.markdown | #65737E | — |
| markup.quote | italic | |
| string.other.link.title.markdown | #5098FA | — |
| string.other.link.description.title.markdown | #bb80b3 | — |
| constant.other.reference.link.markdown | #FFCB6B | — |
| markup.raw.block | #bb80b3 | — |
| markup.raw.block.fenced.markdown | #00000050 | — |
| punctuation.definition.fenced.markdown | #00000050 | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end | #EEFFFF | — |
| variable.language.fenced.markdown | #65737E | — |
| meta.separator | #65737E | bold |
| markup.table | #EEFFFF | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #bb80b3 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...