Terracotta Cream
Publisher: Ilhan YapiciThemes in package: 2
Claude-inspired VS Code color theme.
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#E8DECA
- activityBar.foreground#3E2E22
- activityBarBadge.background#C65F3C
- activityBarBadge.foreground#F5EFE0
- badge.background#C65F3C
- badge.foreground#F5EFE0
- button.background#C65F3C
- button.foreground#F5EFE0
- button.hoverBackground#D87D5C
- dropdown.background#EFE6D6
- dropdown.border#D3C5AE
- dropdown.foreground#3E2E22
- editor.background#F5EFE0
- editor.foreground#3E2E22
- editor.lineHighlightBackground#E8DECA
- editor.selectionBackground#D3C5AE
- editorCursor.foreground#C65F3C
- editorGroup.border#D3C5AE
- editorGroup.dropBackground#D3C5AE80
- editorGroupHeader.tabsBackground#E8DECA
- editorIndentGuide.background1#D3C5AE
- editorLineNumber.activeForeground#C65F3C
- editorLineNumber.foreground#A89883
- editorWhitespace.foreground#D3C5AE80
- focusBorder#C65F3C
- input.background#EFE6D6
- input.border#D3C5AE
- input.foreground#3E2E22
- input.placeholderForeground#A89883
- list.activeSelectionBackground#C65F3C
- list.activeSelectionForeground#F5EFE0
- list.dropBackground#D3C5AE
- list.focusBackground#D3C5AE
- list.focusForeground#3E2E22
- list.highlightForeground#E8A887
- list.hoverBackground#E8DECA
- list.hoverForeground#3E2E22
- list.inactiveSelectionBackground#E8DECA
- list.inactiveSelectionForeground#3E2E22
- panel.background#F5EFE0
- panel.border#D3C5AE
- panelTitle.activeBorder#C65F3C
- panelTitle.activeForeground#3E2E22
- panelTitle.inactiveForeground#A89883
- peekView.border#C65F3C
- peekViewEditor.background#F5EFE0
- peekViewEditor.matchHighlightBackground#C65F3C40
- peekViewResult.background#E8DECA
- peekViewResult.matchHighlightBackground#C65F3C40
- peekViewResult.selectionBackground#D3C5AE
- peekViewTitle.background#E8DECA
- pickerGroup.foreground#C65F3C
- progressBar.background#C65F3C
- scrollbar.shadow#00000022
- scrollbarSlider.activeBackground#C65F3C80
- scrollbarSlider.background#D3C5AE80
- scrollbarSlider.hoverBackground#D3C5AEA0
- sideBar.background#E8DECA
- sideBar.foreground#3E2E22
- sideBarSectionHeader.background#DFD3BB
- sideBarSectionHeader.foreground#3E2E22
- sideBarTitle.foreground#C65F3C
- statusBar.background#E8DECA
- statusBar.debuggingBackground#C65F3C
- statusBar.debuggingForeground#F5EFE0
- statusBar.foreground#3E2E22
- statusBar.noFolderBackground#E8DECA
- statusBarItem.hoverBackground#D3C5AE
- statusBarItem.remoteBackground#C65F3C
- statusBarItem.remoteForeground#F5EFE0
- tab.activeBackground#F5EFE0
- tab.activeBorder#C65F3C
- tab.activeForeground#C65F3C
- tab.border#E8DECA
- tab.inactiveBackground#E8DECA
- tab.inactiveForeground#A89883
- terminal.ansiBlack#3E2E22
- terminal.ansiBlue#5B7C99
- terminal.ansiBrightBlack#A89883
- terminal.ansiBrightBlue#7E9CB9
- terminal.ansiBrightCyan#79AFB3
- terminal.ansiBrightGreen#93A885
- terminal.ansiBrightMagenta#AB84A8
- terminal.ansiBrightRed#D87D5C
- terminal.ansiBrightWhite#F5EFE0
- terminal.ansiBrightYellow#C6B982
- terminal.ansiCyan#599599
- terminal.ansiGreen#748C6A
- terminal.ansiMagenta#8C6789
- terminal.ansiRed#C65F3C
- terminal.ansiWhite#E6D7C3
- terminal.ansiYellow#A69962
- terminal.background#F5EFE0
- terminal.foreground#3E2E22
- titleBar.activeBackground#E8DECA
- titleBar.activeForeground#3E2E22
- titleBar.inactiveBackground#E8DECA
- titleBar.inactiveForeground#A89883
- tree.indentGuidesStroke#D3C5AE
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #A89883 | italic |
| variable, string constant.other.placeholder | #3E2E22 | — |
| constant.other.color | #3E2E22 | — |
| invalid, invalid.illegal | #E63E3E | — |
| keyword, storage.type, storage.modifier | #C65F3C | — |
| keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution | #B34924 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #D87D5C | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method | #5B7C99 | — |
| meta.block variable.other | #D87D5C | — |
| support.other.variable, string.other.link | #D87D5C | — |
| constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other | #A69962 | — |
| string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js | #748C6A | — |
| entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #A69962 | — |
| support.type | #599599 | — |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name | #599599 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #D87D5C | — |
| variable.language | #D87D5C | italic |
| entity.other.attribute-name | #C65F3C | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #A69962 | italic |
| entity.other.attribute-name.class | #A69962 | — |
| source.sass keyword.control | #5B7C99 | — |
| markup.inserted | #748C6A | — |
| markup.deleted | #D87D5C | — |
| markup.changed | #C65F3C | — |
| string.regexp | #599599 | — |
| constant.character.escape | #599599 | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #5B7C99 | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #D87D5C | italic |
| source.json meta.structure.dictionary.json support.type.property-name.json | #C65F3C | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #A69962 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #5B7C99 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #599599 | — |
| text.html.markdown, punctuation.definition.list_item.markdown | #3E2E22 | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #C65F3C | — |
| markup.quote | #A89883 | italic |
| string.other.link.title.markdown | #5B7C99 | — |
| string.other.link.description.title.markdown | #A69962 | — |
| constant.other.reference.link.markdown | #A69962 | — |
| markup.raw.block | #A69962 | — |
| markup.raw.block.fenced.markdown | #00000050 | — |
| punctuation.definition.fenced.markdown | #00000050 | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end | #3E2E22 | — |
| variable.language.fenced.markdown | #A89883 | — |
| meta.separator | #A89883 | bold |
| markup.table | #3E2E22 | — |
| punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx | #B34924 | — |
| entity.name.type.class.tsx, entity.name.type.interface.tsx | #A69962 | — |
| meta.type.parameters.tsx | #599599 | — |
| entity.name.tag.tsx, entity.name.tag.jsx | #D87D5C | — |
| support.class.component.tsx, support.class.component.jsx | #A69962 | italic |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...