Skip to main content
Home Theme VS Code Osaka Solarized Pro A professional Solarized-inspired theme collection for VS Code with dark, light, and Monokai Storm variants, originally created by craftzdog for Neovim
Osaka Solarized Pro | Coding Theme
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.activeBorder #a9dc76 activityBar.background #1e1e2e activityBar.border #00000000 activityBar.foreground #cdd6f4 activityBar.inactiveForeground #585b70 activityBarBadge.background #a9dc76 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #6c7086 italic constant, entity.name.constant, variable.other.constant, variable.language #f9e2af — entity, entity.name #89b4fa — variable.parameter.function #cdd6f4 — entity.name.tag
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Osaka Solarized Pro — Osaka Solarized Pro Monokai Storm
activityBarBadge.foreground
#1e1e2e
badge.background #a9dc7644
badge.foreground #cdd6f4
breadcrumb.activeSelectionForeground #a9dc76
breadcrumb.background #1e1e2e
breadcrumb.foreground #cdd6f4
breadcrumbPicker.background #313244
button.background #a9dc76
button.foreground #1e1e2e
button.hoverBackground #94d564
button.secondaryBackground #585b70
button.secondaryForeground #cdd6f4
button.secondaryHoverBackground #6c7086
checkbox.background #313244
checkbox.border #585b70
checkbox.foreground #cdd6f4
debugToolBar.background #313244
descriptionForeground #bac2de
diffEditor.insertedTextBackground #a9dc7611
diffEditor.removedTextBackground #f38ba811
dropdown.background #313244
dropdown.border #585b70
dropdown.foreground #cdd6f4
editor.background #181825
editor.findMatchBackground #fab38744
editor.findMatchHighlightBackground #fab38722
editor.foreground #cdd6f4
editor.hoverHighlightBackground #a9dc7622
editor.inactiveSelectionBackground #a9dc7622
editor.lineHighlightBackground #313244
editor.selectionBackground #a9dc7644
editor.selectionHighlightBackground #a9dc7633
editor.wordHighlightBackground #a9dc7622
editor.wordHighlightStrongBackground #a9dc7644
editorBracketMatch.background #a9dc7644
editorBracketMatch.border #a9dc76
editorCodeLens.foreground #6c7086
editorCursor.foreground #fab387
editorError.foreground #f38ba8
editorGroup.border #585b70
editorGroupHeader.noTabsBackground #1e1e2e
editorGroupHeader.tabsBackground #1e1e2e
editorGroupHeader.tabsBorder #313244
editorGutter.addedBackground #a9dc76
editorGutter.background #181825
editorGutter.commentRangeForeground #6c7086
editorGutter.deletedBackground #f38ba8
editorGutter.foldingControlForeground #6c7086
editorGutter.modifiedBackground #fab387
editorHoverWidget.background #313244
editorHoverWidget.border #585b70
editorIndentGuide.activeBackground #a9dc7644
editorIndentGuide.background #585b7044
editorInfo.foreground #74c7ec
editorInlayHint.background #31324400
editorInlayHint.foreground #6c7086
editorInlayHint.typeBackground #31324400
editorInlayHint.typeForeground #6c7086
editorLineNumber.activeForeground #a9dc76
editorLineNumber.foreground #6c7086
editorLink.activeForeground #a9dc76
editorMarkerNavigation.background #313244
editorMarkerNavigationError.background #f38ba8
editorMarkerNavigationInfo.background #74c7ec
editorMarkerNavigationWarning.background #fab387
editorOverviewRuler.addedForeground #a9dc76
editorOverviewRuler.border #313244
editorOverviewRuler.deletedForeground #f38ba8
editorOverviewRuler.errorForeground #f38ba8
editorOverviewRuler.findMatchForeground #fab387
editorOverviewRuler.infoForeground #74c7ec
editorOverviewRuler.modifiedForeground #fab387
editorOverviewRuler.selectionHighlightForeground #a9dc76
editorOverviewRuler.warningForeground #fab387
editorOverviewRuler.wordHighlightForeground #a9dc7644
editorOverviewRuler.wordHighlightStrongForeground #a9dc7666
editorRuler.foreground #585b70
editorSuggestWidget.background #313244
editorSuggestWidget.border #585b70
editorSuggestWidget.foreground #cdd6f4
editorSuggestWidget.highlightForeground #a9dc76
editorSuggestWidget.selectedBackground #a9dc7622
editorWarning.foreground #fab387
editorWhitespace.foreground #585b70
editorWidget.background #313244
editorWidget.border #585b70
editorWidget.foreground #cdd6f4
extensionButton.prominentBackground #a9dc76
extensionButton.prominentForeground #1e1e2e
extensionButton.prominentHoverBackground #94d564
focusBorder #a9dc76
foreground #cdd6f4
gitDecoration.addedResourceForeground #a9dc76
gitDecoration.conflictingResourceForeground #fab387
gitDecoration.deletedResourceForeground #f38ba8
gitDecoration.ignoredResourceForeground #6c7086
gitDecoration.modifiedResourceForeground #fab387
gitDecoration.renamedResourceForeground #a9dc76
gitDecoration.stageDeletedResourceForeground #f38ba8
gitDecoration.stageModifiedResourceForeground #fab387
gitDecoration.submoduleResourceForeground #74c7ec
gitDecoration.untrackedResourceForeground #a9dc76
icon.foreground #cdd6f4
input.background #313244
input.border #585b70
input.foreground #cdd6f4
input.placeholderForeground #6c7086
inputOption.activeBackground #a9dc7644
inputOption.activeBorder #a9dc76
inputOption.activeForeground #cdd6f4
inputValidation.errorBackground #f38ba811
inputValidation.errorBorder #f38ba8
inputValidation.infoBackground #74c7ec11
inputValidation.infoBorder #74c7ec
inputValidation.warningBackground #fab38711
inputValidation.warningBorder #fab387
list.activeSelectionBackground #a9dc7622
list.activeSelectionForeground #cdd6f4
list.dropBackground #a9dc7622
list.focusBackground #a9dc7622
list.focusForeground #cdd6f4
list.highlightForeground #a9dc76
list.hoverBackground #585b7044
list.hoverForeground #cdd6f4
list.inactiveSelectionBackground #585b7044
list.inactiveSelectionForeground #cdd6f4
list.invalidItemForeground #f38ba8
listFilterWidget.background #313244
listFilterWidget.noMatchesOutline #f38ba8
listFilterWidget.outline #a9dc76
menu.background #313244
menu.border #585b70
menu.foreground #cdd6f4
menu.selectionBackground #a9dc7622
menu.selectionBorder #a9dc76
menu.selectionForeground #cdd6f4
menu.separatorBackground #585b70
menubar.selectionBackground #a9dc7622
menubar.selectionBorder #a9dc76
menubar.selectionForeground #cdd6f4
merge.border #585b70
merge.commonContentBackground #fab38722
merge.commonHeaderBackground #fab38744
merge.currentContentBackground #a9dc7622
merge.currentHeaderBackground #a9dc7644
merge.incomingContentBackground #74c7ec22
merge.incomingHeaderBackground #74c7ec44
minimap.background #181825
minimap.errorHighlight #f38ba8
minimap.findMatchHighlight #fab387
minimap.infoHighlight #74c7ec
minimap.selectionHighlight #a9dc76
minimap.warningHighlight #fab387
minimapGutter.addedBackground #a9dc76
minimapGutter.deletedBackground #f38ba8
minimapGutter.modifiedBackground #fab387
minimapSlider.activeBackground #a9dc7644
minimapSlider.background #585b7044
minimapSlider.hoverBackground #a9dc7633
notificationCenterHeader.background #313244
notificationCenterHeader.foreground #cdd6f4
notificationLink.foreground #a9dc76
notifications.background #313244
notifications.border #585b70
notifications.foreground #cdd6f4
notificationsErrorIcon.foreground #f38ba8
notificationsInfoIcon.foreground #74c7ec
notificationsWarningIcon.foreground #fab387
panel.background #1e1e2e
panel.border #585b70
panel.dropBorder #a9dc76
panelInput.border #585b70
panelSection.border #585b70
panelSection.dropBackground #a9dc7622
panelSectionHeader.background #313244
panelSectionHeader.border #585b70
panelSectionHeader.foreground #cdd6f4
panelTitle.activeBorder #a9dc76
panelTitle.activeForeground #cdd6f4
panelTitle.inactiveForeground #6c7086
peekView.border #a9dc76
peekViewEditor.background #313244
peekViewEditor.matchHighlightBackground #fab38744
peekViewEditorGutter.background #313244
peekViewResult.background #313244
peekViewResult.fileForeground #cdd6f4
peekViewResult.lineForeground #6c7086
peekViewResult.matchHighlightBackground #fab38744
peekViewResult.selectionBackground #a9dc7622
peekViewResult.selectionForeground #cdd6f4
peekViewTitle.background #1e1e2e
peekViewTitleDescription.foreground #6c7086
peekViewTitleLabel.foreground #cdd6f4
pickerGroup.border #585b70
pickerGroup.foreground #a9dc76
progressBar.background #a9dc76
quickInput.background #313244
quickInput.foreground #cdd6f4
quickInputList.focusBackground #a9dc7622
quickInputTitle.background #1e1e2e
scrollbar.shadow #18182500
scrollbarSlider.activeBackground #a9dc7644
scrollbarSlider.background #585b7044
scrollbarSlider.hoverBackground #a9dc7633
searchEditor.findMatchBackground #fab38744
searchEditor.textInputBorder #585b70
selection.background #a9dc7644
settings.checkboxBackground #313244
settings.checkboxBorder #585b70
settings.checkboxForeground #cdd6f4
settings.dropdownBackground #313244
settings.dropdownBorder #585b70
settings.dropdownForeground #cdd6f4
settings.dropdownListBorder #585b70
settings.headerForeground #cdd6f4
settings.modifiedItemIndicator #fab387
settings.numberInputBackground #313244
settings.numberInputBorder #585b70
settings.numberInputForeground #cdd6f4
settings.textInputBackground #313244
settings.textInputBorder #585b70
settings.textInputForeground #cdd6f4
sideBar.background #1e1e2e
sideBar.border #585b70
sideBar.dropBackground #a9dc7622
sideBar.foreground #cdd6f4
sideBarSectionHeader.background #313244
sideBarSectionHeader.border #585b70
sideBarSectionHeader.foreground #cdd6f4
sideBarTitle.foreground #cdd6f4
statusBar.background #1e1e2e
statusBar.border #585b70
statusBar.debuggingBackground #fab387
statusBar.debuggingForeground #1e1e2e
statusBar.foreground #cdd6f4
statusBar.noFolderBackground #1e1e2e
statusBar.noFolderForeground #cdd6f4
statusBarItem.activeBackground #a9dc7622
statusBarItem.hoverBackground #a9dc7622
statusBarItem.prominentBackground #a9dc76
statusBarItem.prominentForeground #1e1e2e
statusBarItem.prominentHoverBackground #94d564
statusBarItem.remoteBackground #a9dc76
statusBarItem.remoteForeground #1e1e2e
tab.activeBackground #181825
tab.activeBorder #a9dc76
tab.activeForeground #cdd6f4
tab.border #313244
tab.hoverBackground #313244
tab.hoverForeground #cdd6f4
tab.inactiveBackground #1e1e2e
tab.inactiveForeground #6c7086
tab.unfocusedActiveBorder #585b70
tab.unfocusedActiveForeground #bac2de
tab.unfocusedHoverBackground #313244
tab.unfocusedHoverForeground #cdd6f4
tab.unfocusedInactiveForeground #585b70
terminal.ansiBlack #45475a
terminal.ansiBlue #89b4fa
terminal.ansiBrightBlack #585b70
terminal.ansiBrightBlue #89b4fa
terminal.ansiBrightCyan #94e2d5
terminal.ansiBrightGreen #a9dc76
terminal.ansiBrightMagenta #f5c2e7
terminal.ansiBrightRed #f38ba8
terminal.ansiBrightWhite #a6adc8
terminal.ansiBrightYellow #f9e2af
terminal.ansiCyan #94e2d5
terminal.ansiGreen #a9dc76
terminal.ansiMagenta #cba6f7
terminal.ansiRed #f38ba8
terminal.ansiWhite #bac2de
terminal.ansiYellow #f9e2af
terminal.background #181825
terminal.border #585b70
terminal.foreground #cdd6f4
terminal.selectionBackground #a9dc7644
terminalCursor.background #181825
terminalCursor.foreground #fab387
textBlockQuote.background #313244
textBlockQuote.border #585b70
textCodeBlock.background #313244
textLink.activeForeground #a9dc76
textLink.foreground #74c7ec
textPreformat.foreground #f9e2af
textSeparator.foreground #585b70
titleBar.activeBackground #1e1e2e
titleBar.activeForeground #cdd6f4
titleBar.border #585b70
titleBar.inactiveBackground #1e1e2e
titleBar.inactiveForeground #6c7086
tree.indentGuidesStroke #585b70
widget.shadow #18182533 storage, storage.type #cba6f7 —
storage.modifier.package, storage.modifier.import, storage.type.java #cdd6f4 —
string, punctuation.definition.string, string punctuation.section.embedded source #a9dc76 —
meta.property-name #89b4fa —
invalid.broken #f38ba8 italic
invalid.deprecated #f38ba8 italic
invalid.illegal #f38ba8 italic
invalid.unimplemented #f38ba8 italic
carriage-return #cdd6f4 italic underline
source.regexp, string.regexp #f5c2e7 —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #f5c2e7 —
string.regexp constant.character.escape #a9dc76 bold
meta.module-reference #89b4fa —
punctuation.definition.list.begin.markdown #fab387 —
markup.heading, markup.heading entity.name #89b4fa bold
markup.italic #cdd6f4 italic
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #cdd6f4 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #cdd6f4 —
markup.changed, punctuation.definition.changed #cdd6f4 —
markup.ignored, markup.untracked #1e1e2e —
meta.diff.range #89b4fa bold
meta.separator #89b4fa bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #6c7086 —
brackethighlighter.unmatched #f38ba8 —
constant.other.reference.link, string.other.link #74c7ec underline
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #89b4fa —
meta.block variable.other #f38ba8 —
source.java storage.modifier.import, source.java storage.type #f9e2af —
source.java keyword.operator.instanceof #cba6f7 —
source.java-properties meta.key-pair #f9e2af —
source.java-properties meta.key-pair > punctuation #cdd6f4 —
source.js keyword.operator.new, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.typeof #cba6f7 —
source.js meta.class #f9e2af —
variable.other.class.js #f9e2af —
source.js meta.method.declaration storage.type.function #cba6f7 —
variable.function.constructor #89b4fa —
entity.name.method.js #89b4fa —
meta.class-method.js entity.name.function.js, variable.function.js #89b4fa —
source.js punctuation.definition.template-expression.begin, source.js punctuation.definition.template-expression.end, source.js punctuation.section.embedded #f38ba8 —
source.js meta.template.expression #cdd6f4 —
source.js meta.import variable.other #f38ba8 —
source.ts keyword.operator.new, source.tsx keyword.operator.new, source.ts keyword.operator.in, source.tsx keyword.operator.in, source.ts keyword.operator.of, source.tsx keyword.operator.of, source.ts keyword.operator.instanceof, source.tsx keyword.operator.instanceof, source.ts keyword.operator.typeof, source.tsx keyword.operator.typeof #cba6f7 —
source.ts meta.type.cast.expr, source.tsx meta.type.cast.expr #f9e2af —
source.ts meta.type.new.expr entity.name.type, source.tsx meta.type.new.expr entity.name.type #f9e2af —
source.ts entity.name.type, source.tsx entity.name.type #f9e2af —
source.ts entity.other.inherited-class, source.tsx entity.other.inherited-class #f9e2af —
source.ts keyword.operator.expression.import #89b4fa —
source.ts keyword.operator.expression.in #cba6f7 —
source.ts meta.import variable.other, source.tsx meta.import variable.other #f38ba8 —
source.ts punctuation.definition.template-expression.begin, source.ts punctuation.definition.template-expression.end, source.tsx punctuation.definition.template-expression.begin, source.tsx punctuation.definition.template-expression.end, source.ts punctuation.section.embedded, source.tsx punctuation.section.embedded #f38ba8 —
source.ts meta.template.expression, source.tsx meta.template.expression #cdd6f4 —
source.python keyword.operator.logical.python #cba6f7 —
source.python variable.parameter #fab387 —
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 } !` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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 $
package.json
tsconfig.json
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 } !` ;
}