Bootstrap Theme
Publisher: BootstrapThemes in package: 4
Bootstrap theme for Shiki, VS Code, and more
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.
| key | HEX | RGB | RGBA |
|---|---|---|---|
activityBar.activeBorder | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
activityBar.background | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
activityBar.border | COLOR(DISPLAY-P3 0.891595 0.897780 0.905052) | — | — |
activityBar.foreground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
activityBarBadge.background | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
activityBarBadge.foreground | COLOR(DISPLAY-P3 1.000000 1.000000 1.000000) | — | — |
button.background | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
button.foreground | COLOR(DISPLAY-P3 1.000000 1.000000 1.000000) | — | — |
button.hoverBackground | COLOR(DISPLAY-P3 0.298039 0.529412 1.000000) | — | — |
diffEditor.deletedTextBackground | COLOR(DISPLAY-P3 0.907131 0.215067 0.276409 / 0.200000) | — | — |
diffEditor.insertedTextBackground | COLOR(DISPLAY-P3 0.270922 0.722281 0.366128 / 0.200000) | — | — |
dropdown.background | COLOR(DISPLAY-P3 0.911203 0.917388 0.924660) | — | — |
dropdown.border | COLOR(DISPLAY-P3 0.783207 0.795564 0.813700) | — | — |
dropdown.foreground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
editor.background | COLOR(DISPLAY-P3 1.000000 1.000000 1.000000) | — | — |
editor.foreground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
editor.lineHighlightBackground | COLOR(DISPLAY-P3 0.875909 0.882094 0.990104 / 0.550000) | — | — |
editor.selectionBackground | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000 / 0.180000) | — | — |
editorCursor.foreground | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
editorGroupHeader.tabsBackground | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
editorGroupHeader.tabsBorder | COLOR(DISPLAY-P3 0.891595 0.897780 0.905052) | — | — |
editorIndentGuide.activeBackground | COLOR(DISPLAY-P3 0.783207 0.795564 0.813700) | — | — |
editorIndentGuide.background | COLOR(DISPLAY-P3 0.891595 0.897780 0.905052) | — | — |
editorLineNumber.activeForeground | COLOR(DISPLAY-P3 0.246749 0.262121 0.276768) | — | — |
editorLineNumber.foreground | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
focusBorder | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
foreground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
gitDecoration.addedResourceForeground | COLOR(DISPLAY-P3 0.270922 0.722281 0.366128) | — | — |
gitDecoration.conflictingResourceForeground | COLOR(DISPLAY-P3 1.000000 0.828566 0.298929) | — | — |
gitDecoration.deletedResourceForeground | COLOR(DISPLAY-P3 0.907131 0.215067 0.276409) | — | — |
gitDecoration.ignoredResourceForeground | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
gitDecoration.modifiedResourceForeground | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
gitDecoration.untrackedResourceForeground | COLOR(DISPLAY-P3 0.270922 0.722281 0.366128) | — | — |
input.background | COLOR(DISPLAY-P3 0.911203 0.917388 0.924660) | — | — |
input.border | COLOR(DISPLAY-P3 0.783207 0.795564 0.813700) | — | — |
input.foreground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
input.placeholderForeground | COLOR(DISPLAY-P3 0.474687 0.508445 0.545015) | — | — |
list.activeSelectionBackground | COLOR(DISPLAY-P3 0.875909 0.882094 0.990104 / 0.800000) | — | — |
list.activeSelectionForeground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
list.focusOutline | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
list.hoverBackground | COLOR(DISPLAY-P3 0.875909 0.882094 0.990104 / 0.350000) | — | — |
list.inactiveSelectionBackground | COLOR(DISPLAY-P3 0.875909 0.882094 0.990104 / 0.450000) | — | — |
panel.background | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
panel.border | COLOR(DISPLAY-P3 0.891595 0.897780 0.905052) | — | — |
panelTitle.activeBorder | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
panelTitle.activeForeground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
panelTitle.inactiveForeground | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
selection.background | COLOR(DISPLAY-P3 0.875909 0.882094 0.990104) | — | — |
sideBar.background | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
sideBar.border | COLOR(DISPLAY-P3 0.891595 0.897780 0.905052) | — | — |
sideBar.foreground | COLOR(DISPLAY-P3 0.246749 0.262121 0.276768) | — | — |
sideBarSectionHeader.background | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
sideBarSectionHeader.border | COLOR(DISPLAY-P3 0.891595 0.897780 0.905052) | — | — |
sideBarSectionHeader.foreground | COLOR(DISPLAY-P3 0.246749 0.262121 0.276768) | — | — |
sideBarTitle.foreground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
statusBar.background | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
statusBar.border | COLOR(DISPLAY-P3 0.891595 0.897780 0.905052) | — | — |
statusBar.debuggingBackground | COLOR(DISPLAY-P3 1.000000 0.828566 0.298929) | — | — |
statusBar.debuggingForeground | COLOR(DISPLAY-P3 1.000000 1.000000 1.000000) | — | — |
statusBar.foreground | COLOR(DISPLAY-P3 0.246749 0.262121 0.276768) | — | — |
statusBar.noFolderBackground | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
statusBarItem.remoteBackground | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
statusBarItem.remoteForeground | COLOR(DISPLAY-P3 0.246749 0.262121 0.276768) | — | — |
tab.activeBackground | COLOR(DISPLAY-P3 1.000000 1.000000 1.000000) | — | — |
tab.activeBorderTop | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
tab.activeForeground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
tab.border | COLOR(DISPLAY-P3 0.891595 0.897780 0.905052) | — | — |
tab.inactiveBackground | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
tab.inactiveForeground | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
terminal.ansiBlack | COLOR(DISPLAY-P3 0.094824 0.097911 0.101552) | — | — |
terminal.ansiBlue | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
terminal.ansiBrightBlack | COLOR(DISPLAY-P3 0.094824 0.097911 0.101552) | — | — |
terminal.ansiBrightBlue | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
terminal.ansiBrightCyan | COLOR(DISPLAY-P3 0.327414 0.730740 1.000000) | — | — |
terminal.ansiBrightGreen | COLOR(DISPLAY-P3 0.270922 0.722281 0.366128) | — | — |
terminal.ansiBrightMagenta | COLOR(DISPLAY-P3 0.688374 0.161635 0.855832) | — | — |
terminal.ansiBrightRed | COLOR(DISPLAY-P3 0.907131 0.215067 0.276409) | — | — |
terminal.ansiBrightWhite | COLOR(DISPLAY-P3 0.675568 0.697150 0.719064) | — | — |
terminal.ansiBrightYellow | COLOR(DISPLAY-P3 1.000000 0.828566 0.298929) | — | — |
terminal.ansiCyan | COLOR(DISPLAY-P3 0.327414 0.730740 1.000000) | — | — |
terminal.ansiGreen | COLOR(DISPLAY-P3 0.270922 0.722281 0.366128) | — | — |
terminal.ansiMagenta | COLOR(DISPLAY-P3 0.688374 0.161635 0.855832) | — | — |
terminal.ansiRed | COLOR(DISPLAY-P3 0.907131 0.215067 0.276409) | — | — |
terminal.ansiWhite | COLOR(DISPLAY-P3 0.675568 0.697150 0.719064) | — | — |
terminal.ansiYellow | COLOR(DISPLAY-P3 1.000000 0.828566 0.298929) | — | — |
terminal.background | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
terminal.foreground | COLOR(DISPLAY-P3 0.246749 0.262121 0.276768) | — | — |
terminal.titleForeground | COLOR(DISPLAY-P3 0.246749 0.262121 0.276768) | — | — |
terminal.titleInactiveForeground | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
textLink.activeForeground | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
textLink.foreground | COLOR(DISPLAY-P3 0.218618 0.478844 1.000000) | — | — |
titleBar.activeBackground | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
titleBar.activeForeground | COLOR(DISPLAY-P3 0.043849 0.046932 0.050576) | — | — |
titleBar.border | COLOR(DISPLAY-P3 0.891595 0.897780 0.905052) | — | — |
titleBar.inactiveBackground | COLOR(DISPLAY-P3 0.934031 0.937125 0.944334) | — | — |
titleBar.inactiveForeground | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
tokenColors
Foregrounds this theme assigns to the token scope catalog. A rule with only a font style is skipped, and a longer matching scope wins. Italic and bold rules are not listed — the preview above shows them in the code.
| scope | HEX | RGB | RGBA |
|---|---|---|---|
comment | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
comment.block | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
comment.block.documentation | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
comment.line | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
constant | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
constant.character | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
constant.character.escape | COLOR(DISPLAY-P3 0.261544 0.609756 0.847918) | — | — |
constant.numeric | COLOR(DISPLAY-P3 0.261544 0.609756 0.847918) | — | — |
constant.numeric.integer | COLOR(DISPLAY-P3 0.261544 0.609756 0.847918) | — | — |
constant.numeric.float | COLOR(DISPLAY-P3 0.261544 0.609756 0.847918) | — | — |
constant.numeric.hex | COLOR(DISPLAY-P3 0.261544 0.609756 0.847918) | — | — |
constant.numeric.octal | COLOR(DISPLAY-P3 0.261544 0.609756 0.847918) | — | — |
constant.other | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
constant.other.placeholder | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
constant.regexp | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
constant.rgb-value | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
entity | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
entity.name | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
entity.name.class | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
entity.name.function | COLOR(DISPLAY-P3 0.464998 0.285703 1.000000) | — | — |
entity.name.namespace | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
entity.name.section | COLOR(DISPLAY-P3 0.464998 0.285703 1.000000) | — | — |
entity.name.tag | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
entity.name.type | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
entity.name.type.enum | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
entity.name.type.interface | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
entity.name.type.struct | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
entity.other | COLOR(DISPLAY-P3 0.253230 0.639230 0.614279) | — | — |
entity.other.attribute-name | COLOR(DISPLAY-P3 0.253230 0.639230 0.614279) | — | — |
entity.other.inherited-class | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
invalid | COLOR(DISPLAY-P3 0.907131 0.215067 0.276409) | — | — |
invalid.deprecated | COLOR(DISPLAY-P3 0.907131 0.215067 0.276409) | — | — |
invalid.illegal | COLOR(DISPLAY-P3 0.907131 0.215067 0.276409) | — | — |
keyword | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
keyword.control | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
keyword.control.flow | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
keyword.operator | COLOR(DISPLAY-P3 0.318806 0.340308 0.362261) | — | — |
keyword.operator.new | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
keyword.operator.assignment | COLOR(DISPLAY-P3 0.327414 0.730740 1.000000) | — | — |
keyword.operator.arithmetic | COLOR(DISPLAY-P3 0.327414 0.730740 1.000000) | — | — |
keyword.operator.logical | COLOR(DISPLAY-P3 0.327414 0.730740 1.000000) | — | — |
keyword.other | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
markup | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
markup.bold | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
markup.changed | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
markup.deleted | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
markup.heading | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
markup.inline.raw | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
markup.inserted | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
markup.italic | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
markup.quote | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
markup.underline | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
markup.underline.link | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
meta | COLOR(DISPLAY-P3 0.464998 0.285703 1.000000) | — | — |
meta.function | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
meta.function-call | COLOR(DISPLAY-P3 0.464998 0.285703 1.000000) | — | — |
meta.selector | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
meta.tag | COLOR(DISPLAY-P3 0.318806 0.340308 0.362261) | — | — |
punctuation.definition.bracket | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
punctuation.definition.comment | COLOR(DISPLAY-P3 0.394786 0.422416 0.451677) | — | — |
punctuation.definition.string.begin | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
punctuation.definition.string.end | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
punctuation.separator | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
punctuation.separator.continuation | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
punctuation.terminator | COLOR(DISPLAY-P3 0.318806 0.340308 0.362261) | — | — |
storage | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
storage.modifier | COLOR(DISPLAY-P3 0.886971 0.212780 0.454881) | — | — |
storage.type | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
string | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
string.interpolated | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
string.other | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
string.quoted | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
string.quoted.double | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
string.quoted.other | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
string.quoted.single | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
string.quoted.triple | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
string.regexp | COLOR(DISPLAY-P3 0.253230 0.639230 0.614279) | — | — |
string.template | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
string.unquoted | COLOR(DISPLAY-P3 0.232615 0.594724 0.307955) | — | — |
support | COLOR(DISPLAY-P3 0.776438 0.164723 0.207978) | — | — |
support.class | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
support.constant | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
support.function | COLOR(DISPLAY-P3 0.464998 0.285703 1.000000) | — | — |
support.other | COLOR(DISPLAY-P3 0.464998 0.285703 1.000000) | — | — |
support.type | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
support.type.primitive | COLOR(DISPLAY-P3 0.537331 0.232133 0.959553) | — | — |
support.type.property-name | COLOR(DISPLAY-P3 0.318806 0.340308 0.362261) | — | — |
support.variable | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
variable | COLOR(DISPLAY-P3 0.883972 0.370798 0.083093) | — | — |
variable.function | COLOR(DISPLAY-P3 0.464998 0.285703 1.000000) | — | — |
variable.language | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
variable.name | COLOR(DISPLAY-P3 0.883972 0.370798 0.083093) | — | — |
variable.other | COLOR(DISPLAY-P3 0.883972 0.370798 0.083093) | — | — |
variable.other.constant | COLOR(DISPLAY-P3 0.870641 0.708072 0.208488) | — | — |
variable.other.property | COLOR(DISPLAY-P3 0.883972 0.370798 0.083093) | — | — |
variable.other.readwrite | COLOR(DISPLAY-P3 0.883972 0.370798 0.083093) | — | — |
variable.parameter | COLOR(DISPLAY-P3 0.318806 0.340308 0.362261) | — | — |
