Calm Coder Themes
Publisher: Sumit PalThemes in package: 4
Four easy-on-the-eyes VS Code themes — Candy, Dark Candy, Light, and Dark — built for long coding sessions.
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.activeBackground#93c5fd15
- activityBar.activeBorder#93c5fd
- activityBar.background#111827
- activityBar.border#374151
- activityBar.foreground#f9fafb
- activityBar.inactiveForeground#4b5563
- activityBarBadge.background#3b82f6
- activityBarBadge.foreground#ffffff
- badge.background#3b82f6
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#93c5fd
- breadcrumb.background#111827
- breadcrumb.focusForeground#f9fafb
- breadcrumb.foreground#6b7280
- breadcrumbPicker.background#1f2937
- button.background#3b82f6
- button.foreground#ffffff
- button.hoverBackground#2563eb
- button.secondaryBackground#4b5563
- button.secondaryForeground#f9fafb
- button.secondaryHoverBackground#6b7280
- checkbox.background#1f2937
- checkbox.border#374151
- debugToolBar.background#1f2937
- debugToolBar.border#374151
- descriptionForeground#9ca3af
- diffEditor.insertedTextBackground#34d39920
- diffEditor.insertedTextBorder#34d39960
- diffEditor.removedTextBackground#f8717120
- diffEditor.removedTextBorder#f8717160
- disabledForeground#6b7280
- dropdown.background#1f2937
- dropdown.border#374151
- dropdown.foreground#f9fafb
- dropdown.listBackground#1f2937
- editor.background#111827
- editor.findMatchBackground#fbbf2450
- editor.findMatchBorder#fbbf24
- editor.findMatchHighlightBackground#fbbf2428
- editor.foreground#f9fafb
- editor.inactiveSelectionBackground#93c5fd15
- editor.lineHighlightBackground#1f2937
- editor.lineHighlightBorder#263348
- editor.selectionBackground#93c5fd25
- editor.selectionHighlightBackground#93c5fd18
- editor.wordHighlightBackground#34d39920
- editor.wordHighlightBorder#34d39960
- editor.wordHighlightStrongBackground#34d39935
- editorBracketMatch.background#93c5fd20
- editorBracketMatch.border#93c5fd
- editorCursor.foreground#93c5fd
- editorGroup.border#374151
- editorGroupHeader.tabsBackground#111827
- editorGroupHeader.tabsBorder#374151
- editorGutter.addedBackground#34d399
- editorGutter.background#111827
- editorGutter.deletedBackground#f87171
- editorGutter.modifiedBackground#fbbf24
- editorHoverWidget.background#1f2937
- editorHoverWidget.border#374151
- editorIndentGuide.activeBackground1#4b5563
- editorIndentGuide.background1#374151
- editorLineNumber.activeForeground#6b7280
- editorLineNumber.foreground#374151
- editorLink.activeForeground#93c5fd
- editorOverviewRuler.border#374151
- editorSuggestWidget.background#1f2937
- editorSuggestWidget.border#374151
- editorSuggestWidget.foreground#f9fafb
- editorSuggestWidget.highlightForeground#93c5fd
- editorSuggestWidget.selectedBackground#93c5fd18
- editorWhitespace.foreground#374151
- editorWidget.background#1f2937
- editorWidget.border#374151
- editorWidget.foreground#f9fafb
- errorForeground#f87171
- focusBorder#93c5fdcc
- foreground#f9fafb
- gitDecoration.addedResourceForeground#34d399
- gitDecoration.conflictingResourceForeground#fbbf24
- gitDecoration.deletedResourceForeground#f87171
- gitDecoration.ignoredResourceForeground#4b5563
- gitDecoration.modifiedResourceForeground#fbbf24
- gitDecoration.untrackedResourceForeground#34d399
- icon.foreground#93c5fd
- input.background#374151
- input.border#4b5563
- input.foreground#f9fafb
- input.placeholderForeground#6b7280
- inputOption.activeBackground#93c5fd20
- inputOption.activeBorder#93c5fd
- inputOption.activeForeground#f9fafb
- list.activeSelectionBackground#93c5fd20
- list.activeSelectionForeground#f9fafb
- list.dropBackground#93c5fd18
- list.errorForeground#f87171
- list.focusBackground#93c5fd18
- list.focusForeground#f9fafb
- list.highlightForeground#93c5fd
- list.hoverBackground#1f2937
- list.hoverForeground#f9fafb
- list.inactiveSelectionBackground#374151
- list.inactiveSelectionForeground#f9fafb
- list.warningForeground#fbbf24
- menu.background#1f2937
- menu.foreground#f9fafb
- menu.selectionBackground#93c5fd18
- menu.selectionForeground#f9fafb
- menu.separatorBackground#374151
- minimap.background#111827
- minimap.selectionHighlight#93c5fd40
- minimapGutter.addedBackground#34d399
- minimapGutter.deletedBackground#f87171
- minimapGutter.modifiedBackground#fbbf24
- notificationLink.foreground#93c5fd
- notifications.background#1f2937
- notifications.border#374151
- notifications.foreground#f9fafb
- panel.background#111827
- panel.border#374151
- panelTitle.activeBorder#93c5fd
- panelTitle.activeForeground#f9fafb
- panelTitle.inactiveForeground#6b7280
- progressBar.background#3b82f6
- scrollbarSlider.activeBackground#93c5fd40
- scrollbarSlider.background#37415180
- scrollbarSlider.hoverBackground#4b5563
- selection.background#93c5fd30
- sideBar.background#111827
- sideBar.border#374151
- sideBar.foreground#f9fafb
- sideBarSectionHeader.background#1f2937
- sideBarSectionHeader.border#374151
- sideBarSectionHeader.foreground#f9fafb
- sideBarTitle.foreground#f9fafb
- statusBar.background#1e3a5f
- statusBar.border#263348
- statusBar.debuggingBackground#b91c1c
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#93c5fd
- statusBar.noFolderBackground#374151
- statusBar.noFolderForeground#f9fafb
- statusBarItem.remoteBackground#3b82f6
- statusBarItem.remoteForeground#ffffff
- tab.activeBackground#1f2937
- tab.activeBorderTop#93c5fd
- tab.activeForeground#f9fafb
- tab.border#374151
- tab.hoverBackground#1f2937
- tab.inactiveBackground#111827
- tab.inactiveForeground#6b7280
- terminal.ansiBlack#374151
- terminal.ansiBlue#60a5fa
- terminal.ansiBrightBlack#6b7280
- terminal.ansiBrightBlue#93c5fd
- terminal.ansiBrightCyan#67e8f9
- terminal.ansiBrightGreen#6ee7b7
- terminal.ansiBrightMagenta#d8b4fe
- terminal.ansiBrightRed#fca5a5
- terminal.ansiBrightWhite#f9fafb
- terminal.ansiBrightYellow#fde68a
- terminal.ansiCyan#22d3ee
- terminal.ansiGreen#34d399
- terminal.ansiMagenta#a78bfa
- terminal.ansiRed#f87171
- terminal.ansiWhite#d1d5db
- terminal.ansiYellow#fbbf24
- terminal.background#111827
- terminal.foreground#f9fafb
- terminal.selectionBackground#93c5fd30
- terminalCursor.foreground#93c5fd
- textBlockQuote.background#1f2937
- textBlockQuote.border#93c5fd
- textCodeBlock.background#1f2937
- textLink.activeForeground#bfdbfe
- textLink.foreground#93c5fd
- textPreformat.foreground#f9fafb
- textSeparator.foreground#374151
- titleBar.activeBackground#111827
- titleBar.activeForeground#f9fafb
- titleBar.border#374151
- titleBar.inactiveBackground#0f172a
- titleBar.inactiveForeground#6b7280
- widget.shadow#bf555560
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #4b5563 | italic |
| keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier | #93c5fd | bold |
| string, string.template, string.quoted | #34d399 | — |
| constant.character.escape, string.regexp | #22d3ee | — |
| constant.numeric | #f472b6 | — |
| constant.language.boolean, constant.language.null, constant.language.undefined | #818cf8 | — |
| constant, variable.other.constant | #f472b6 | — |
| variable, variable.other | #f9fafb | — |
| variable.parameter | #9ca3af | italic |
| entity.name.function, meta.function-call, support.function | #fbbf24 | — |
| entity.name.class, entity.name.type, support.class | #818cf8 | — |
| entity.name.type.interface | #22d3ee | italic |
| variable.other.property, support.type.property-name, meta.object-literal.key | #bfdbfe | — |
| keyword.operator | #9ca3af | — |
| punctuation | #6b7280 | — |
| entity.name.tag | #f87171 | — |
| entity.other.attribute-name | #818cf8 | — |
| support.type.property-name.css | #bfdbfe | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #f87171 | — |
| support.type.property-name.json | #93c5fd | — |
| markup.heading | #93c5fd | bold |
| markup.bold | #f9fafb | bold |
| markup.underline.link | #60a5fa | — |
| markup.inline.raw | #22d3ee | — |
| meta.decorator, entity.name.function.decorator | #fbbf24 | italic |
| support.variable, support.function.builtin | #22d3ee | — |
| invalid, invalid.illegal | #f9fafb | — |