Skip to main content
Home Theme VS Code LookiFy - Dark & Light Themes LookiFy is a stylish and elegant VS Code theme extension that brings a sleek dark mode and a bright light mode for a polished coding experience. Enhance your workflow with beautifully crafted themes designed for both comfort and clarity.
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.activeBackground #B9E3F7 activityBar.activeBorder #3A8DD5 activityBar.background #E6F1F8 activityBar.border #A8C8E9 activityBar.dropBackground #D0E7F8 activityBar.foreground #2C2C2C tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment.unused.elixir #383a42 — comment, punctuation.definition.comment, comment.block.documentation punctuation.definition, string.comment, comment.block.documentation, comment.block #61D1B2 — comment.block.documentation variable, keyword.other.documentation, storage.type.class.jsdoc, comment.block variable.parameter, keyword.other.phpdoc, comment.block.documentation entity.name.type, meta.other.type.phpdoc support class #727378 — punctuation.comma.graphql, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.function, punctuation.brace, punctuation.terminator.statement, punctuation.delimiter.object.comma, punctuation.definition.entity, punctuation.definition, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.separator.key-value, punctuation.separator.dictionary, punctuation.terminator, punctuation.delimiter.comma, punctuation.separator.comma, punctuation.accessor, punctuation.separator.array, punctuation.section, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.separator.statement, punctuation.separator.parameter, punctuation.section.array.elixir, punctuation.separator.object.elixir, punctuation.section.embedded.elixir, punctuation.section.function.elixir, punctuation.section.scope.elixir, punctuation.section.embedded, meta.brace.round, meta.brace.square, meta.brace.curly, constant.name.attribute.tag.pug, punctuation.section.embedded, punctuation.separator.method, punctuation.separator, punctuation.other.comma, punctuation.bracket, keyword.control.ternary, string.interpolated.pug, support.function.interpolation.sass, punctuation.parenthesis.begin, punctuation.parenthesis.end, punctuation.operation.graphql, punctuation.colon.graphql
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
LookiFy - Dark & Light Themes — LookiFy Light mode LookiFy - Dark & Light Themes | Coding Theme
activityBar.inactiveForeground
#A8C8E9
activityBarBadge.background #3A8DD5
activityBarBadge.foreground #FFFFFF
badge.background #3A8DD5
badge.foreground #FFFFFF
button.background #3A8DD5
button.foreground #FFFFFF
button.hoverBackground #5BAFFF
descriptionForeground #2C2C2C
dropdown.background #f0f8fc
dropdown.border #3A8DD5
dropdown.foreground #2C2C2C
editor.background #f6f7fa
editor.findMatchBackground #B9E3F711
editor.findMatchHighlightBackground #B9E3F779
editor.findRangeHighlightBackground #B0D6E222
editor.foldBackground #F1F8FF
editor.foreground #2C2C2C
editor.hoverHighlightBackground #D0E7F833
editor.inactiveSelectionBackground #B0D6E644
editor.lineHighlightBackground #505b7d24
editor.minimap.autohide
editor.minimap.scale 2
editor.rangeHighlightBackground #B0D6E233
editor.selectionBackground #B0D6E8AA
editor.selectionHighlightBackground #B0D6E822
editor.wordHighlightBackground #FFD58044
editor.wordHighlightStrongBackground #61D1B244
editorBracketMatch.background #3A8DD533
editorBracketMatch.border #3A8DD5
editorCodeLens.foreground #A8C8E9
editorCursor.foreground #FFB64D
editorError.border #3A8DD5
editorError.foreground #D74C3C
editorGroup.border #3A8DD5
editorGroup.dropBackground #D0E7F8
editorGroup.emptyBackground #f0f8fc
editorGroupHeader.noTabsBackground #f0f8fc
editorGroupHeader.tabsBackground #f0f8fc
editorGroupHeader.tabsBorder #3A8DD5
editorGutter.addedBackground #61D1B2
editorGutter.background #F1F8FF
editorGutter.deletedBackground #D74C3C
editorGutter.modifiedBackground #FFB64D
editorHint.border #61D1B2
editorHint.foreground #61D1B2
editorHoverWidget.background #E6F1F8
editorHoverWidget.border #3A8DD5
editorIndentGuide.activeBackground #004e00
editorIndentGuide.background #A8C8E9
editorInfo.border #3A8DD5
editorInfo.foreground #3A8DD5
editorLineNumber.activeForeground #2C2C2C
editorLineNumber.foreground #7A9BB8
editorLink.activeForeground #3A8DD5
editorMarkerNavigation.background #f0f8fc
editorMarkerNavigationError.background #D74C3C
editorMarkerNavigationWarning.background #FFC107
editorRuler.foreground #A8C8E9
editorSuggestWidget.background #f0f8fc
editorSuggestWidget.border #3A8DD5
editorSuggestWidget.foreground #2C2C2C
editorSuggestWidget.highlightForeground #3A8DD5
editorSuggestWidget.selectedBackground #D0E7F8
editorWarning.border #3A8DD5
editorWarning.foreground #FFC107
editorWhitespace.foreground #00000022
editorWidget.background #f0f8fc
editorWidget.border #3A8DD5
errorForeground #D74C3C
input.background #f0f8fc
input.border #3A8DD5
input.foreground #2C2C2C
input.placeholderForeground #7A9BB8
inputOption.activeBorder #3A8DD5
inputValidation.errorBackground #FFD6D6
inputValidation.errorBorder #D74C3C
inputValidation.errorForeground #D74C3C
inputValidation.infoBackground #D0E7F8
inputValidation.infoBorder #3A8DD5
inputValidation.infoForeground #A4B9C9
inputValidation.warningBackground #FFE7A3
inputValidation.warningBorder #FFC107
inputValidation.warningForeground #FFC107
selection.background #B0D6E8AA
sideBar.background #FFFFFF
sideBar.border #A8C8E9
sideBar.dropBackground #D0E7F8
sideBar.foreground #2C2C2C
sideBarSectionHeader.background #f0f8fc
sideBarSectionHeader.border #E6F1F8
sideBarSectionHeader.foreground #2C2C2C
sideBarTitle.foreground #2C2C2C
statusBar.background #E6F1F8
statusBar.border #A8C8E9
statusBar.debuggingBackground #F3F8FF
statusBar.debuggingBorder #D74C3C
statusBar.debuggingForeground #D74C3C
statusBar.foreground #2C2C2C
statusBar.noFolderBackground #E6F1F8
statusBar.noFolderBorder #A8C8E9
statusBar.noFolderForeground #2C2C2C
statusBarItem.activeBackground #A8C8E9
statusBarItem.hoverBackground #B0D6E8
statusBarItem.prominentBackground #f0f8fc
statusBarItem.prominentHoverBackground #D0E7F8
tab.activeBackground #f6f7f9
tab.activeBorder #f0f8fc
tab.activeBorderTop #bbd8f1
tab.activeForeground #2C2C2C
tab.activeModifiedBorder #61D1B2
tab.border #bbd8f1
tab.inactiveBackground #f0f8fc
tab.inactiveForeground #2C2C2C
tab.unfocusedActiveBackground #B9E3F7
tab.unfocusedActiveBorder #3A8DD5
tab.unfocusedActiveForeground #2C2C2C
tab.unfocusedHoverBackground #D0E7F8
tab.unfocusedInactiveForeground #2C2C2C
terminal.ansiBlack #f0f8fc
terminal.ansiBlue #3A8DD5
terminal.ansiBrightBlack #A8C8E9
terminal.ansiBrightBlue #007FFF
terminal.ansiBrightCyan #00FFFF
terminal.ansiBrightGreen #00B300
terminal.ansiBrightMagenta #D74C3C
terminal.ansiBrightRed #FF6F61
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFFF00
terminal.ansiCyan #61D1B2
terminal.ansiGreen #61D1B2
terminal.ansiMagenta #E2A3B8
terminal.ansiRed #D74C3C
terminal.ansiWhite #2C2C2C
terminal.ansiYellow #FFD64D
textBlockQuote.background #f0f8fc
textBlockQuote.border #3A8DD5
textCodeBlock.background #f0f8fc
textLink.activeForeground #3A8DD5
textLink.foreground #3A8DD5
textPreformat.foreground #FFB64D
textSeparator.foreground #3A8DD5
titleBar.activeBackground #ebebeb
titleBar.activeForeground #383a42
titleBar.border #d5d7d8
titleBar.inactiveBackground #f0f0f0
titleBar.inactiveForeground #383a42
walkThrough.embeddedEditorBackground #f0f8fc
welcomePage.buttonBackground #f0f8fc
welcomePage.buttonHoverBackground #B0D6E8
widget.shadow #00000022 keyword, keyword.operator.expression, keyword.operator.type.asserts, variable.language, keyword.other.special-method.elixir, meta.control.flow #0098dd —
variable, source.elixir.embedded.source, string source.groovy, string meta.embedded.line.ruby #383a42 —
entity.name.function, meta.require, support.function.any-method, meta.function-call, meta.method-call, variable.function #23974a —
support.class, entity.name.class, entity.name.type.class, meta.class.instance, meta.class.inheritance, entity.other.inherited-class, entity.name.type, variable.other.constant.elixir, storage.type.haskell, support.type.graphql, support.type.enum.graphql #d52753 —
keyword.other.special-method #23974a —
storage, constant.language #0098dd —
string, punctuation.definition.string, support.constant.property-value, string.quoted.double.shell, support.function.variable.quoted.single.elixir, storage.type.string #c5a332 —
constant.numeric, variable.other.anonymous.elixir #ce33c0 —
constant, variable.other.constant, constant.other.symbol, constant.language.symbol, support.constant, support.variable.magic.python, variable.other.enummember #823ff1 —
entity.name.tag, punctuation.definition.tag #275fe4 —
entity.other.attribute-name, string.unquoted.alias.graphql #df631c —
markup.heading, punctuation.definition.heading, entity.name.section, markup.heading.setext #c5a332
keyword.other.unit #c5a332 —
markup.bold, punctuation.definition.bold #d52753 bold
markup.italic, punctuation.definition.italic #df631c italic
markup.strikethrough, punctuation.definition.strikethrough #a0a1a7 strikethrough
markup.strikethrough markup.italic, markup.strikethrough markup.italic punctuation.definition.italic #a0a1a7 italic strikethrough
markup.strikethrough markup.bold, markup.strikethrough markup.bold punctuation.definition.bold #a0a1a7 bold strikethrough
markup.raw.inline #c5a332 —
string.other.link #275fe4 —
beginning.punctuation.definition.list #a05a48 —
constant.character.escape, constant.other.character-class #df631c —
variable.interpolation #0098dd —
keyword.operator.new #0098dd —
entity.other.attribute-name.id #d52753 —
meta.function-call.arguments #383a42 —
meta.object-literal.key, meta.object.member, variable.other.property, variable.other.object.property, support.variable.property, variable.object.property, support.type.property-name, meta.property-name, entity.name.tag.yaml, constant.other.key, constant.other.object.key.js, string.unquoted.label.js, support.type.map.key, variable.graphql #a05a48 —
markup.inline.raw, markup.fenced_code.block, markup.raw.block #a05a48 —
markup.underline.link.image #23974a —
variable.parameter, parameter.variable.function.elixir, variable.other.block.ruby #40B8C5 —
support.type.primitive, support.type.builtin #0098dd —
string.interpolated.dollar.shell #d52753 —
string.other.math.shell #275fe4 —
punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell #7a82da —
markup.bold.rainbow9 #823ff1
invalid.rainbow10 #df631c —
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
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...
main*
Button.tsx
fetchUser
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 } !` ; } 
