Skip to main content
Home Theme VS Code ss-octopus A simple Dark theme for VSCode with a muted color palette and smart code highlighting
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBarBadge.background #569cd6 activityBarBadge.foreground #1e1e1e editor.findMatchBackground #0b5827aa editor.findMatchBorder #569cd699 editor.findMatchHighlightBackground #4e315355 editor.findMatchHighlightBorder tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold markup.underline — underline markup.italic — italic beginning.punctuation.definition.quote.markdown, meta.return-type, meta.type.cast.expr, meta.type.new.expr, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.tag, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, support.class, support.constant.dom, support.constant.json, support.constant.math, support.type
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
#f700ff22
editor.selectionBackground #569cd633
editor.wordHighlightBackground #00ffff11
editor.wordHighlightBorder #5aca7699
editorCursor.foreground #d10000
editorGutter.addedBackground #608b4e
editorGutter.background #1e1e1e
editorGutter.deletedBackground #d10000
editorGutter.modifiedBackground #c6bf41
editorIndentGuide.activeBackground #d10000
editorIndentGuide.background #404040
editorLineNumber.activeForeground #6d94b5
editorOverviewRuler.addedForeground #608b4e
editorOverviewRuler.deletedForeground #d10000
editorOverviewRuler.modifiedForeground #d7ba7d
gitDecoration.conflictingResourceForeground #d10000
gitDecoration.deletedResourceForeground #d7ba7d
gitDecoration.ignoredResourceForeground #808080
gitDecoration.modifiedResourceForeground #608b4e
gitDecoration.untrackedResourceForeground #d7ba7d
list.dropBackground #383b3d
sideBarTitle.foreground #bbbbbb
statusBar.background #222222
statusBar.foreground #c6bf41
statusBar.noFolderBackground #333333 #608b4e
entity.name.variable, entity.other.attribute-name, keyword.operator, meta.definition.variable.name, meta.embedded, meta.structure.dictionary.key.python, source.coffee.embedded, source.groovy.embedded, storage.modifier.import.java, storage.modifier.package.java, support.function.git-rebase, support.type.property-name, support.type.vendored.property-name, support.variable, variable.css, variable.language.wildcard.java, variable.other.less, variable.other.readwrite, variable.scss, variable #dedede —
beginning.punctuation.definition.list.markdown, constant.character, constant.language, entity.name.class, entity.name.function, entity.name.function.shell, entity.name.tag, entity.other.inherited-class, keyword.control.at-rule.import.scss, keyword.var.go, markup.bold, markup.changed, markup.heading, meta.diff.header, meta.preprocessor, new.expr, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, punctuation.section.embedded, storage.type, storage, support.function.go, token.info-token, variable.language #6d94b5 —
constant.character.escape, entity.name.function.member, entity.name.tag.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.scss, keyword.control.anchor.regexp, keyword.operator.or.regexp, keyword.operator.quantifier.regexp, meta.selector, source.css.less entity.other.attribute-name.id, support.constant.handlebars, support.function, support.function.console, support.function.console.js, support.function.console.ts, variable.other.constant #d7ba7d —
constant.other.color.rgb-value, constant.other.rgb-value, keyword.control.flow, keyword.control.shell, keyword.control.pseudo-method.ruby, keyword.operator.assignment.go, keyword, markup.deleted, markup.inline.raw, meta.preprocessor.string, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, punctuation.definition.character-class.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.group.regexp, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.separator.namespace.ruby, storage.type.function.arrow, string.tag, string.value, string, support.constant.color, support.constant.font-name, support.constant.media-type, support.constant.media, support.constant.property-value, support.function.kernel.ruby, support.other.parenthesis.regexp #ce9178 —
constant.numeric, constant.sha.git-rebase, entity.name.type.interface, keyword.other.unit, markup.inserted, meta.preprocessor.numeric, meta.type.annotation.ts, storage.type.boolean.go, storage.type.byte.go, storage.type.numeric.go, storage.type.string.go, storage.type.uintptr.go, support.type.primitive, variable.other.object #99ca90 —
constant.character.character-class.regexp, constant.character.set.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp, constant.regexp, keyword.control, keyword.operator.assignment, meta.object-literal.key, meta.tag.inline.any.html, meta.template.expression, support.type.object.module.js, token.debug-token, variable.object.property, variable.scss #999999 —
entity.name.type.class, keyword.function.go, keyword.operator.address.go, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.negation.regexp, keyword.operator.new, keyword.operator.sizeof, punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.definition.variable.ruby, support.class.ruby, token.warn-token, variable.language.this #9cdcfe —
meta.structure.dictionary.json.comments, storage.modifier, string.regexp, string, variable.other.jsdoc #606060 —
invalid, token.error-token #d10000 —
comment, storage.type.class.jsdoc #aba481 —
support.class.console, support.class.console.js, support.class.console.ts #f7ef61 —
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*
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 } !` ;
}
ss-octopus | Coding Theme