Skip to main content
Home Theme VS Code Kingfisher Fishing After Dark VSCode color theme based on the color palette of my old pet kingfisher bird, Kong, whomst sadly died after I went fishing with him and accidently hooked him as I was casting the fishing rod. In some sense, this could be seen as my memorial to him and a way for me to remember him as I type out some d
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 #303030 activityBar.activeBorder #cf8b31 activityBar.background #22282e activityBar.border #1b1f23 activityBar.dropBorder #cf8b31 activityBar.foreground #ebebeb tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #e04242 italic invalid, invalid.illegal #e04242 — keyword, keyword.control, storage.type, storage.modifier, punctuation.terminator, punctuation.separator, keyword.operator.new, variable.language, support.type, keyword.operator.c #07807d bold variable, variable.other, support.variable, string constant.other.placeholder, constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.operator, keyword.other.template, keyword.other.substitution, text, punctuation.separator.key-value.html, meta
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Kingfisher Fishing After Dark — Kingfisher Fishing After Dark (common)
activityBar.inactiveForeground
#5a6269
activityBarBadge.background #007979
activityBarBadge.foreground #f1eded
badge.background #018888
badge.foreground #c8e1ff
breadcrumb.activeSelectionForeground #d1d5da
breadcrumb.background #1f2428
breadcrumb.focusForeground #e1e4e8
breadcrumb.foreground #959da5
breadcrumbPicker.background #2b3036
button.background #007979
button.foreground #ebebeb
button.hoverBackground #036161
button.secondaryBackground #444d56
button.secondaryForeground #fff
button.secondaryHoverBackground #586069
charts.blue #7aa2f7
charts.foreground #9AA5CE
charts.green #41a6b5
charts.lines #16161e
charts.orange #ff9e64
charts.purple #9d7cd8
charts.red #f7768e
charts.yellow #e0af68
checkbox.background #444d56
checkbox.border #1b1f23
debugConsole.errorForeground #bb616b
debugConsole.infoForeground #787c99
debugConsole.sourceForeground #787c99
debugConsole.warningForeground #c49a5a
debugConsoleInputIcon.foreground #73daca
debugExceptionWidget.background #101014
debugExceptionWidget.border #963c47
debugIcon.breakpointDisabledForeground #414761
debugIcon.breakpointForeground #db4b4b
debugIcon.breakpointUnverifiedForeground #c24242
debugTokenExpression.boolean #ff9e64
debugTokenExpression.error #bb616b
debugTokenExpression.name #7dcfff
debugTokenExpression.number #ff9e64
debugTokenExpression.string #9ece6a
debugTokenExpression.value #9aa5ce
debugToolBar.background #2b3036
debugView.stateLabelBackground #14141b
debugView.stateLabelForeground #787c99
debugView.valueChangedHighlight #3d59a1aa
descriptionForeground #959da5
diffEditor.insertedTextBackground #28a74530
diffEditor.removedTextBackground #d73a4930
dropdown.background #2f363d
dropdown.border #1b1f23
dropdown.foreground #e1e4e8
dropdown.listBackground #24292e
editor.background #22282e
editor.findMatchBackground #ffd33d44
editor.findMatchBorder #e0af68
editor.findMatchHighlightBackground #ffd33d22
editor.findRangeHighlightBackground #515c7e33
editor.focusedStackFrameHighlightBackground #2b6a3033
editor.foldBackground #58606915
editor.foreground #e1e4e8
editor.inactiveSelectionBackground #3392FF22
editor.lineHighlightBackground #2b3036
editor.linkedEditingBackground #3392FF22
editor.rangeHighlightBackground #515c7e20
editor.selectionBackground #3392FF44
editor.selectionHighlightBackground #ff66de3d
editor.selectionHighlightBorder #17E5E600
editor.stackFrameHighlightBackground #C6902625
editor.wordHighlightBackground #ffd33d44
editor.wordHighlightStrongBackground #17E5E600
editorBracketHighlight.foreground1 #6b9bae
editorBracketHighlight.foreground2 #75b59e
editorBracketHighlight.foreground3 #a37188
editorBracketHighlight.foreground4 #b79ccd
editorBracketHighlight.foreground5 #788A5A
editorBracketHighlight.foreground6 #c79c01
editorBracketHighlight.unexpectedBracket.foreground #e04242
editorBracketMatch.background #bbbbbb36
editorBracketMatch.border #67be2c00
editorBracketPairGuide.activeBackground1 #698cd6
editorBracketPairGuide.activeBackground2 #68b3de
editorBracketPairGuide.activeBackground3 #9a7ecc
editorBracketPairGuide.activeBackground4 #25aac2
editorBracketPairGuide.activeBackground5 #80a856
editorBracketPairGuide.activeBackground6 #c49a5a
editorCodeLens.foreground #484f70
editorCursor.foreground #c8e1ff
editorError.foreground #f97583
editorGroup.border #1b1f23
editorGroup.dropBackground #1e202e
editorGroupHeader.border #1b1f23
editorGroupHeader.noTabsBackground #22282e
editorGroupHeader.tabsBackground #1f2428
editorGroupHeader.tabsBorder #1b1f23
editorGutter.addedBackground #28a745
editorGutter.deletedBackground #ea4a5a
editorGutter.modifiedBackground #2188ff
editorHint.foreground #0da0ba
editorHoverWidget.background #16161e
editorHoverWidget.border #101014
editorIndentGuide.activeBackground #444d56
editorIndentGuide.background #2f363d
editorInfo.foreground #0da0ba
editorLightBulb.foreground #e0af68
editorLightBulbAutoFix.foreground #e0af68
editorLineNumber.activeForeground #ddd
editorLineNumber.foreground #444d56
editorLink.activeForeground #acb0d0
editorMarkerNavigation.background #16161e
editorOverviewRuler.addedForeground #164846
editorOverviewRuler.border #101014
editorOverviewRuler.bracketMatchForeground #101014
editorOverviewRuler.deletedForeground #703438
editorOverviewRuler.errorForeground #db4b4b
editorOverviewRuler.findMatchForeground #a9b1d644
editorOverviewRuler.infoForeground #1abc9c
editorOverviewRuler.modifiedForeground #394b70
editorOverviewRuler.rangeHighlightForeground #a9b1d644
editorOverviewRuler.selectionHighlightForeground #a9b1d622
editorOverviewRuler.warningForeground #e0af68
editorOverviewRuler.wordHighlightForeground #bb9af755
editorOverviewRuler.wordHighlightStrongForeground #bb9af766
editorPane.background #16161e
editorRuler.foreground #444d56
editorSuggestWidget.background #22282e
editorSuggestWidget.border #101014
editorSuggestWidget.highlightForeground #6183bb
editorSuggestWidget.selectedBackground #20222c
editorWarning.foreground #ffea7f
editorWhitespace.foreground #62636391
editorWidget.background #1f2428
editorWidget.resizeBorder #545c7e33
errorForeground #f97583
extensionBadge.remoteBackground #3d59a1
extensionBadge.remoteForeground #ffffff
extensionButton.prominentBackground #3d59a1DD
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #3d59a1AA
focusBorder #e0af68
foreground #d1d5da
gitDecoration.addedResourceForeground #34d058
gitDecoration.conflictingResourceForeground #ffab70
gitDecoration.deletedResourceForeground #ea4a5a
gitDecoration.ignoredResourceForeground #6a737d
gitDecoration.modifiedResourceForeground #79b8ff
gitDecoration.submoduleResourceForeground #6a737d
gitDecoration.untrackedResourceForeground #34d058
icon.foreground #787c99
input.background #2f363d
input.border #1b1f23
input.foreground #e1e4e8
input.placeholderForeground #959da5
inputOption.activeBackground #3d59a144
inputOption.activeForeground #c0caf5
inputValidation.errorBackground #85353e
inputValidation.errorBorder #963c47
inputValidation.errorForeground #bbc2e0
inputValidation.infoBackground #0da0ba
inputValidation.infoBorder #0db9d7
inputValidation.infoForeground #000000
inputValidation.warningBackground #c2985b
inputValidation.warningBorder #e0af68
inputValidation.warningForeground #000000
list.activeSelectionBackground #31373d
list.activeSelectionForeground #e1e4e8
list.deemphasizedForeground #787c99
list.dropBackground #282e34
list.errorForeground #bb616b
list.focusAndSelectionOutline #e0af68
list.focusBackground #1d2f3e
list.focusForeground #eeeeee
list.highlightForeground #668ac4
list.hoverBackground #282e34
list.hoverForeground #e1e4e8
list.inactiveFocusBackground #172b41
list.inactiveSelectionBackground #282e34
list.inactiveSelectionForeground #e1e4e8
list.invalidItemForeground #c97018
list.warningForeground #c49a5a
listFilterWidget.background #2e3133
listFilterWidget.noMatchesOutline #a6333f
listFilterWidget.outline #018888
menu.background #1f2428
menu.border #474444
menu.foreground #d1d5da
menu.selectionBackground #282e34
menu.selectionForeground #e1e4e8
menubar.selectionBackground #2e2f36
menubar.selectionBorder #3c3c3f
menubar.selectionForeground #e1e4e8
merge.currentContentBackground #007a7544
merge.currentHeaderBackground #007a75aa
merge.incomingContentBackground #3d59a144
merge.incomingHeaderBackground #3d59a1aa
minimapGutter.addedBackground #1C5957
minimapGutter.deletedBackground #944449
minimapGutter.modifiedBackground #425882
notebook.editorBackground #22282e
notificationCenterHeader.background #24292e
notificationCenterHeader.foreground #959da5
notifications.background #2f363d
notifications.border #1b1f23
notifications.foreground #e1e4e8
notificationsErrorIcon.foreground #ea4a5a
notificationsInfoIcon.foreground #79b8ff
notificationsWarningIcon.foreground #ffab70
panel.background #1f2428
panel.border #1b1f23
panelInput.border #2f363d
panelTitle.activeBorder #cf8b31
panelTitle.activeForeground #e1e4e8
panelTitle.inactiveForeground #959da5
peekView.border #101014
peekViewEditor.background #1f242888
peekViewEditor.matchHighlightBackground #ffd33d33
peekViewResult.background #1f2428
peekViewResult.fileForeground #787c99
peekViewResult.lineForeground #a9b1d6
peekViewResult.matchHighlightBackground #ffd33d33
peekViewResult.selectionBackground #3d59a133
peekViewResult.selectionForeground #a9b1d6
peekViewTitle.background #101014
peekViewTitleDescription.foreground #787c99
peekViewTitleLabel.foreground #a9b1d6
pickerGroup.border #444d56
pickerGroup.foreground #e1e4e8
progressBar.background #0366d6
quickInput.background #24292e
quickInput.foreground #e1e4e8
sash.hoverBorder #29355a
scrollbar.shadow #00000033
scrollbarSlider.activeBackground #6a737d88
scrollbarSlider.background #6a737d33
scrollbarSlider.hoverBackground #6a737d44
selection.background #515c7e40
settings.headerForeground #e1e4e8
settings.modifiedItemIndicator #018888
sideBar.background #1f2428
sideBar.border #0d0f175e
sideBar.dropBackground #1e202e
sideBar.foreground #d1d5da
sideBarSectionHeader.background #252a2e
sideBarSectionHeader.border #202325
sideBarSectionHeader.foreground #e1e4e8
sideBarTitle.foreground #e1e4e8
statusBar.background #252a2e
statusBar.border #202325
statusBar.debuggingBackground #dea731
statusBar.debuggingForeground #222
statusBar.foreground #a7a7a7
statusBar.noFolderBackground #cccdce
statusBarItem.prominentBackground #282e34
statusBarItem.prominentHoverBackground #20222c
tab.activeBackground #22282e
tab.activeBorderTop #cf8b31
tab.activeForeground #e1e4e8
tab.activeModifiedBorder #1a1b26
tab.border #1b1f23
tab.hoverBackground #24292e
tab.hoverForeground #e1e4e8
tab.inactiveBackground #1f2428
tab.inactiveForeground #959da5
tab.inactiveModifiedBorder #1f202e
tab.lastPinnedBorder #222333
tab.unfocusedActiveBorder #24292e
tab.unfocusedActiveBorderTop #1b1f23
tab.unfocusedActiveForeground #a9b1d6
tab.unfocusedHoverBackground #24292e
tab.unfocusedHoverForeground #a9b1d6
tab.unfocusedInactiveForeground #787c99
terminal.ansiBlack #586069
terminal.ansiBlue #2188ff
terminal.ansiBrightBlack #959da5
terminal.ansiBrightBlue #79b8ff
terminal.ansiBrightCyan #56d4dd
terminal.ansiBrightGreen #85e89d
terminal.ansiBrightMagenta #b392f0
terminal.ansiBrightRed #f97583
terminal.ansiBrightWhite #fafbfc
terminal.ansiBrightYellow #ffea7f
terminal.ansiCyan #39c5cf
terminal.ansiGreen #34d058
terminal.ansiMagenta #b392f0
terminal.ansiRed #ea4a5a
terminal.ansiWhite #d1d5da
terminal.ansiYellow #ffea7f
terminal.foreground #d1d5da
terminal.tab.activeBorder #cf8b31
terminalCursor.background #586069
terminalCursor.foreground #79b8ff
textBlockQuote.background #24292e
textBlockQuote.border #444d56
textCodeBlock.background #2f363d
textLink.activeForeground #c8e1ff
textLink.foreground #79b8ff
textPreformat.foreground #d1d5da
textSeparator.foreground #586069
titleBar.activeBackground #252a2e
titleBar.activeForeground #d1d2d4
titleBar.border #1b1f23
titleBar.inactiveBackground #1d2125
titleBar.inactiveForeground #858586
tree.indentGuidesStroke #353c44
walkThrough.embeddedEditorBackground #16161e
widget.shadow #ffffff00
window.activeBorder #0d0f175e
window.inactiveBorder #0d0f175e entity.name, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #d3d0c3 —
constant.numeric, keyword.other.unit, support.constant #64a2d4 —
constant.language, constant.character, constant.escape #f2a100 —
support.other.variable, string.other.link #ff00bf —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #1fc7b3 —
punctuation.definition.string.begin, punctuation.definition.string.end #0bae9b —
string.regexp, constant.character.escape #ff897e —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, punctuation.accessor, punctuation.separator.period.python #cc8b37 —
variable.parameter #d3d0c3 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #e9bb71 —
entity.other.attribute-name #e99dc0 —
support.type.property-name.json —
source.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCB6B —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F78C6C —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FF5370 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C17E70 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #82AAFF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #f07178 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C3E88D —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCB6B italic
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #B2CCD6 —
entity.other.attribute-name.class #FFCB6B —
source.sass keyword.control #82AAFF —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #C792EA —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #65737E —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #C3E88D —
markup.italic #f07178 italic
markup.bold, markup.bold string #f07178 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #f07178 bold
markup.underline #F78C6C underline
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #82AAFF —
string.other.link.description.title.markdown #C792EA —
constant.other.reference.link.markdown #FFCB6B —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E bold
entity.name.method.js #82AAFF italic
meta.class-method.js entity.name.function.js, variable.function.constructor #82AAFF —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #82AAFF italic
source.js constant.other.object.key.js string.unquoted.label.js #FF5370 italic
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*
Kingfisher Fishing After Dark | Coding Theme
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 } !` ;
}