Skip to main content
Freak Dark | 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.background #0a0a0c activityBar.foreground #d7dae6e7 activityBarBadge.background #5ecbfe activityBarBadge.foreground #1C1E26 badge.background #242631 badge.foreground #D5D8DA tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #757575dc italic variable #f17a7a — constant #fc735ae6 italic constant.character.escape #20c2d1 — entity.name
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Freak Dark — Freak Bluish Dark
breadcrumbPicker.background
#13141a
button.background #181922
debugToolBar.background #0A090F
diffEditor.insertedTextBackground #09F7A01A
diffEditor.removedTextBackground #F43E5C1A
dropdown.background #1a1b24
dropdown.listBackground #0c0909
editor.background #0c0d11
editor.findMatchBackground #6C6F9380
editor.findMatchHighlightBackground #6C6F934D
editor.findRangeHighlightBackground #6C6F931A
editor.hoverHighlightBackground #6C6F934D
editor.lineHighlightBackground #2E303E4D
editor.rangeHighlightBackground #2E303E80
editor.selectionBackground #2E303EB3
editor.selectionHighlightBackground #6C6F934D
editor.wordHighlightBackground #6C6F9380
editor.wordHighlightStrongBackground #6C6F9380
editorBracketMatch.background #6C6F9380
editorBracketMatch.border #6C6F9300
editorCodeLens.foreground #6C6F9380
editorCursor.background #0C0E1A
editorCursor.foreground #5eb6fe
editorError.foreground #5ecbfe
editorGroup.border #1A1C23
editorGroup.dropBackground #6C6F934D
editorGroupHeader.tabsBackground #14161b
editorGutter.addedBackground #09F7A0B3
editorGutter.deletedBackground #F43E5CB3
editorGutter.modifiedBackground #21BFC2B3
editorIndentGuide.activeBackground #242631
editorIndentGuide.background #2E303E80
editorLineNumber.activeForeground #9b9b9b
editorLineNumber.foreground #99999952
editorOverviewRuler.addedForeground #09F7A080
editorOverviewRuler.border #2E303EB3
editorOverviewRuler.bracketMatchForeground #D5D8DA80
editorOverviewRuler.deletedForeground #F43E5C80
editorOverviewRuler.errorForeground #F43E5CE6
editorOverviewRuler.findMatchForeground #6C6F93
editorOverviewRuler.modifiedForeground #21BFC280
editorOverviewRuler.warningForeground #27D79780
editorRuler.foreground #6C6F934D
editorSuggestWidget.highlightForeground #5ecbfe
editorWarning.foreground #f8d64c
editorWidget.background #232530
editorWidget.border #232530
errorForeground #5ecbfe
extensionButton.prominentBackground #5ecbfe
extensionButton.prominentHoverBackground #5ecbfe
focusBorder #5ecbfe
foreground #D5D8DA
gitDecoration.addedResourceForeground #00ffa2ab
gitDecoration.deletedResourceForeground #ff002b
gitDecoration.ignoredResourceForeground #7a7a7a8a
gitDecoration.modifiedResourceForeground #FAB38E
gitDecoration.untrackedResourceForeground #27D797
input.background #181a20
inputOption.activeBorder #E9436D80
inputValidation.errorBackground #f43e5c88
inputValidation.errorBorder #F43E5C00
list.activeSelectionBackground #2E303E80
list.activeSelectionForeground #D5D8DA
list.dropBackground #393b5080
list.errorForeground #5ecbfeE6
list.focusBackground #26273380
list.focusForeground #D5D8DA
list.highlightForeground #5ecbfe
list.hoverBackground #1e1f2980
list.hoverForeground #D5D8DA
list.inactiveFocusBackground #1e202980
list.inactiveSelectionBackground #1e1f294d
list.inactiveSelectionForeground #D5D8DA
list.warningForeground #ffe683d8
menu.background #0e0f0f
menubar.selectionBackground #56a7e9f3
menubar.selectionForeground #ffffff
panelTitle.activeBorder #5edefe
peekView.border #1A1C23
peekViewEditor.background #17181f
peekViewEditor.matchHighlightBackground #6C6F9380
peekViewResult.background #232530
peekViewResult.matchHighlightBackground #6C6F9380
peekViewResult.selectionBackground #2E303E80
peekViewTitle.background #232530
pickerGroup.foreground #5ecbfe
progressBar.background #5eb1fe
scrollbar.shadow #16161C
scrollbarSlider.activeBackground #3c3e5580
scrollbarSlider.background #2d2f441a
scrollbarSlider.hoverBackground #383a4e4d
selection.background #42455c80
sideBar.background #111218
sideBar.dropBackground #606275
sideBar.foreground #D5D8DA80
sideBarSectionHeader.background #0C0D11
sideBarSectionHeader.foreground #ffffffb3
statusBar.background #0A090F
statusBar.debuggingBackground #54c0ff
statusBar.debuggingForeground #06060C
statusBar.foreground #afafaf
statusBar.noFolderBackground #191b22
statusBarItem.hoverBackground #2E303E
statusBarItem.prominentBackground #2E303E
statusBarItem.prominentHoverBackground #6C6F93
tab.activeBackground #0C0D11
tab.activeBorder #5ec3fe
tab.border #1c1e26b7
tab.inactiveBackground #0e0f14
terminal.ansiBlue #1f9ef3
terminal.ansiBrightBlue #49c5ff
terminal.ansiBrightCyan #6eeeff
terminal.ansiBrightGreen #3FDAA4
terminal.ansiBrightMagenta #F075B5
terminal.ansiBrightRed #EC6A88
terminal.ansiBrightYellow #ffde4d
terminal.ansiCyan #59E1E3
terminal.ansiGreen #00e293
terminal.ansiMagenta #f83299
terminal.ansiRed #ff144b
terminal.ansiYellow #ffbb3c
terminal.foreground #e0e0e0
terminal.selectionBackground #5a5d7a4d
terminalCursor.background #D5D8DA
terminalCursor.foreground #9798aaa6
textLink.activeForeground #5ecbfe
textLink.foreground #5ecbfe
titleBar.activeBackground #0A090F
titleBar.inactiveBackground #1C1E26
walkThrough.embeddedEditorBackground #232530
widget.shadow #09090c #ffd486e6
entity.name.function #20c2d1 —
entity.name.type, storage.type.cs #ffd486e6 —
entity.other.attribute-name #F09483E6 italic
entity.other.inherited-class #ffd486e6 —
entity.other.attribute-name.id #20c2d1 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #FAB795E6 —
entity.name.variable, variable #fd4a68 —
variable.other.constant #ffc862f3 —
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete #B877DBE6 —
keyword.other.unit #F09483E6 —
markup.quote #FAB795B3 italic
markup.heading, entity.name.section #e95678 —
markup.italic #20c2d1 italic
markup.inline.raw, markup.fenced_code.block #F09483E6 —
markup.underline.link #FAB795E6 —
string.quoted, string.template #9ad479 —
string.other.link #F09483E6 —
support.variable #FAC29AE6 —
support.type.property-name, meta.object-literal.key #e95678 —
support.type.property-name.css #cccccc —
variable.language #FAC29AE6 italic
variable.parameter — italic
string.template meta.embedded #cccccc —
punctuation.definition.tag #E95678B3 —
punctuation.separator #cccccc —
punctuation.definition.template-expression #B877DBE6 —
punctuation.section.embedded #B877DBE6 —
punctuation.definition.list #F09483E6 —
meta.function-call.generic.python #22daeb —
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 } !` ;
}