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#f25e5e
- activityBar.background#f9f9f9
- activityBar.border#00000014
- activityBar.foreground#000000cc
- activityBar.inactiveForeground#00000033
- activityBarBadge.background#138AF2
- activityBarBadge.foreground#FFFFFF
- badge.background#f25e5e
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#000000
- breadcrumb.background#FFFFFF
- breadcrumb.focusForeground#000000
- breadcrumb.foreground#919191
- button.background#138AF2
- button.foreground#FFFFFF
- button.hoverBackground#138AF2
- button.secondaryBackground#fcfcfc
- button.secondaryForeground#000000
- button.secondaryHoverBackground#0000000f
- checkbox.background#fcfcfc
- checkbox.border#00000014
- commandCenter.background#fcfcfc
- commandCenter.border#00000014
- commandCenter.foreground#919191
- debugIcon.continueForeground#006B4F
- debugIcon.disconnectForeground#B12424
- debugIcon.pauseForeground#138AF2
- debugIcon.restartForeground#006B4F
- debugIcon.startForeground#006B4F
- debugIcon.stepIntoForeground#138AF2
- debugIcon.stepOutForeground#138AF2
- debugIcon.stepOverForeground#138AF2
- debugIcon.stopForeground#B12424
- debugToolBar.background#fcfcfc
- descriptionForeground#919191
- diffEditor.diagonalFill#91919126
- diffEditor.insertedLineBackground#006B4F12
- diffEditor.insertedTextBackground#006B4F20
- diffEditor.removedLineBackground#B1242412
- diffEditor.removedTextBackground#B1242420
- disabledForeground#00000066
- dropdown.background#fcfcfc
- dropdown.border#00000014
- dropdown.foreground#000000
- editor.background#FFFFFF
- editor.findMatchBackground#0000004d
- editor.findMatchHighlightBackground#00000026
- editor.findRangeHighlightBackground#f25e5e18
- editor.foreground#000000
- editor.hoverHighlightBackground#f25e5e18
- editor.inactiveSelectionBackground#f25e5e1f
- editor.lineHighlightBackground#fcfcfc
- editor.selectionBackground#fdfdfd
- editor.selectionHighlightBackground#f25e5e1f
- editor.wordHighlightBackground#138AF218
- editor.wordHighlightStrongBackground#9A1B6E1f
- editorBracketHighlight.foreground1#B12424
- editorBracketHighlight.foreground2#000000
- editorBracketHighlight.foreground3#006B4F
- editorBracketHighlight.foreground4#138AF2
- editorBracketHighlight.foreground5#9A1B6E
- editorBracketHighlight.foreground6#138AF2
- editorBracketMatch.background#f25e5e22
- editorBracketMatch.border#f25e5e
- editorBracketPairGuide.activeBackground1#f25e5e8c
- editorBracketPairGuide.activeBackground2#f25e5e8c
- editorBracketPairGuide.activeBackground3#f25e5e8c
- editorBracketPairGuide.activeBackground4#f25e5e8c
- editorBracketPairGuide.activeBackground5#f25e5e8c
- editorBracketPairGuide.activeBackground6#f25e5e8c
- editorBracketPairGuide.background1#00000018
- editorBracketPairGuide.background2#00000018
- editorBracketPairGuide.background3#00000018
- editorBracketPairGuide.background4#00000018
- editorBracketPairGuide.background5#00000018
- editorBracketPairGuide.background6#00000018
- editorCursor.foreground#138AF2
- editorError.foreground#B12424
- editorGroup.border#00000014
- editorGroupHeader.tabsBackground#fcfcfc
- editorGroupHeader.tabsBorder#fefefe
- editorGutter.addedBackground#006B4F
- editorGutter.deletedBackground#B12424
- editorGutter.modifiedBackground#138AF2
- editorHint.foreground#006B4F
- editorHoverWidget.background#fcfcfc
- editorHoverWidget.border#00000014
- editorIndentGuide.activeBackground1#f25e5e8c
- editorIndentGuide.background1#00000018
- editorInfo.foreground#138AF2
- editorLineNumber.activeForeground#919191
- editorLineNumber.foreground#00000033
- editorSuggestWidget.background#fcfcfc
- editorSuggestWidget.border#00000014
- editorSuggestWidget.selectedBackground#0000000f
- editorWarning.foreground#F8A300
- editorWhitespace.foreground#00000018
- editorWidget.background#fcfcfc
- editorWidget.border#00000014
- editorWidget.foreground#000000
- errorForeground#B12424
- focusBorder#fcfcfc
- foreground#000000
- gitDecoration.addedResourceForeground#006B4F
- gitDecoration.conflictingResourceForeground#000000
- gitDecoration.deletedResourceForeground#B12424
- gitDecoration.ignoredResourceForeground#00000033
- gitDecoration.modifiedResourceForeground#F8A300
- gitDecoration.renamedResourceForeground#9A1B6E
- gitDecoration.untrackedResourceForeground#006B4F
- icon.foreground#919191
- input.background#fcfcfc
- input.border#00000014
- input.foreground#000000
- input.placeholderForeground#00000033
- inputOption.activeBackground#f25e5e22
- inputOption.activeBorder#f25e5e
- inputValidation.errorBackground#B1242412
- inputValidation.errorBorder#B12424
- inputValidation.infoBackground#138AF212
- inputValidation.infoBorder#138AF2
- inputValidation.warningBackground#F8A30012
- inputValidation.warningBorder#F8A300
- list.activeSelectionBackground#f25e5e22
- list.activeSelectionForeground#000000
- list.errorForeground#B12424
- list.focusBackground#f25e5e1f
- list.highlightForeground#f25e5e
- list.hoverBackground#0000000f
- list.inactiveSelectionBackground#f25e5e14
- list.warningForeground#F8A300
- menu.background#fcfcfc
- menu.foreground#000000
- menu.selectionBackground#fdfdfd
- menu.separatorBackground#00000014
- minimap.background#FFFFFF
- minimap.findMatchHighlight#00000080
- minimap.selectionHighlight#f25e5e66
- notificationCenter.border#00000014
- notificationCenterHeader.background#fcfcfc
- notifications.background#fcfcfc
- notifications.border#00000014
- notifications.foreground#000000
- panel.background#FFFFFF
- panel.border#00000014
- panelTitle.activeBorder#f25e5e
- panelTitle.activeForeground#000000
- panelTitle.inactiveForeground#919191
- peekView.border#f25e5e
- peekViewEditor.background#FFFFFF
- peekViewResult.background#fcfcfc
- peekViewResult.selectionBackground#fdfdfd
- peekViewTitle.background#fcfcfc
- pickerGroup.border#00000014
- pickerGroup.foreground#f25e5e
- progressBar.background#f25e5e
- quickInput.background#fcfcfc
- quickInput.foreground#000000
- scrollbar.shadow#00000025
- scrollbarSlider.activeBackground#00000045
- scrollbarSlider.background#00000018
- scrollbarSlider.hoverBackground#0000002e
- sideBar.background#fcfcfc
- sideBar.border#00000014
- sideBar.foreground#00000099
- sideBarSectionHeader.background#fcfcfc
- sideBarSectionHeader.border#00000014
- sideBarSectionHeader.foreground#000000
- sideBarTitle.foreground#000000cc
- statusBar.background#fcfcfc
- statusBar.border#00000014
- statusBar.debuggingBackground#B12424
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#919191
- statusBar.noFolderBackground#fcfcfc
- tab.activeBackground#FFFFFF
- tab.activeBorder#FFFFFF
- tab.activeBorderTop#f25e5e
- tab.activeForeground#000000
- tab.border#00000014
- tab.inactiveBackground#fcfcfc
- tab.inactiveForeground#919191
- terminal.ansiBlack#FFFFFF
- terminal.ansiBlue#138AF2
- terminal.ansiBrightBlack#00000066
- terminal.ansiBrightBlue#138AF2
- terminal.ansiBrightCyan#138AF2
- terminal.ansiBrightGreen#006B4F
- terminal.ansiBrightMagenta#9A1B6E
- terminal.ansiBrightRed#B12424
- terminal.ansiBrightWhite#000000
- terminal.ansiBrightYellow#F8A300
- terminal.ansiCyan#138AF2
- terminal.ansiGreen#006B4F
- terminal.ansiMagenta#9A1B6E
- terminal.ansiRed#B12424
- terminal.ansiWhite#000000
- terminal.ansiYellow#F8A300
- terminal.background#FFFFFF
- terminal.foreground#000000
- terminal.selectionBackground#fdfdfd
- terminalCursor.foreground#f25e5e
- textBlockQuote.background#fcfcfc
- textBlockQuote.border#f25e5e
- textCodeBlock.background#fcfcfc
- textLink.activeForeground#138AF2
- textLink.foreground#f25e5e
- titleBar.activeBackground#fcfcfc
- titleBar.activeForeground#000000
- titleBar.border#00000014
- titleBar.inactiveBackground#fcfcfc
- titleBar.inactiveForeground#00000033
- tree.inactiveIndentGuidesStroke#00000018
- tree.indentGuidesStroke#0000003d
- widget.shadow#00000025
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #919191 | — |
| string, constant.other.symbol, markup.inline.raw | #006B4F | — |
| constant.numeric, constant.language.boolean, constant.language.null | #138AF2 | — |
| constant, variable.other.constant | #000000 | — |
| keyword, storage.type, storage.modifier | #B12424 | — |
| variable, meta.object-literal.key, support.variable.property, meta.property-name | #000000 | — |
| variable.parameter, function.parameter | #919191 | — |
| entity.name.function, support.function, variable.function, meta.function-call | #9A1B6E | — |
| entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class | #9A1B6E | — |
| entity.name.namespace, entity.name.type.namespace | #000000 | — |
| keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment | #138AF2 | — |
| punctuation, meta.brace | #919191 | — |
| entity.name.tag, punctuation.definition.tag | #B12424 | — |
| entity.other.attribute-name | #138AF2 | — |
| string.regexp, constant.regexp | #138AF2 | — |
| markup.heading, entity.name.section | #B12424 | bold |
| markup.bold, punctuation.definition.bold | #000000 | bold |
| markup.italic, punctuation.definition.italic | #B12424 | italic |
| markup.underline.link, string.other.link | #f25e5e | underline |
| markup.inserted | #006B4F | — |
| markup.deleted | #B12424 | — |
| markup.changed | #000000 | — |
| invalid | #ffffff | — |