Skip to main content
Home Theme VS Code Covert Slate Dark Theme My customized version of slate-contrast theme from rainglow.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #1e1e25 activityBar.foreground #bdbdc5 activityBarBadge.background #566981 activityBarBadge.foreground #ffffff badge.background #566981 badge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #bdbdc5 — comment #515166 — string #9eb2d9 — constant.numeric #9eb2d9 — constant.language
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Covert Slate Dark Theme — Covert Slate Dark Theme
button.background
#89a7b1
button.foreground #ffffff
dropdown.background #141419
dropdown.border #141419
dropdown.foreground #bdbdc5
editor.background #19191f
editor.foreground #bdbdc5
editor.hoverHighlightBackground #56698122
editor.lineHighlightBackground #202027
editor.selectionBackground #56698155
editor.wordHighlightBackground #cbdad522
editor.wordHighlightStrongBackground #89a7b122
editorBracketMatch.background #56698144
editorBracketMatch.border #89a7b1
editorCursor.foreground #f8f8f0
editorGroupHeader.tabsBackground #202027
editorGutter.addedBackground #a7da1e
editorGutter.background #141419
editorGutter.deletedBackground #e61f44
editorGutter.modifiedBackground #f7b83d
editorIndentGuide.background #30303b
editorLineNumber.foreground #474757
editorLink.activeForeground #566981
editorOverviewRuler.addedForeground #a7da1e
editorOverviewRuler.deletedForeground #e61f44
editorOverviewRuler.errorForeground #e61f44
editorOverviewRuler.findMatchForeground #89a7b155
editorOverviewRuler.infoForeground #9d37fc
editorOverviewRuler.modifiedForeground #f7b83d
editorOverviewRuler.warningForeground #f7b83d
editorRuler.foreground #30303b
editorSuggestWidget.foreground #bdbdc5
editorSuggestWidget.highlightForeground #566981
editorSuggestWidget.selectedBackground #474757
editorWhitespace.foreground #30303b
editorWidget.background #30303b
editorWidget.border #474757
extensionButton.prominentBackground #566981
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #6d829d
focusBorder #566981
foreground #bdbdc5
gitDecoration.conflictingResourceForeground #9d37fc
gitDecoration.deletedResourceForeground #e61f44
gitDecoration.ignoredResourceForeground #5d5d74
gitDecoration.modifiedResourceForeground #f7b83d
gitDecoration.untrackedResourceForeground #a7da1e
input.background #0e0e11
input.border #3b3b49
input.foreground #bdbdc5
input.placeholderForeground #424252
inputOption.activeBorder #89a7b1
list.activeSelectionBackground #89a7b1
list.activeSelectionForeground #19191f
list.focusBackground #3b3b49
list.hoverBackground #202027
list.inactiveSelectionBackground #19191f
panel.background #30303b
panel.border #474757
panelTitle.activeBorder #566981
panelTitle.inactiveForeground #696982
peekView.border #566981
peekViewEditor.background #101014
peekViewEditor.matchHighlightBackground #89a7b155
peekViewEditorGutter.background #141419
peekViewResult.background #24242d
peekViewResult.fileForeground #dedeed
peekViewResult.lineForeground #cacae2
peekViewResult.matchHighlightBackground #89a7b155
peekViewResult.selectionBackground #1e1e25
peekViewResult.selectionForeground #bdbdc5
peekViewTitle.background #141419
peekViewTitleDescription.foreground #e1e1ef
peekViewTitleLabel.foreground #bdbdc5
progressBar.background #cbdad5
scrollbar.shadow #020203
scrollbarSlider.activeBackground #566981aa
scrollbarSlider.background #474757aa
scrollbarSlider.hoverBackground #56698155
sideBar.background #24242d
sideBar.foreground #bdbdc5
sideBarSectionHeader.background #2b2b36
sideBarSectionHeader.foreground #bdbdc5
statusBar.background #566981
statusBar.foreground #ffffff
statusBar.noFolderBackground #89a7b1
tab.inactiveBackground #22222a
tab.inactiveForeground #75758f
terminal.ansiBlack #24242d
terminal.ansiBlue #cbdad5
terminal.ansiBrightBlack #474757
terminal.ansiBrightBlue #ffffff
terminal.ansiBrightCyan #c6d5da
terminal.ansiBrightGreen #8b9cb2
terminal.ansiBrightMagenta #8b9cb2
terminal.ansiBrightRed #f03e5f
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #c6d5da
terminal.ansiCyan #89a7b1
terminal.ansiGreen #566981
terminal.ansiMagenta #566981
terminal.ansiRed #ba0e2e
terminal.ansiWhite #fbfbfd
terminal.ansiYellow #89a7b1
terminal.background #0e0e11
terminal.foreground #bdbdc5
titleBar.activeBackground #101014
#89a7b1
constant.character, constant.other #89a7b1 —
entity.name.class #89a7b1 underline
entity.other.inherited-class #89a7b1
entity.name.function #cbdad5
variable.parameter #bdbdc5
entity.other.attribute-name #89a7b1
support.type, support.class #89a7b1
invalid.deprecated #cf433e —
meta.structure.dictionary.json string.quoted.double.json #9eb2d9 —
meta.diff, meta.diff.header #515166 —
constant.numeric.line-number.find-in-files - match #8FBE00A0 —
entity.name.filename.find-in-files #E6DB74 —
meta.property-value, support.constant.property-value, constant.other.color #9eb2d9 —
meta.structure.dictionary.json string.quoted.double.json #89a7b1 —
meta.structure.dictionary.value.json string.quoted.double.json #9eb2d9 —
meta.property-name support.type.property-name —
meta.property-value punctuation.separator.key-value #bdbdc5 —
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as #566981 —
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin #566981
variable.parameter.function.coffee #9eb2d9
entity.name.section.markdown #89a7b1 —
punctuation.definition.heading.markdown #566981 —
markup.raw.inline.markdown #9eb2d9 —
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown #566981 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown #566981 —
punctuation.definition.metadata.markdown #566981 —
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown #566981
markup.bold.markdown, markup.italic.markdown #566981 —
markup.italic.markdown — italic
markup.bold.markdown — bold
markup.raw.block.markdown #664e4d —
markup.deleted.git_gutter #e61f44 —
markup.inserted.git_gutter #a7da1e —
markup.changed.git_gutter #f7b83d —
meta.template.expression #bdbdc5 —
meta.object-literal.key #5d78a4
entity.name.function #89A7B1
variable.object.property #9eb2d9
punctuation.separator.key-value #566981
variable.object.property #5d78a4
variable.language.this #5d78a4
export interface User {
id : string ;
name : string ;
role : " admin " | " member " ;
tags : string [] ;
}
/**
* Fetch user data by ID
* @ param id
* @ returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( ` /api/users/ ${ id }` , {
method : " GET " ,
headers : { Accept : " application/json " },
} ) ;
if ( ! response.ok ) {
throw new Error ( ` HTTP ${ response.status }` ) ;
}
return ( await response. json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return ` Hello, ${ user.name } ! ` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project
main*
Button.tsx
31
$
export interface User {
id : string ;
name : string ;
role : " admin " | " member " ;
tags : string [] ;
}
/**
* Fetch user data by ID
* @ param id
* @ returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( ` /api/users/ ${ id }` , {
method : " GET " ,
headers : { Accept : " application/json " },
} ) ;
if ( ! response.ok ) {
throw new Error ( ` HTTP ${ response.status }` ) ;
}
return ( await response. json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return ` Hello, ${ user.name } ! ` ;
}
Covert Slate Dark Theme | Coding Theme