Okinawan Themes

Name: Okinawan Themes
Author: Keny Yahat

Publisher: Keny YahatThemes in package: 3

Okinawa-inspired color palettes for VSCode.

Open in VS Code GitHub

Color themes

VS Code preview

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

Okinawan Themes — Yanbaru Shadow

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.background#08140D
badge.background#6B8C78
badge.foreground#0A1A12
button.background#6B8C78
button.foreground#0A1A12
button.hoverBackground#40E0D0
dropdown.background#0F1A13
dropdown.border#2C4058
dropdown.foreground#DCE1E6
editor.background#0A1A12
editor.foreground#DCE1E6
editor.lineHighlightBackground#0F1A13
editor.selectionBackground#1F3A58
editorBracketMatch.background#2C4058
editorBracketMatch.border#40E0D0
editorCursor.foreground#FF6F61
editorError.foreground#FF6F61
editorInfo.foreground#40E0D0
editorLineNumber.foreground#4D5B6A
editorLink.activeForeground#40E0D0
editorWarning.foreground#E69B3A
focusBorder#6B8C78
gitDecoration.addedResourceForeground#6B8C78
gitDecoration.deletedResourceForeground#FF6F61
gitDecoration.modifiedResourceForeground#E69B3A
input.background#0F1A13
input.border#2C4058
input.foreground#DCE1E6
list.activeSelectionBackground#2C4058
list.activeSelectionForeground#DCE1E6
list.hoverBackground#1F3A58
scrollbarSlider.background#2C4058
scrollbarSlider.hoverBackground#3A5B7D
sideBar.background#08140D
statusBar.background#0A1A12
statusBar.foreground#6B8C78
tab.activeBackground#0A1A12
tab.activeBorder#6B8C78
tab.activeForeground#6B8C78
tab.border#08140D
tab.inactiveBackground#08140D
tab.inactiveForeground#4D5B6A
tab.unfocusedActiveForeground#6B8C78
tab.unfocusedInactiveForeground#4D5B6A
terminal.ansiBlack#0A1A12
terminal.ansiBlue#192236
terminal.ansiBrightBlack#4D5B6A
terminal.ansiBrightBlue#192236
terminal.ansiBrightCyan#40E0D0
terminal.ansiBrightGreen#6B8C78
terminal.ansiBrightMagenta#FF6F61
terminal.ansiBrightRed#FF6F61
terminal.ansiBrightWhite#E6E6E6
terminal.ansiBrightYellow#E69B3A
terminal.ansiCyan#40E0D0
terminal.ansiGreen#6B8C78
terminal.ansiMagenta#FF6F61
terminal.ansiRed#FF6F61
terminal.ansiWhite#E6E6E6
terminal.ansiYellow#E69B3A
terminal.background#0A1A12
terminal.foreground#E6E6E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage.type, storage.modifier	#FF6F61	—
entity.name.function, support.function	#6B8C78	—
string, punctuation.definition.string	#E69B3A	—
comment, punctuation.definition.comment	#4D5B6A	italic
variable, identifier	#DCE1E6	—
constant.numeric, constant.language	#40E0D0	—