Codex Palette for VS Code
Publisher: smallyuThemes in package: 43
All 43 Codex appearance presets for VS Code, with faithful colors and one-click system appearance switching.
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.activeBorder#88c0d0
- activityBar.background#2e3440
- activityBar.border#3b4252
- activityBar.foreground#d8dee9
- activityBar.inactiveForeground#4c566a
- activityBarBadge.background#88c0d0
- activityBarBadge.foreground#2e3440
- badge.background#88c0d0
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#d8dee9
- breadcrumb.background#2e3440
- breadcrumb.focusForeground#d8dee9
- breadcrumb.foreground#737f97
- button.background#88c0d0ee
- button.foreground#2e3440
- button.hoverBackground#88c0d0
- button.secondaryBackground#2e3440
- button.secondaryForeground#d8dee9
- button.secondaryHoverBackground#3b4252
- checkbox.background#2e3440
- checkbox.border#3b4252
- commandCenter.background#2e3440
- commandCenter.border#3b4252
- commandCenter.foreground#737f97
- debugIcon.continueForeground#a3be8c
- debugIcon.disconnectForeground#bf616a
- debugIcon.pauseForeground#81a1c1
- debugIcon.restartForeground#a3be8c
- debugIcon.startForeground#a3be8c
- debugIcon.stepIntoForeground#81a1c1
- debugIcon.stepOutForeground#81a1c1
- debugIcon.stepOverForeground#81a1c1
- debugIcon.stopForeground#bf616a
- debugToolBar.background#2e3440
- descriptionForeground#d8dee9e6
- diffEditor.diagonalFill#737f9726
- diffEditor.insertedLineBackground#a3be8c18
- diffEditor.insertedTextBackground#a3be8c30
- diffEditor.removedLineBackground#bf616a18
- diffEditor.removedTextBackground#bf616a30
- disabledForeground#d8dee966
- dropdown.background#2e3440
- dropdown.border#3b4252
- dropdown.foreground#d8dee9
- editor.background#2e3440
- editor.findMatchBackground#D8DEE966
- editor.findMatchHighlightBackground#D8DEE935
- editor.findRangeHighlightBackground#88c0d018
- editor.foreground#d8dee9
- editor.hoverHighlightBackground#88c0d018
- editor.inactiveSelectionBackground#88c0d033
- editor.lineHighlightBackground#2e3440
- editor.selectionBackground#434c5ecc
- editor.selectionHighlightBackground#88c0d033
- editor.wordHighlightBackground#81a1c125
- editor.wordHighlightStrongBackground#b48ead30
- editorBracketHighlight.foreground1#bf616a
- editorBracketHighlight.foreground2#D8DEE9
- editorBracketHighlight.foreground3#a3be8c
- editorBracketHighlight.foreground4#81a1c1
- editorBracketHighlight.foreground5#b48ead
- editorBracketHighlight.foreground6#81a1c1
- editorBracketMatch.background#88c0d022
- editorBracketMatch.border#88c0d0
- editorBracketPairGuide.activeBackground1#88c0d0a6
- editorBracketPairGuide.activeBackground2#88c0d0a6
- editorBracketPairGuide.activeBackground3#88c0d0a6
- editorBracketPairGuide.activeBackground4#88c0d0a6
- editorBracketPairGuide.activeBackground5#88c0d0a6
- editorBracketPairGuide.activeBackground6#88c0d0a6
- editorBracketPairGuide.background1#d8dee924
- editorBracketPairGuide.background2#d8dee924
- editorBracketPairGuide.background3#d8dee924
- editorBracketPairGuide.background4#d8dee924
- editorBracketPairGuide.background5#d8dee924
- editorBracketPairGuide.background6#d8dee924
- editorCursor.foreground#d8dee9
- editorError.foreground#bf616a
- editorGroup.border#3b4252
- editorGroupHeader.tabsBackground#2e3440
- editorGroupHeader.tabsBorder#3b425200
- editorGutter.addedBackground#a3be8c
- editorGutter.deletedBackground#bf616a
- editorGutter.modifiedBackground#81a1c1
- editorHint.foreground#a3be8c
- editorHoverWidget.background#2e3440
- editorHoverWidget.border#3b4252
- editorIndentGuide.activeBackground1#88c0d0a6
- editorIndentGuide.background1#d8dee924
- editorInfo.foreground#81a1c1
- editorLineNumber.activeForeground#737f97
- editorLineNumber.foreground#4c566a
- editorSuggestWidget.background#2e3440
- editorSuggestWidget.border#3b4252
- editorSuggestWidget.selectedBackground#3b4252
- editorWarning.foreground#ebcb8b
- editorWhitespace.foreground#d8dee924
- editorWidget.background#2e3440
- editorWidget.border#3b4252
- editorWidget.foreground#d8dee9
- errorForeground#bf616a
- focusBorder#3b4252
- foreground#d8dee9
- gitDecoration.addedResourceForeground#a3be8c
- gitDecoration.conflictingResourceForeground#D8DEE9
- gitDecoration.deletedResourceForeground#bf616a
- gitDecoration.ignoredResourceForeground#4c566a
- gitDecoration.modifiedResourceForeground#ebcb8b
- gitDecoration.renamedResourceForeground#b48ead
- gitDecoration.untrackedResourceForeground#a3be8c
- icon.foreground#737f97
- input.background#2e3440
- input.border#3b4252
- input.foreground#d8dee9
- input.placeholderForeground#4c566a
- inputOption.activeBackground#88c0d055
- inputOption.activeBorder#88c0d0
- inputValidation.errorBackground#bf616a22
- inputValidation.errorBorder#bf616a
- inputValidation.infoBackground#81a1c122
- inputValidation.infoBorder#81a1c1
- inputValidation.warningBackground#ebcb8b22
- inputValidation.warningBorder#ebcb8b
- list.activeSelectionBackground#88c0d055
- list.activeSelectionForeground#d8dee9
- list.errorForeground#bf616a
- list.focusBackground#88c0d044
- list.highlightForeground#88c0d0
- list.hoverBackground#3b4252
- list.inactiveSelectionBackground#88c0d033
- list.warningForeground#ebcb8b
- menu.background#2e3440
- menu.foreground#d8dee9
- menu.selectionBackground#434c5ecc
- menu.separatorBackground#3b4252
- minimap.background#2e3440
- minimap.findMatchHighlight#D8DEE980
- minimap.selectionHighlight#88c0d066
- notificationCenter.border#3b4252
- notificationCenterHeader.background#2e3440
- notifications.background#2e3440
- notifications.border#3b4252
- notifications.foreground#d8dee9
- panel.background#2e3440
- panel.border#3b4252
- panelTitle.activeBorder#88c0d0
- panelTitle.activeForeground#d8dee9
- panelTitle.inactiveForeground#737f97
- peekView.border#88c0d0
- peekViewEditor.background#2e3440
- peekViewResult.background#2e3440
- peekViewResult.selectionBackground#434c5ecc
- peekViewTitle.background#2e3440
- pickerGroup.border#3b4252
- pickerGroup.foreground#88c0d0
- progressBar.background#88c0d0
- quickInput.background#2e3440
- quickInput.foreground#d8dee9
- scrollbar.shadow#00000088
- scrollbarSlider.activeBackground#d8dee945
- scrollbarSlider.background#d8dee918
- scrollbarSlider.hoverBackground#d8dee92e
- sideBar.background#2e3440
- sideBar.border#3b4252
- sideBar.foreground#d8dee9
- sideBarSectionHeader.background#3b4252
- sideBarSectionHeader.border#3b4252
- sideBarSectionHeader.foreground#d8dee9
- sideBarTitle.foreground#d8dee9
- statusBar.background#2e3440
- statusBar.border#3b4252
- statusBar.debuggingBackground#bf616a
- statusBar.debuggingForeground#111111
- statusBar.foreground#737f97
- statusBar.noFolderBackground#2e3440
- tab.activeBackground#2e3440
- tab.activeBorder#2e3440
- tab.activeBorderTop#88c0d0
- tab.activeForeground#d8dee9
- tab.border#3b4252
- tab.inactiveBackground#2e3440
- tab.inactiveForeground#737f97
- terminal.ansiBlack#3b4252
- terminal.ansiBlue#81a1c1
- terminal.ansiBrightBlack#4c566a
- terminal.ansiBrightBlue#81a1c1
- terminal.ansiBrightCyan#8fbcbb
- terminal.ansiBrightGreen#a3be8c
- terminal.ansiBrightMagenta#b48ead
- terminal.ansiBrightRed#bf616a
- terminal.ansiBrightWhite#eceff4
- terminal.ansiBrightYellow#ebcb8b
- terminal.ansiCyan#88c0d0
- terminal.ansiGreen#a3be8c
- terminal.ansiMagenta#b48ead
- terminal.ansiRed#bf616a
- terminal.ansiWhite#e5e9f0
- terminal.ansiYellow#ebcb8b
- terminal.background#2e3440
- terminal.foreground#d8dee9
- terminal.selectionBackground#434c5ecc
- terminalCursor.foreground#88c0d0
- textBlockQuote.background#2e3440
- textBlockQuote.border#88c0d0
- textCodeBlock.background#2e3440
- textLink.activeForeground#88c0d0
- textLink.foreground#88c0d0
- titleBar.activeBackground#2e3440
- titleBar.activeForeground#d8dee9
- titleBar.border#3b4252
- titleBar.inactiveBackground#2e3440
- titleBar.inactiveForeground#4c566a
- tree.inactiveIndentGuidesStroke#d8dee924
- tree.indentGuidesStroke#d8dee952
- widget.shadow#00000088
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #737f97 | — |
| string, constant.other.symbol, markup.inline.raw | #a3be8c | — |
| constant.numeric, constant.language.boolean, constant.language.null | #81a1c1 | — |
| constant, variable.other.constant | #D8DEE9 | — |
| keyword, storage.type, storage.modifier | #bf616a | — |
| variable, meta.object-literal.key, support.variable.property, meta.property-name | #D8DEE9 | — |
| variable.parameter, function.parameter | #737f97 | — |
| entity.name.function, support.function, variable.function, meta.function-call | #b48ead | — |
| entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class | #b48ead | — |
| entity.name.namespace, entity.name.type.namespace | #D8DEE9 | — |
| keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment | #81a1c1 | — |
| punctuation, meta.brace | #737f97 | — |
| entity.name.tag, punctuation.definition.tag | #bf616a | — |
| entity.other.attribute-name | #81a1c1 | — |
| string.regexp, constant.regexp | #81a1c1 | — |
| markup.heading, entity.name.section | #bf616a | bold |
| markup.bold, punctuation.definition.bold | #D8DEE9 | bold |
| markup.italic, punctuation.definition.italic | #bf616a | italic |
| markup.underline.link, string.other.link | #88c0d0 | underline |
| markup.inserted | #a3be8c | — |
| markup.deleted | #bf616a | — |
| markup.changed | #D8DEE9 | — |
| invalid | #ffffff | — |