Lowkey Code Theme

Name: Lowkey Code Theme
Author: monaq

Publisher: monaqThemes in package: 4

A calm, low-contrast VS Code theme focused on readability, reduced eye strain, and minimal cognitive load.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Lowkey Code Theme — Lowkey Code Focus Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#78A9FF
activityBar.background#0E1319
activityBar.foreground#8E99AA
activityBarBadge.background#78A9FF
activityBarBadge.foreground#0C1015
breadcrumb.background#11161D
breadcrumb.focusForeground#EFF3F9
breadcrumb.foreground#768195
button.background#78A9FF
button.foreground#0C1015
button.hoverBackground#91B9FF
commandCenter.activeBackground#1B2432
commandCenter.background#141A23
commandCenter.foreground#BFC9D8
descriptionForeground#8E98A8
diffEditor.insertedLineBackground#10271D
diffEditor.insertedTextBackground#163226
diffEditor.insertedTextBorder#4CAA73
diffEditor.removedLineBackground#281717
diffEditor.removedTextBackground#3A2020
diffEditor.removedTextBorder#D06A6A
diffEditorOverview.insertedForeground#55B783CC
diffEditorOverview.removedForeground#F06A6ACC
dropdown.background#141A23
dropdown.border#222C3A
dropdown.foreground#D7DCE5
editor.background#0D1117
editor.findMatchBackground#314C78
editor.findMatchBorder#78A9FF
editor.findMatchHighlightBackground#1D2A3E
editor.foreground#D7DCE5
editor.inactiveSelectionBackground#1A2330
editor.lineHighlightBackground#131922
editor.lineHighlightBorder#00000000
editor.selectionBackground#223047
editor.wordHighlightBackground#1E2B3F
editor.wordHighlightStrongBackground#273954
editorBracketMatch.background#1B2637
editorBracketMatch.border#78A9FF
editorCursor.foreground#78A9FF
editorError.foreground#F06A6A
editorGroup.border#1C2430
editorGroupHeader.tabsBackground#11161D
editorGutter.deletedBackground#F06A6A
editorGutter.insertedBackground#55B783
editorGutter.modifiedBackground#78A9FF
editorHint.foreground#55B783
editorHoverWidget.background#141A23
editorHoverWidget.border#212B39
editorIndentGuide.activeBackground1#314055
editorIndentGuide.background1#1F2631
editorInfo.foreground#78A9FF
editorInlayHint.background#151B24
editorInlayHint.foreground#7D8898
editorLineNumber.activeForeground#D5DCE7
editorLineNumber.foreground#4C5668
editorOverviewRuler.deletedForeground#F06A6ACC
editorOverviewRuler.insertedForeground#55B783CC
editorOverviewRuler.modifiedForeground#78A9FFCC
editorSuggestWidget.background#141A23
editorSuggestWidget.border#212B39
editorSuggestWidget.highlightForeground#78A9FF
editorSuggestWidget.selectedBackground#1D2633
editorWarning.foreground#E2A65A
editorWidget.background#141A23
errorForeground#F06A6A
focusBorder#78A9FF
foreground#D7DCE5
gitDecoration.addedResourceForeground#55B783
gitDecoration.conflictingResourceForeground#E2A65A
gitDecoration.deletedResourceForeground#F06A6A
gitDecoration.modifiedResourceForeground#78A9FF
gitDecoration.untrackedResourceForeground#55B783
icon.foreground#97A1B1
input.background#141A23
input.border#222C3A
input.foreground#D7DCE5
input.placeholderForeground#6C778B
list.activeSelectionBackground#1C2735
list.activeSelectionForeground#EFF3F9
list.highlightForeground#78A9FF
list.hoverBackground#171F2B
list.inactiveSelectionBackground#151D28
minimap.background#0B0F14
minimap.findMatchHighlight#456591
minimap.selectionHighlight#2A3D59
notifications.background#141A23
notifications.border#1C2430
panel.background#10151C
panel.border#1C2430
panelTitle.activeForeground#D7DCE5
panelTitle.inactiveForeground#7B8698
peekView.border#78A9FF
peekViewEditor.background#0F141B
peekViewResult.background#121821
peekViewResult.selectionBackground#1D2633
peekViewTitle.background#161D27
scrollbarSlider.activeBackground#6F7F9690
scrollbarSlider.background#46536566
scrollbarSlider.hoverBackground#5A687C78
sideBar.background#11161D
sideBar.border#1C2430
sideBar.foreground#C3CBD7
statusBar.background#10141A
statusBar.border#1B2330
statusBar.foreground#BFC9D8
tab.activeBackground#161C24
tab.activeBorderTop#78A9FF
tab.activeForeground#EFF3F9
tab.border#1C2430
tab.inactiveBackground#11161D
tab.inactiveForeground#758195
terminal.ansiBlack#49515F
terminal.ansiBlue#78A9FF
terminal.ansiCyan#58B7CB
terminal.ansiGreen#55B783
terminal.ansiMagenta#A88BFF
terminal.ansiRed#F06A6A
terminal.ansiWhite#E8EDF6
terminal.ansiYellow#D5A25D
terminal.background#0D1117
terminal.foreground#D7DCE5
titleBar.activeBackground#11161D
titleBar.activeForeground#C8D1DE
titleBar.border#1C2430
window.activeBorder#202733
window.inactiveBorder#171C24

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#788293	italic
keyword, storage.modifier, keyword.control	#87B0FF	—
storage.type, support.type, entity.name.type, entity.name.class, support.class	#63B9E3	—
support.function.builtin, support.function	#8FC2FF	—
entity.name.function	#A88BFF	bold
entity.name.alias, variable.other.readwrite, variable	#D7DCE5	—
variable.language.special, variable.language.this	#F06A6A	—
support.type.property-name.json, meta.object-literal.key, entity.other.attribute-name	#87B0FF	—
entity.name.tag, meta.tag.sgml, punctuation.definition.tag	#63B9E3	—
string	#C99B5B	—
constant.numeric, constant.language, constant.language.boolean, variable.other.constant, variable.other.enummember	#E2A65A	—
meta.decorator, storage.type.annotation, punctuation.definition.decorator	#8FC2FF	—
markup.heading, markup.heading entity.name	#87B0FF	bold
markup.inline.raw, markup.fenced_code.block, string.regexp	#B89A63	—
markup.inserted, diff.inserted	#55B783	—
markup.deleted, diff.deleted	#F06A6A	—