Short Giraffe Theme
Publisher: kumamakiThemes in package: 3
A dark theme with carefully picked colors
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.
- actionBar.toggledBackground#222833
- activityBar.background#0F131A
- activityBar.border#0F131A
- activityBar.foreground#F29E74
- activityBar.inactiveForeground#414B5D
- activityBarBadge.background#F29E74
- activityBarBadge.foreground#191F2B
- badge.background#F29E74
- badge.foreground#191F2B
- banner.background#232834
- banner.foreground#FEF8F5
- banner.iconForeground#F29E74
- breadcrumb.activeSelectionForeground#FEF8F5
- breadcrumb.background#191F2B
- breadcrumb.focusForeground#F29E74
- breadcrumb.foreground#707a8c
- breadcrumbPicker.background#222833
- button.background#333842
- button.border#333842
- button.foreground#FEF8F5
- button.hoverBackground#373e4c
- button.secondaryBackground#2E3543
- button.secondaryForeground#CAD0DC
- charts.blue#9BC9FF
- charts.foreground#FEF8F5
- charts.green#a6cc70
- charts.lines#303743
- charts.orange#F29E74
- charts.purple#CBBEE7
- charts.red#FF7474
- charts.yellow#F5DA7A
- checkbox.background#191F2B
- checkbox.border#414B5D
- checkbox.foreground#FEF8F5
- checkbox.selectBackground#F29E74
- checkbox.selectBorder#F29E74
- commandCenter.activeBorder#F29E74
- commandCenter.activeForeground#F29E74
- commandCenter.background#222833
- commandCenter.border#191e2a
- commandCenter.foreground#FEF8F5
- commandCenter.inactiveForeground#707a8c
- commentsView.resolvedIcon#414B5D
- commentsView.unresolvedIcon#F29E74
- debugConsole.errorForeground#FF7474
- debugConsole.infoForeground#45CAC2
- debugConsole.sourceForeground#707a8c
- debugConsole.warningForeground#F29E74
- debugConsoleInputIcon.foreground#F29E74
- debugExceptionWidget.background#232834
- debugExceptionWidget.border#191e2a
- debugIcon.breakpointDisabledForeground#414B5D
- debugIcon.breakpointForeground#FF7474
- debugIcon.breakpointUnverifiedForeground#707a8c
- debugIcon.continueForeground#a6cc70
- debugIcon.disconnectForeground#FF7474
- debugIcon.pauseForeground#F5DA7A
- debugIcon.restartForeground#a6cc70
- debugIcon.startForeground#a6cc70
- debugIcon.stepBackForeground#45CAC2
- debugIcon.stepIntoForeground#45CAC2
- debugIcon.stepOutForeground#45CAC2
- debugIcon.stepOverForeground#45CAC2
- debugIcon.stopForeground#FF7474
- debugTokenExpression.boolean#F5DA7A
- debugTokenExpression.error#FF7474
- debugTokenExpression.name#45CAC2
- debugTokenExpression.number#F7C0A5
- debugTokenExpression.string#F6ABA8
- debugTokenExpression.value#F7F7E5
- debugToolBar.background#232834
- debugView.exceptionLabelBackground#8C404A
- debugView.exceptionLabelForeground#FEF8F5
- debugView.stateLabelBackground#232834
- debugView.stateLabelForeground#FEF8F5
- debugView.valueChangedHighlight#F29E74
- diffEditor.insertedLineBackground#82F28706
- diffEditor.insertedTextBackground#82F28708
- diffEditor.removedLineBackground#FF747406
- diffEditor.removedTextBackground#FF747408
- dropdown.background#141A25
- dropdown.border#373e4c
- dropdown.foreground#A3A5AA
- editor.background#191F2B
- editor.findMatchBackground#F29E740d
- editor.findMatchBorder#F29E74
- editor.findMatchHighlightBackground#F29E740d
- editor.findMatchHighlightBorder#F29E7459
- editor.findRangeHighlightBackground#262f3e
- editor.findRangeHighlightBorder#191F2B00
- editor.foreground#F7F7E5
- editor.inactiveSelectionBackground#262f3e
- editor.lineHighlightBackground#222833
- editor.rangeHighlightBackground#191e2a
- editor.selectionBackground#2a3546
- editor.selectionHighlightBackground#222833
- editor.selectionHighlightBorder#313e52
- editor.wordHighlightBackground#262f3e
- editor.wordHighlightStrongBackground#F29E7433
- editorBracketHighlight.foreground1#F29E74
- editorBracketHighlight.foreground2#F5DA7A
- editorBracketHighlight.foreground3#45CAC2
- editorBracketHighlight.foreground4#CBBEE7
- editorBracketHighlight.foreground5#9BC9FF
- editorBracketHighlight.foreground6#a6cc70
- editorBracketHighlight.unexpectedBracket.foreground#FF7474
- editorBracketMatch.background#222833
- editorBracketMatch.border#707a8c99
- editorBracketPairGuide.activeBackground1#F29E7480
- editorBracketPairGuide.activeBackground2#F5DA7A80
- editorBracketPairGuide.activeBackground3#45CAC280
- editorBracketPairGuide.activeBackground4#CBBEE780
- editorBracketPairGuide.activeBackground5#9BC9FF80
- editorBracketPairGuide.activeBackground6#a6cc7080
- editorBracketPairGuide.background1#F29E7440
- editorBracketPairGuide.background2#F5DA7A40
- editorBracketPairGuide.background3#45CAC240
- editorBracketPairGuide.background4#CBBEE740
- editorBracketPairGuide.background5#9BC9FF40
- editorBracketPairGuide.background6#a6cc7040
- editorCodeLens.foreground#5c6773
- editorCursor.foreground#F29E74
- editorError.foreground#FF7474
- editorGhostText.background#FFFFFF00
- editorGhostText.border#FFFFFF00
- editorGhostText.foreground#a6a7ab
- editorGroup.border#0F131A
- editorGroup.dropBackground#0F131A20
- editorGroup.emptyBackground#1d2431
- editorGroupHeader.noTabsBackground#191F2B
- editorGroupHeader.tabsBackground#191F2B
- editorGroupHeader.tabsBorder#191e2a
- editorGutter.addedBackground#a6cc7099
- editorGutter.background#191F2B
- editorGutter.deletedBackground#f2798399
- editorGutter.modifiedBackground#C98B83
- editorHoverWidget.background#232834
- editorHoverWidget.border#101521
- editorIndentGuide.activeBackground#707a8cb3
- editorIndentGuide.background#222833
- editorInfo.foreground#414B5D
- editorInlayHint.background#FFFFFF00
- editorInlayHint.foreground#9be7ffBB
- editorLineNumber.activeForeground#A3A5AA
- editorLineNumber.foreground#414B5D
- editorLink.activeForeground#45CAC2
- editorMarkerNavigation.background#232834
- editorOverviewRuler.addedForeground#a6cc7099
- editorOverviewRuler.border#191e2a
- editorOverviewRuler.deletedForeground#f2798399
- editorOverviewRuler.errorForeground#ff3333
- editorOverviewRuler.modifiedForeground#77a8d999
- editorOverviewRuler.warningForeground#F29E74
- editorRuler.foreground#222833
- editorStickyScroll.background#191F2B
- editorStickyScroll.border#191e2a
- editorStickyScroll.shadow#141925
- editorStickyScrollHover.background#1d2431
- editorSuggestWidget.background#2E3543
- editorSuggestWidget.border#101521
- editorSuggestWidget.highlightForeground#FF7474
- editorSuggestWidget.selectedBackground#82F28735
- editorSuggestWidget.selectedForeground#F7F7E5
- editorWarning.foreground#E1936C
- editorWhitespace.foreground#707a8c66
- editorWidget.background#232834
- errorForeground#B35C51
- extensionButton.background#FFB69E
- extensionButton.foreground#191F2B
- extensionButton.hoverBackground#FFB46A
- extensionButton.prominentBackground#FFB69E
- extensionButton.prominentForeground#191F2B
- extensionButton.prominentHoverBackground#FFB46A
- extensionButton.separator#222630
- focusBorder#505867
- foreground#FEF8F5
- gitDecoration.addedResourceForeground#A2C4EB
- gitDecoration.conflictingResourceForeground#ffeb95cc
- gitDecoration.copiedResourceForeground#bae67e
- gitDecoration.deletedResourceForeground#F6ABA8
- gitDecoration.ignoredResourceForeground#A3A5AA
- gitDecoration.modifiedResourceForeground#A2C4EB
- gitDecoration.renamedResourceForeground#5ccfe6
- gitDecoration.stageModifiedResourceForeground#A2C4EB
- gitDecoration.submoduleResourceForeground#d4bfffb3
- gitDecoration.untrackedResourceForeground#45CAC2
- icon.foreground#CAD0DC
- inlineChat.background#232834
- inlineChat.border#191e2a
- inlineChat.regionHighlight#F29E7415
- inlineChat.shadow#141925
- input.background#141A25
- input.border#414B5D
- input.foreground#A3A5AA
- input.placeholderForeground#586070
- inputOption.activeBorder#F29E74
- inputValidation.errorBackground#191F2B
- inputValidation.errorBorder#ff3333
- inputValidation.infoBackground#191F2B
- inputValidation.infoBorder#5ccfe6
- inputValidation.warningBackground#191F2B
- inputValidation.warningBorder#ffd580
- keybindingLabel.background#222833
- keybindingLabel.border#303743
- keybindingLabel.bottomBorder#333842
- keybindingLabel.foreground#FEF8F5
- list.activeSelectionBackground#222833
- list.activeSelectionForeground#F7F7E5
- list.focusBackground#1d2431
- list.focusForeground#F29E74
- list.highlightForeground#F29E74
- list.hoverBackground#1d2431
- list.hoverForeground#FFB46A
- list.inactiveSelectionBackground#1d2431
- list.inactiveSelectionForeground#e4f3fa
- list.invalidItemForeground#586070
- menu.background#222833
- menu.border#191e2a
- menu.foreground#FEF8F5
- menu.selectionBackground#1d2431
- menu.selectionBorder#FFFFFF00
- menu.selectionForeground#F29E74
- menu.separatorBackground#303743
- menubar.selectionBackground#1d2431
- menubar.selectionBorder#FFFFFF00
- menubar.selectionForeground#F29E74
- merge.border#191e2a
- merge.commonContentBackground#414B5D20
- merge.commonHeaderBackground#414B5D40
- merge.currentContentBackground#45CAC220
- merge.currentHeaderBackground#45CAC240
- merge.incomingContentBackground#CBBEE720
- merge.incomingHeaderBackground#CBBEE740
- mergeEditor.change.background#F29E7420
- mergeEditor.change.word.background#F29E7440
- mergeEditor.conflict.unhandledFocused.border#F29E74
- mergeEditor.conflict.unhandledUnfocused.border#414B5D
- minimapSlider.activeBackground#00000050
- minimapSlider.background#00000030
- minimapSlider.hoverBackground#00000040
- notebook.cellBackground#191F2B
- notebook.cellBorderColor#191e2a
- notebook.cellStatusBarItemHoverBackground#1d2431
- notebook.cellToolbarSeparator#303743
- notebook.editorBackground#191F2B
- notebook.focusedCellBorder#F29E74
- notebook.focusedEditorBorder#F29E74
- notebook.inactiveFocusedCellBorder#303743
- notebook.outputContainerBackgroundColor#141925
- notebook.outputContainerBorderColor#191e2a
- notebook.selectedCellBackground#1d2431
- notebook.selectedCellBorder#222833
- notebookScrollbarSlider.activeBackground#00000050
- notebookScrollbarSlider.background#00000030
- notebookScrollbarSlider.hoverBackground#00000040
- notebookStatusErrorIcon.foreground#FF7474
- notebookStatusRunningIcon.foreground#F29E74
- notebookStatusSuccessIcon.foreground#a6cc70
- notificationCenter.border#191e2a
- notificationCenterHeader.background#232834
- notificationCenterHeader.foreground#FEF8F5
- notificationLink.foreground#45CAC2
- notifications.background#1d2433
- notifications.border#191e2a
- notifications.foreground#FEF8F5
- notificationsErrorIcon.foreground#FF7474
- notificationsInfoIcon.foreground#45CAC2
- notificationsWarningIcon.foreground#F29E74
- notificationToast.border#191e2a
- panel.background#191F2B
- panel.border#303743
- panelTitle.activeBorder#404651
- panelTitle.activeForeground#cbccc6
- panelTitle.inactiveForeground#707a8c
- peekView.border#191e2a
- peekViewEditor.background#232834
- peekViewEditor.matchHighlightBackground#F29E7433
- peekViewResult.background#232834
- peekViewResult.fileForeground#707a8c
- peekViewResult.matchHighlightBackground#F29E7433
- peekViewTitle.background#232834
- peekViewTitleDescription.foreground#707a8c
- peekViewTitleLabel.foreground#707a8c
- pickerGroup.border#A3A5AA
- pickerGroup.foreground#A3A5AA
- ports.iconRunningProcessForeground#a6cc70
- progressBar.background#F29E74
- quickInput.background#222833
- quickInputList.focusBackground#222833
- quickInputList.focusForeground#E1936C
- quickInputList.focusIconForeground#45CAC2
- radio.activeBackground#F29E74
- radio.activeBorder#F29E74
- radio.activeForeground#191F2B
- radio.inactiveBackground#191F2B
- radio.inactiveBorder#414B5D
- radio.inactiveForeground#FEF8F5
- radio.inactiveHoverBackground#1d2431
- sash.hoverBorder#F29E74
- scm.historyItemAdditionsForeground#a6cc70
- scm.historyItemDeletionsForeground#FF7474
- scm.historyItemSelectedStatisticsBorder#F29E74
- scm.historyItemStatisticsBorder#191e2a
- scrollbar.shadow#222833
- scrollbarSlider.activeBackground#00000040
- scrollbarSlider.background#00000020
- scrollbarSlider.hoverBackground#00000030
- searchEditor.findMatchBackground#F29E7430
- searchEditor.findMatchBorder#F29E74
- searchEditor.textInputBorder#414B5D
- selection.background#2a3546fd
- settings.headerForeground#cbccc6
- settings.modifiedItemIndicator#77a8d9
- sideBar.background#151b25
- sideBar.border#0F131A
- sideBar.foreground#CAD0DC
- sideBarSectionHeader.background#151b25
- sideBarSectionHeader.foreground#FFB69E
- sideBarTitle.foreground#FFB69E
- simpleFindWidget.sashBorder#191e2a
- statusBar.background#FFB69E
- statusBar.border#191e2a
- statusBar.debuggingBackground#F29E74
- statusBar.debuggingForeground#191F2B
- statusBar.foreground#141A25
- statusBar.noFolderBackground#232834
- statusBarItem.activeBackground#00000050
- statusBarItem.hoverBackground#E1936C
- statusBarItem.prominentBackground#F29E74
- statusBarItem.prominentHoverBackground#00000030
- symbolIcon.arrayForeground#F29E74
- symbolIcon.booleanForeground#F5DA7A
- symbolIcon.classForeground#CBBEE7
- symbolIcon.colorForeground#F29E74
- symbolIcon.constantForeground#F5DA7A
- symbolIcon.constructorForeground#45CAC2
- symbolIcon.enumeratorForeground#FFB480
- symbolIcon.enumeratorMemberForeground#F6ABA8
- symbolIcon.eventForeground#F29E74
- symbolIcon.fieldForeground#9BC9FF
- symbolIcon.fileForeground#707a8c
- symbolIcon.folderForeground#707a8c
- symbolIcon.functionForeground#45CAC2
- symbolIcon.interfaceForeground#CBBEE7
- symbolIcon.keyForeground#F5DA7A
- symbolIcon.keywordForeground#F5DA7A
- symbolIcon.methodForeground#45CAC2
- symbolIcon.moduleForeground#707a8c
- symbolIcon.namespaceForeground#CBBEE7
- symbolIcon.nullForeground#707a8c
- symbolIcon.numberForeground#F7C0A5
- symbolIcon.objectForeground#F29E74
- symbolIcon.operatorForeground#FFE074
- symbolIcon.packageForeground#707a8c
- symbolIcon.propertyForeground#FCFCCE
- symbolIcon.referenceForeground#9BC9FF
- symbolIcon.snippetForeground#707a8c
- symbolIcon.stringForeground#F6ABA8
- symbolIcon.structForeground#CBBEE7
- symbolIcon.textForeground#F7F7E5
- symbolIcon.typeParameterForeground#BAB4FF
- symbolIcon.unitForeground#707a8c
- symbolIcon.variableForeground#BBD2EE
- tab.activeBackground#222833
- tab.activeBorderTop#F29E74
- tab.activeForeground#F29E74
- tab.border#191F2B
- tab.inactiveBackground#191F2B
- tab.inactiveForeground#707a8c
- tab.unfocusedActiveBackground#191F2B
- tab.unfocusedActiveBorderTop#FEF8F5
- tab.unfocusedActiveForeground#707a8c
- tab.unfocusedInactiveBackground#191F2B
- tab.unfocusedInactiveForeground#707a8c
- terminal.ansiBlack#191e2a
- terminal.ansiBlue#6dcbfa
- terminal.ansiBrightBlack#686868
- terminal.ansiBrightBlue#73d0ff
- terminal.ansiBrightCyan#95e6cb
- terminal.ansiBrightGreen#bae67e
- terminal.ansiBrightMagenta#d4bfff
- terminal.ansiBrightRed#f28779
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffd580
- terminal.ansiCyan#90e1c6
- terminal.ansiGreen#a6cc70
- terminal.ansiMagenta#cfbafa
- terminal.ansiRed#ed8274
- terminal.ansiWhite#c7c7c7
- terminal.ansiYellow#fad07b
- terminal.background#191F2B
- terminal.findMatchBackground#F29E7430
- terminal.findMatchBorder#F29E74
- terminal.findMatchHighlightBackground#F29E7420
- terminal.findMatchHighlightBorder#F29E7450
- terminal.foreground#cbccc6
- terminal.tab.activeBorder#F29E74
- terminalCommandDecoration.defaultBackground#414B5D
- terminalCommandDecoration.errorBackground#FF747430
- terminalCommandDecoration.successBackground#a6cc7030
- terminalOverviewRuler.cursorForeground#A3A5AA
- terminalOverviewRuler.findMatchForeground#F29E74
- terminalStickyScroll.background#191F2B
- terminalStickyScroll.border#191e2a
- terminalStickyScrollHover.background#1d2431
- testing.coveredBackground#a6cc7020
- testing.coveredGutterBackground#a6cc70
- testing.iconErrored#414B5D
- testing.iconFailed#FF7474
- testing.iconPassed#a6cc70
- testing.iconQueued#707a8c
- testing.iconSkipped#F5DA7A
- testing.iconUnset#707a8c
- testing.message.error.decorationForeground#FF7474
- testing.message.error.lineBackground#FF747415
- testing.message.info.decorationForeground#45CAC2
- testing.message.info.lineBackground#45CAC215
- testing.peekBorder#F29E74
- testing.peekHeaderBackground#232834
- testing.runAction#a6cc70
- testing.uncoveredBackground#FF747420
- testing.uncoveredGutterBackground#FF7474
- textBlockQuote.background#232834
- textLink.activeForeground#4582CA
- textLink.foreground#45CAC2
- textPreformat.foreground#A2C4EB
- titleBar.activeBackground#151b25
- titleBar.activeForeground#cbccc6
- titleBar.border#191e2a
- titleBar.inactiveBackground#191F2B
- titleBar.inactiveForeground#707a8c
- walkThrough.embeddedEditorBackground#232834
- walkthrough.stepTitle.foreground#F29E74
- welcomePage.background#191F2B
- welcomePage.progress.background#191e2a
- welcomePage.progress.foreground#F29E74
- welcomePage.tileBackground#1d2431
- welcomePage.tileBorder#191e2a
- welcomePage.tileHoverBackground#222833
- widget.shadow#141925
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| punctuation, meta.brace | #7581A0 | — |
| meta.class storage.type, storage.modifier, storage.type.type, support.type.primitive, new.expr entity.name.function, meta.var.expr storage, variable.language.this, keyword, meta.function storage.type.function, constant.language.boolean, constant.language.null, storage.type.primitive, support.type.object.module | #F5DA7A | italic |
| support.class.builtin | #FFB46A | bold |
| keyword.operator | #FFE074 | normal |
| entity.name.type | #9be7ff | — |
| entity.name.function | #45CAC2 | — |
| variable | #BBD2EE | normal |
| variable.parameter | #9BC9FF | italic |
| meta.class support.class, meta.class entity.name.type.class, entity.other.inherited-class | #9BC9FF | bold |
| variable.language.super | #45CAC2 | bold |
| meta.object-literal.key | #FCFCCE | — |
| meta.object.member function, meta.object.member meta.function-call, meta.brace.round meta.object.member | #45CAC2 | — |
| meta.object.member variable | #FCFCCE | — |
| string | #F6ABA8 | — |
| constant.numeric | #F7C0A5 | — |
| meta.import variable.other.readwrite | #9BC9FF | — |
| comment | #414B5D | — |
| source.vue support.class | #BAB4FF | — |
| entity.name.tag, meta.tag, entity.name.tag.pug | #FFCC6A | — |
| text.html.derivative, meta.jsx.children | #F7F7E5 | — |
| entity.other.attribute-name, meta.directive | #45CAC2 | — |
| meta.tag.other entity.name.tag, support.class.component | #BAB4FF | — |
| meta.tag variable | #9BC9FF | — |
| source.css entity.other.attribute-name.class, source.postcss entity.other.attribute-name.class, source.scss entity.other.attribute-name.class, source.less entity.other.attribute-name.class, source.css meta.property-list, source.postcss meta.property-list, source.scss meta.property-list, source.less meta.property-list | — | — |
| source.css meta.property-list, source.postcss meta.property-list, source.scss meta.property-list, source.less meta.property-list | #f7f7e5 | — |
| source.css punctuation.function, source.postcss punctuation.function, source.scss punctuation.function, source.less punctuation.function | #fef8f5 | normal |
| source.css variable, source.postcss variable, source.scss variable, source.less variable, source.css punctuation.definition.variable, source.postcss punctuation.definition.variable, source.scss punctuation.definition.variable, source.less punctuation.definition.variable | #9BC9FF | — |
| source.css meta.function.misc.css, source.postcss meta.function.misc.css, source.scss meta.function.misc.css, source.less meta.function.misc.css | #45CAC2 | bold |
| source.css support.constant, source.postcss support.constant, source.scss support.constant, source.less support.constant, source.css constant.numeric, source.postcss constant.numeric, source.scss constant.numeric, source.less constant.numeric | #FFB480 | — |
| constant.other, support.constant.color | #FFE074 | italic |
| meta.structure.dictionary support.type.property-name | #FFE074 | — |
| meta.structure.dictionary.value, string.quoted.double.json | #F6ABA8 | — |
| meta.structure.dictionary.value constant.language | — | italic |
| markup.heading | #F6ABA8 | — |
| markup.heading.setext | #7E8694 | — |
| markup.quote | #DA95EF | — |
| meta.image.inline | #FFE074 | — |
| meta.link.inline | #FFCC6A | — |
| markup.bold | — | bold |
| markup.italic.markdown | — | italic |