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#2563eb15
- activityBar.activeBorder#2563eb
- activityBar.background#f9fafb
- activityBar.border#e5e7eb
- activityBar.foreground#1f2937
- activityBar.inactiveForeground#9ca3af
- activityBarBadge.background#2563eb
- activityBarBadge.foreground#f6fcff
- badge.background#2563eb
- badge.foreground#f6fcff
- breadcrumb.activeSelectionForeground#2563eb
- breadcrumb.background#f9fafb
- breadcrumb.focusForeground#1f2937
- breadcrumb.foreground#6b7280
- breadcrumbPicker.background#f6fcff
- button.background#2563eb
- button.foreground#f6fcff
- button.hoverBackground#1A6EAE
- button.secondaryBackground#4b5563
- button.secondaryForeground#f6fcff
- button.secondaryHoverBackground#374151
- checkbox.background#f6fcff
- checkbox.border#e5e7eb
- descriptionForeground#6b7280
- diffEditor.insertedTextBackground#10b98120
- diffEditor.removedTextBackground#ef444420
- disabledForeground#9ca3af
- dropdown.background#f6fcff
- dropdown.border#e5e7eb
- dropdown.foreground#1f2937
- dropdown.listBackground#f6fcff
- editor.background#f6fcff
- editor.findMatchBackground#f59e0b60
- editor.findMatchBorder#f59e0b
- editor.findMatchHighlightBackground#f59e0b30
- editor.foreground#1f2937
- editor.inactiveSelectionBackground#2563eb15
- editor.lineHighlightBackground#f8fafc
- editor.lineHighlightBorder#f3f4f6
- editor.selectionBackground#2563eb25
- editor.selectionHighlightBackground#2563eb18
- editor.wordHighlightBackground#10b98120
- editor.wordHighlightBorder#10b98160
- editor.wordHighlightStrongBackground#10b98135
- editorBracketMatch.background#2563eb20
- editorBracketMatch.border#2563eb
- editorCursor.foreground#2563eb
- editorGroup.border#e5e7eb
- editorGroupHeader.tabsBackground#f9fafb
- editorGroupHeader.tabsBorder#e5e7eb
- editorGutter.addedBackground#10b981
- editorGutter.background#f6fcff
- editorGutter.deletedBackground#ef4444
- editorGutter.modifiedBackground#f59e0b
- editorHoverWidget.background#f6fcff
- editorHoverWidget.border#e5e7eb
- editorIndentGuide.activeBackground1#d1d5db
- editorIndentGuide.background1#e5e7eb
- editorLineNumber.activeForeground#6b7280
- editorLineNumber.foreground#d1d5db
- editorLink.activeForeground#2563eb
- editorSuggestWidget.background#f6fcff
- editorSuggestWidget.border#e5e7eb
- editorSuggestWidget.foreground#1f2937
- editorSuggestWidget.highlightForeground#2563eb
- editorSuggestWidget.selectedBackground#2563eb18
- editorWhitespace.foreground#e5e7eb
- editorWidget.background#f6fcff
- editorWidget.border#e5e7eb
- editorWidget.foreground#1f2937
- errorForeground#ef4444
- focusBorder#2563ebcc
- foreground#1f2937
- gitDecoration.addedResourceForeground#10b981
- gitDecoration.conflictingResourceForeground#f59e0b
- gitDecoration.deletedResourceForeground#ef4444
- gitDecoration.ignoredResourceForeground#9ca3af
- gitDecoration.modifiedResourceForeground#f59e0b
- gitDecoration.untrackedResourceForeground#10b981
- icon.foreground#2563eb
- input.background#e5e7eb
- input.border#d1d5db
- input.foreground#1f2937
- input.placeholderForeground#9ca3af
- inputOption.activeBackground#2563eb20
- inputOption.activeBorder#2563eb
- inputOption.activeForeground#1f2937
- list.activeSelectionBackground#2563eb20
- list.activeSelectionForeground#1f2937
- list.errorForeground#ef4444
- list.focusBackground#2563eb18
- list.focusForeground#1f2937
- list.highlightForeground#2563eb
- list.hoverBackground#f3f4f6
- list.hoverForeground#1f2937
- list.inactiveSelectionBackground#f3f4f6
- list.inactiveSelectionForeground#1f2937
- list.warningForeground#f59e0b
- menu.background#f6fcff
- menu.foreground#1f2937
- menu.selectionBackground#2563eb18
- menu.selectionForeground#1f2937
- menu.separatorBackground#e5e7eb
- minimap.background#f6fcff
- minimap.selectionHighlight#2563eb60
- minimapGutter.addedBackground#10b981
- minimapGutter.deletedBackground#ef4444
- minimapGutter.modifiedBackground#f59e0b
- notificationLink.foreground#2563eb
- notifications.background#f6fcff
- notifications.border#e5e7eb
- notifications.foreground#1f2937
- panel.background#f9fafb
- panel.border#e5e7eb
- panelTitle.activeBorder#2563eb
- panelTitle.activeForeground#1f2937
- panelTitle.inactiveForeground#6b7280
- progressBar.background#2563eb
- scrollbarSlider.activeBackground#2563eb80
- scrollbarSlider.background#d1d5dbaa
- scrollbarSlider.hoverBackground#9ca3af
- selection.background#2563eb30
- sideBar.background#f9fafb
- sideBar.border#e5e7eb
- sideBar.foreground#1f2937
- sideBarSectionHeader.background#f3f4f6
- sideBarSectionHeader.border#e5e7eb
- sideBarSectionHeader.foreground#1f2937
- sideBarTitle.foreground#1f2937
- statusBar.background#2563eb
- statusBar.border#1A6EAE
- statusBar.debuggingBackground#ef4444
- statusBar.debuggingForeground#f6fcff
- statusBar.foreground#f6fcff
- statusBar.noFolderBackground#4b5563
- statusBar.noFolderForeground#f6fcff
- statusBarItem.remoteBackground#10b981
- statusBarItem.remoteForeground#f6fcff
- tab.activeBackground#f6fcff
- tab.activeBorderTop#2563eb
- tab.activeForeground#1f2937
- tab.border#e5e7eb
- tab.hoverBackground#f3f4f6
- tab.inactiveBackground#f9fafb
- tab.inactiveForeground#6b7280
- terminal.ansiBlack#1f2937
- terminal.ansiBlue#2563eb
- terminal.ansiBrightBlack#6b7280
- terminal.ansiBrightBlue#60a5fa
- terminal.ansiBrightCyan#22d3ee
- terminal.ansiBrightGreen#4ade80
- terminal.ansiBrightMagenta#c084fc
- terminal.ansiBrightRed#f87171
- terminal.ansiBrightWhite#f9fafb
- terminal.ansiBrightYellow#fbbf24
- terminal.ansiCyan#06b6d4
- terminal.ansiGreen#10b981
- terminal.ansiMagenta#8b5cf6
- terminal.ansiRed#ef4444
- terminal.ansiWhite#4b5563
- terminal.ansiYellow#f59e0b
- terminal.background#f6fcff
- terminal.foreground#1f2937
- terminal.selectionBackground#2563eb30
- terminalCursor.foreground#2563eb
- textBlockQuote.background#f3f4f6
- textBlockQuote.border#2563eb
- textCodeBlock.background#f3f4f6
- textLink.activeForeground#1A6EAE
- textLink.foreground#2563eb
- textPreformat.foreground#1f2937
- textSeparator.foreground#e5e7eb
- titleBar.activeBackground#f9fafb
- titleBar.activeForeground#1f2937
- titleBar.border#e5e7eb
- titleBar.inactiveBackground#f3f4f6
- titleBar.inactiveForeground#6b7280
- widget.shadow#e5e7ebaa
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #9ca3af | italic |
| keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier | #1A6EAE | bold |
| string, string.template, string.quoted | #16a34a | — |
| constant.character.escape, string.regexp | #06b6d4 | — |
| constant.numeric | #ea580c | — |
| constant.language.boolean, constant.language.null, constant.language.undefined | #7c3aed | — |
| variable, variable.other | #1f2937 | — |
| variable.parameter | #4b5563 | italic |
| entity.name.function, meta.function-call, support.function | #1A6EAE | — |
| entity.name.class, entity.name.type, support.class | #7c3aed | — |
| entity.name.type.interface | #0891b2 | italic |
| variable.other.property, support.type.property-name, meta.object-literal.key | #374151 | — |
| keyword.operator | #4b5563 | — |
| punctuation | #9ca3af | — |
| entity.name.tag | #dc2626 | — |
| entity.other.attribute-name | #7c3aed | — |
| support.type.property-name.css | #374151 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #dc2626 | — |
| support.type.property-name.json | #1A6EAE | — |
| markup.heading | #1A6EAE | bold |
| markup.underline.link | #2563eb | — |
| meta.decorator, entity.name.function.decorator | #d97706 | italic |