orng for VS Code
Publisher: Jordy KafweThemes in package: 2
Cloudflare-inspired orng light + dark themes for Visual Studio Code.
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.
- activityBar.background#10131A
- activityBar.foreground#EEEEEE
- activityBar.inactiveForeground#808080
- activityBarBadge.background#EC5B2B
- activityBarBadge.foreground#10131A
- badge.background#EC5B2B
- badge.foreground#10131A
- breadcrumb.activeSelectionForeground#EEEEEE
- breadcrumb.focusForeground#EEEEEE
- breadcrumb.foreground#808080
- breadcrumbPicker.background#10131A
- button.background#EE7948
- button.foreground#10131A
- button.hoverBackground#EC5B2B
- chat.buttonBackground#EE7948
- chat.buttonForeground#10131A
- chat.codeBlockBackground#10131A
- chat.inputBackground#1E232B
- chat.inputForeground#EEEEEE
- chat.inputPlaceholderForeground#606060
- chat.requestBackground#1E232B
- chat.requestBorder#323232
- chat.slashCommandBackground#EC5B2B20
- chat.slashCommandForeground#EC5B2B
- debugIcon.breakpointForeground#EC5B2B
- debugToolBar.background#161A22
- descriptionForeground#808080
- diffEditor.insertedTextBackground#6BA1E61A
- diffEditor.removedTextBackground#E06C751A
- dropdown.background#1E232B
- dropdown.border#323232
- editor.background#161A22
- editor.findMatchBackground#EC5B2B66
- editor.findMatchHighlightBackground#EE794866
- editor.foreground#EEEEEE
- editor.inactiveSelectionBackground#2D343F7F
- editor.lineHighlightBackground#1E232B
- editor.selectionBackground#EC5B2B40
- editor.selectionHighlightBackground#EC5B2B33
- editor.wordHighlightBackground#EC5B2B1A
- editor.wordHighlightStrongBackground#48484866
- editorBracketHighlight.foreground1#EC5B2B
- editorBracketHighlight.foreground2#56B6C2
- editorBracketHighlight.foreground3#D4AF37
- editorBracketHighlight.foreground4#E5C07B
- editorBracketHighlight.foreground5#EE7948
- editorBracketHighlight.foreground6#E06C75
- editorBracketHighlight.unexpectedBracket.foreground#E06C75
- editorBracketMatch.background#2D343F
- editorBracketMatch.border#EC5B2B
- editorCursor.foreground#EC5B2B
- editorError.foreground#E06C75
- editorGroup.border#323232
- editorGroup.focusedEmptyBorder#EC5B2B
- editorGroupHeader.noTabsBackground#161A22
- editorGroupHeader.tabsBackground#10131A
- editorGutter.background#161A22
- editorHint.foreground#808080
- editorHoverWidget.background#10131A
- editorHoverWidget.border#3C3C3C
- editorHoverWidget.foreground#EEEEEE
- editorIndentGuide.activeBackground#3C3C3C33
- editorIndentGuide.background#3C3C3C1A
- editorInfo.foreground#56B6C2
- editorLineNumber.activeForeground#EEEEEE
- editorLineNumber.foreground#484848
- editorLink.activeForeground#EC5B2B
- editorSuggestWidget.background#10131A
- editorSuggestWidget.border#3C3C3C
- editorSuggestWidget.foreground#EEEEEE
- editorSuggestWidget.highlightForeground#EC5B2B
- editorSuggestWidget.selectedBackground#2D343F
- editorWarning.foreground#EC5B2B
- editorWhitespace.foreground#606060
- editorWidget.background#10131A
- editorWidget.border#3C3C3C
- editorWidget.foreground#EEEEEE
- errorForeground#E06C75
- focusBorder#EC5B2B
- foreground#EEEEEE
- gitDecoration.addedResourceForeground#6BA1E6
- gitDecoration.conflictingResourceForeground#EC5B2B
- gitDecoration.deletedResourceForeground#E06C75
- gitDecoration.ignoredResourceForeground#606060
- gitDecoration.modifiedResourceForeground#E5C07B
- gitDecoration.untrackedResourceForeground#7FD88F
- inlineChat.background#161A22
- inlineChat.border#323232
- inlineChat.shadow#00000040
- inlineChatInput.background#1E232B
- inlineChatInput.border#323232
- inlineChatInput.focusBorder#EC5B2B
- inlineChatInput.placeholderForeground#606060
- input.background#1E232B
- input.border#323232
- input.foreground#EEEEEE
- input.placeholderForeground#606060
- inputOption.activeBorder#EC5B2B
- inputValidation.errorBackground#E06C75
- inputValidation.errorBorder#4C2B2C
- inputValidation.infoBackground#56B6C2
- inputValidation.infoBorder#2A5A5F
- inputValidation.warningBackground#EC5B2B
- inputValidation.warningBorder#762E16
- list.activeSelectionBackground#1E232B
- list.activeSelectionForeground#EEEEEE
- list.dropBackground#60606080
- list.focusBackground#1E232B
- list.highlightForeground#EE7948
- list.hoverBackground#252B35
- list.inactiveSelectionBackground#1E232BBF
- menu.background#10131A
- menu.foreground#EEEEEE
- menu.selectionBackground#2D343F
- menu.selectionForeground#EEEEEE
- menu.separatorBackground#3C3C3C
- minimap.background#161A22
- minimap.errorHighlight#E06C75
- minimap.findMatchHighlight#EE794866
- minimap.selectionHighlight#EC5B2B66
- minimap.warningHighlight#EC5B2B
- notificationCenterHeader.background#161A22
- notifications.background#10131A
- notifications.border#323232
- notifications.foreground#EEEEEE
- panel.background#10131A
- panel.border#323232
- panelTitle.activeForeground#EEEEEE
- panelTitle.inactiveForeground#808080
- peekView.border#323232
- peekViewEditor.background#1E232B
- peekViewTitle.background#10131A
- progressBar.background#EC5B2B
- quickInput.background#10131A
- quickInput.foreground#EEEEEE
- quickInputList.focusBackground#2D343F
- quickInputTitle.background#161A22
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#606060FF
- scrollbarSlider.background#48484880
- scrollbarSlider.hoverBackground#606060CC
- selection.background#2D343F
- sideBar.background#10131A
- sideBar.dropBackground#60606080
- sideBar.foreground#EEEEEE
- sideBarSectionHeader.background#161A22
- sideBarTitle.foreground#EEEEEE
- statusBar.background#161A22
- statusBar.debuggingBackground#EC5B2B
- statusBar.debuggingForeground#10131A
- statusBar.foreground#EEEEEE
- statusBar.noFolderBackground#161A22
- statusBarItem.hoverBackground#2D343F
- tab.activeBackground#161A22
- tab.activeBorderTop#EC5B2B
- tab.activeForeground#EEEEEE
- tab.border#10131A
- tab.hoverBackground#1E232B
- tab.hoverForeground#EEEEEE
- tab.inactiveBackground#10131A
- tab.inactiveForeground#808080
- terminal.ansiBlack#161A22
- terminal.ansiBlue#56B6C2
- terminal.ansiBrightBlack#606060
- terminal.ansiBrightBlue#7CCCD5
- terminal.ansiBrightCyan#7CCCD5
- terminal.ansiBrightGreen#A3E8B0
- terminal.ansiBrightMagenta#F5A07A
- terminal.ansiBrightRed#F28B93
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#F0D49A
- terminal.ansiCyan#56B6C2
- terminal.ansiDimBlack#808080
- terminal.ansiDimBlue#45929B
- terminal.ansiDimCyan#45929B
- terminal.ansiDimGreen#65B073
- terminal.ansiDimMagenta#C4613A
- terminal.ansiDimRed#B55860
- terminal.ansiDimWhite#808080
- terminal.ansiDimYellow#B89A62
- terminal.ansiGreen#7FD88F
- terminal.ansiMagenta#EE7948
- terminal.ansiRed#E06C75
- terminal.ansiWhite#EEEEEE
- terminal.ansiYellow#E5C07B
- terminal.background#161A22
- terminal.foreground#EEEEEE
- terminalCursor.foreground#EC5B2B
- textLink.activeForeground#EE7948
- textLink.foreground#56B6C2
- titleBar.activeBackground#161A22
- titleBar.activeForeground#EEEEEE
- titleBar.inactiveBackground#10131A
- titleBar.inactiveForeground#808080
- tree.indentGuidesStroke#3C3C3C
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #808080 | italic |
| keyword, storage.type, storage.modifier, punctuation.definition.keyword, punctuation.section.embedded.begin, punctuation.section.embedded.end | #EC5B2B | — |
| entity.name.function, support.function, meta.function-call, variable.function | #EE7948 | — |
| entity.name.tag, support.class.component, entity.name.section, markup.heading | #EC5B2B | bold |
| entity.other.attribute-name | #EE7948 | — |
| variable.other.property, support.type.property-name | #679CD9 | — |
| string, markup.inline.raw, meta.embedded.assembly | #6BA1E6 | — |
| string.regexp, string.regexp.character-class, constant.other.symbol | #5A94DB | — |
| constant.numeric, constant.language, support.constant, variable.other.constant | #FFF7F1 | — |
| variable, entity.name.variable, meta.definition.variable, support.variable | #E06C75 | — |
| variable.parameter, meta.function.parameters | #EE7948 | — |
| support.type, entity.name.type, storage.type.cs, meta.type.annotation | #E5C07B | — |
| punctuation, meta.brace, meta.bracket | #EEEEEE | — |
| entity.name.namespace, support.other.namespace, meta.namespace | #EEEEEE | — |
| markup.bold | #EE7948 | bold |
| markup.italic | #E5C07B | italic |
| markup.underline.link, string.other.link | #56B6C2 | underline |
| markup.inserted | #6BA1E6 | — |
| markup.deleted | #E06C75 | — |
| markup.changed | #E5C07B | — |
| constant.character.escape | #808080 | — |
| meta.diff.header, meta.diff.range | #EE7948 | — |
| meta.object-literal.key, support.type.property-name.css, support.type.property-name.json | #679CD9 | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison | #56B6C2 | — |
| entity.name.type.enum, support.type.enum | #E06C75 | — |
| entity.name.function.constructor, support.class.constructor, new.expr entity.name.type | #EE7948 | — |
| variable.language | #EE7948 | — |
| meta.preprocessor, keyword.control.directive, punctuation.definition.directive | #EC5B2B | — |
| entity.name.label | #EC5B2B | — |
| constant.other.enum, variable.other.enummember | #EE7948 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css | #E5C07B | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #EE7948 | — |
| punctuation.definition.template-expression, punctuation.section.interpolation | #EC5B2B | — |
| punctuation.definition.list, beginning.punctuation.definition.list | #EC5B2B | — |
| markup.raw, markup.inline.raw.string, fenced_code.block | #6BA1E6 | — |
| meta.link.inline.markdown, markup.underline.link.markdown | #EC5B2B | — |
| comment.unused, meta.inlay-hint | #606060 | italic |
| constant.language.boolean | #FFF7F1 | — |
| meta.embedded, source.embedded | #EEEEEE | — |
| punctuation.definition.heading, punctuation.definition.bold, punctuation.definition.italic | #EC5B2B | — |
| comment.documentation | #808080 | italic |
| constant.character.escape | #808080 | — |
| punctuation.definition.list_marker | #EC5B2B | — |
| variable.language.special | #EE7948 | — |
| meta.inlay-hint, comment.unused | #606060 | italic |
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#FFF7F1
- activityBar.foreground#1A1A1A
- activityBar.inactiveForeground#8A8A8A
- activityBarBadge.background#EC5B2B
- activityBarBadge.foreground#FFFFFF
- badge.background#EC5B2B
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#1A1A1A
- breadcrumb.focusForeground#1A1A1A
- breadcrumb.foreground#8A8A8A
- breadcrumbPicker.background#FFF7F1
- button.background#C94D24
- button.foreground#FFFFFF
- button.hoverBackground#EC5B2B
- chat.buttonBackground#C94D24
- chat.buttonForeground#FFFFFF
- chat.codeBlockBackground#FFFFFF
- chat.inputBackground#F5F0EB
- chat.inputForeground#1A1A1A
- chat.inputPlaceholderForeground#A0A0A0
- chat.requestBackground#F5F0EB
- chat.requestBorder#D4D4D4
- chat.slashCommandBackground#EC5B2B15
- chat.slashCommandForeground#EC5B2B
- debugIcon.breakpointForeground#EC5B2B
- debugToolBar.background#FFFFFF
- descriptionForeground#8A8A8A
- diffEditor.insertedTextBackground#0062D11A
- diffEditor.removedTextBackground#D1383D1A
- dropdown.background#F5F0EB
- dropdown.border#D4D4D4
- editor.background#FFF7F1
- editor.findMatchBackground#EC5B2B66
- editor.findMatchHighlightBackground#C94D2466
- editor.foreground#1A1A1A
- editor.inactiveSelectionBackground#E1E1E199
- editor.lineHighlightBackground#FFF7F1
- editor.selectionBackground#EC5B2B40
- editor.selectionHighlightBackground#EC5B2B33
- editor.wordHighlightBackground#EC5B2B25
- editor.wordHighlightStrongBackground#B8B8B866
- editorBracketHighlight.foreground1#EC5B2B
- editorBracketHighlight.foreground2#318795
- editorBracketHighlight.foreground3#DAA520
- editorBracketHighlight.foreground4#B0851F
- editorBracketHighlight.foreground5#C94D24
- editorBracketHighlight.foreground6#D1383D
- editorBracketHighlight.unexpectedBracket.foreground#D1383D
- editorBracketMatch.background#F5F0EB
- editorBracketMatch.border#EC5B2B
- editorCursor.foreground#EC5B2B
- editorError.foreground#D1383D
- editorGroup.border#D4D4D4
- editorGroup.focusedEmptyBorder#EC5B2B
- editorGroupHeader.noTabsBackground#FFFFFF
- editorGroupHeader.tabsBackground#FFF7F1
- editorGutter.background#FFF7F1
- editorHint.foreground#8A8A8A
- editorHoverWidget.background#FFF7F1
- editorHoverWidget.border#D4D4D4
- editorHoverWidget.foreground#1A1A1A
- editorIndentGuide.activeBackground#D4D4D433
- editorIndentGuide.background#D4D4D41A
- editorInfo.foreground#318795
- editorLineNumber.activeForeground#1A1A1A
- editorLineNumber.foreground#B8B8B8
- editorLink.activeForeground#EC5B2B
- editorSuggestWidget.background#FFF7F1
- editorSuggestWidget.border#D4D4D4
- editorSuggestWidget.foreground#1A1A1A
- editorSuggestWidget.highlightForeground#EC5B2B
- editorSuggestWidget.selectedBackground#E1E1E1
- editorWarning.foreground#EC5B2B
- editorWhitespace.foreground#A0A0A0
- editorWidget.background#FFF7F1
- editorWidget.border#D4D4D4
- editorWidget.foreground#1A1A1A
- errorForeground#D1383D
- focusBorder#EC5B2B
- foreground#1A1A1A
- gitDecoration.addedResourceForeground#0062D1
- gitDecoration.conflictingResourceForeground#EC5B2B
- gitDecoration.deletedResourceForeground#D1383D
- gitDecoration.ignoredResourceForeground#A0A0A0
- gitDecoration.modifiedResourceForeground#B0851F
- gitDecoration.untrackedResourceForeground#3D9A57
- inlineChat.background#FFF7F1
- inlineChat.border#D4D4D4
- inlineChat.shadow#00000020
- inlineChatInput.background#F5F0EB
- inlineChatInput.border#D4D4D4
- inlineChatInput.focusBorder#EC5B2B
- inlineChatInput.placeholderForeground#A0A0A0
- input.background#FFFFFF
- input.border#D4D4D4
- input.foreground#1A1A1A
- input.placeholderForeground#A0A0A0
- inputOption.activeBorder#EC5B2B
- inputValidation.errorBackground#FBDFD9
- inputValidation.errorBorder#F6C6BD
- inputValidation.infoBackground#E2F2F4
- inputValidation.infoBorder#C4E5E8
- inputValidation.warningBackground#FDE8E0
- inputValidation.warningBorder#F8CFC0
- list.activeSelectionBackground#FFF7F1
- list.activeSelectionForeground#1A1A1A
- list.dropBackground#A0A0A080
- list.focusBackground#FFF7F1
- list.highlightForeground#C94D24
- list.hoverBackground#EBEBEB
- list.inactiveSelectionBackground#FFF7F1BF
- menu.background#FFF7F1
- menu.foreground#1A1A1A
- menu.selectionBackground#E1E1E1
- menu.selectionForeground#1A1A1A
- menu.separatorBackground#D4D4D4
- minimap.background#FFF7F1
- minimap.errorHighlight#D1383D
- minimap.findMatchHighlight#C94D2466
- minimap.selectionHighlight#EC5B2B66
- minimap.warningHighlight#EC5B2B
- notificationCenterHeader.background#FFFFFF
- notifications.background#FFF7F1
- notifications.border#D4D4D4
- notifications.foreground#1A1A1A
- panel.background#FFF7F1
- panel.border#D4D4D4
- panelTitle.activeForeground#1A1A1A
- panelTitle.inactiveForeground#8A8A8A
- peekView.border#D4D4D4
- peekViewEditor.background#F5F0EB
- peekViewTitle.background#FFF7F1
- progressBar.background#EC5B2B
- quickInput.background#FFF7F1
- quickInput.foreground#1A1A1A
- quickInputList.focusBackground#E1E1E1
- quickInputTitle.background#FFFFFF
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#A0A0A0FF
- scrollbarSlider.background#B8B8B880
- scrollbarSlider.hoverBackground#A0A0A0CC
- selection.background#E1E1E1
- sideBar.background#FFF7F1
- sideBar.dropBackground#A0A0A080
- sideBar.foreground#1A1A1A
- sideBarSectionHeader.background#FFFFFF
- sideBarTitle.foreground#1A1A1A
- statusBar.background#FFFFFF
- statusBar.debuggingBackground#EC5B2B
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#1A1A1A
- statusBar.noFolderBackground#FFFFFF
- statusBarItem.hoverBackground#E1E1E1
- tab.activeBackground#FFFFFF
- tab.activeBorderTop#EC5B2B
- tab.activeForeground#1A1A1A
- tab.border#FFF7F1
- tab.hoverBackground#F5F0EB
- tab.hoverForeground#1A1A1A
- tab.inactiveBackground#FFF7F1
- tab.inactiveForeground#8A8A8A
- terminal.ansiBlack#1A1A1A
- terminal.ansiBlue#318795
- terminal.ansiBrightBlack#8A8A8A
- terminal.ansiBrightBlue#4BA3B0
- terminal.ansiBrightCyan#4BA3B0
- terminal.ansiBrightGreen#5AB872
- terminal.ansiBrightMagenta#EC5B2B
- terminal.ansiBrightRed#E05A5E
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#C99D3A
- terminal.ansiCyan#318795
- terminal.ansiDimBlack#A0A0A0
- terminal.ansiDimBlue#276C77
- terminal.ansiDimCyan#276C77
- terminal.ansiDimGreen#317B46
- terminal.ansiDimMagenta#A13E1D
- terminal.ansiDimRed#A82D31
- terminal.ansiDimWhite#D4D4D4
- terminal.ansiDimYellow#8D6A19
- terminal.ansiGreen#3D9A57
- terminal.ansiMagenta#C94D24
- terminal.ansiRed#D1383D
- terminal.ansiWhite#FFFFFF
- terminal.ansiYellow#B0851F
- terminal.background#FFF7F1
- terminal.foreground#1A1A1A
- terminalCursor.foreground#EC5B2B
- textLink.activeForeground#C94D24
- textLink.foreground#318795
- titleBar.activeBackground#FFFFFF
- titleBar.activeForeground#1A1A1A
- titleBar.inactiveBackground#FFF7F1
- titleBar.inactiveForeground#8A8A8A
- tree.indentGuidesStroke#D4D4D4
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8A8A8A | italic |
| keyword, storage.type, storage.modifier, punctuation.definition.keyword, punctuation.section.embedded.begin, punctuation.section.embedded.end | #EC5B2B | — |
| entity.name.function, support.function, meta.function-call, variable.function | #C94D24 | — |
| entity.name.tag, support.class.component, entity.name.section, markup.heading | #EC5B2B | bold |
| entity.other.attribute-name | #C94D24 | — |
| variable.other.property, support.type.property-name | #679CD9 | — |
| string, markup.inline.raw, meta.embedded.assembly | #0062D1 | — |
| string.regexp, string.regexp.character-class, constant.other.symbol | #0055B8 | — |
| constant.numeric, constant.language, support.constant, variable.other.constant | #EC5B2B | — |
| variable, entity.name.variable, meta.definition.variable, support.variable | #D1383D | — |
| variable.parameter, meta.function.parameters | #C94D24 | — |
| support.type, entity.name.type, storage.type.cs, meta.type.annotation | #B0851F | — |
| punctuation, meta.brace, meta.bracket | #1A1A1A | — |
| entity.name.namespace, support.other.namespace, meta.namespace | #1A1A1A | — |
| markup.bold | #C94D24 | bold |
| markup.italic | #B0851F | italic |
| markup.underline.link, string.other.link | #318795 | underline |
| markup.inserted | #0062D1 | — |
| markup.deleted | #D1383D | — |
| markup.changed | #B0851F | — |
| constant.character.escape | #8A8A8A | — |
| meta.diff.header, meta.diff.range | #C94D24 | — |
| meta.object-literal.key, support.type.property-name.css, support.type.property-name.json | #679CD9 | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison | #318795 | — |
| entity.name.type.enum, support.type.enum | #D1383D | — |
| entity.name.function.constructor, support.class.constructor, new.expr entity.name.type | #C94D24 | — |
| variable.language | #C94D24 | — |
| meta.preprocessor, keyword.control.directive, punctuation.definition.directive | #EC5B2B | — |
| entity.name.label | #EC5B2B | — |
| constant.other.enum, variable.other.enummember | #C94D24 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css | #B0851F | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #C94D24 | — |
| punctuation.definition.template-expression, punctuation.section.interpolation | #EC5B2B | — |
| punctuation.definition.list, beginning.punctuation.definition.list | #EC5B2B | — |
| markup.raw, markup.inline.raw.string, fenced_code.block | #0062D1 | — |
| meta.link.inline.markdown, markup.underline.link.markdown | #EC5B2B | — |
| comment.unused, meta.inlay-hint | #A0A0A0 | italic |
| constant.language.boolean | #EC5B2B | — |
| meta.embedded, source.embedded | #1A1A1A | — |
| punctuation.definition.heading, punctuation.definition.bold, punctuation.definition.italic | #EC5B2B | — |
| comment.documentation | #8A8A8A | italic |
| constant.character.escape | #8A8A8A | — |
| punctuation.definition.list_marker | #EC5B2B | — |
| variable.language.special | #C94D24 | — |
| meta.inlay-hint, comment.unused | #A0A0A0 | italic |