Skip to main content
Home Theme VS Code GracefulBear GracefulBear is tottaly based on OneDarkPro Theme config.
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 #222222 activityBar.foreground #ff699a activityBarBadge.background #ff71a2 activityBarBadge.foreground #f8fafd badge.background #222222 button.background #404754 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison #699aff bold variable.other.generic-type.haskell #de73ff — storage.type.haskell #ff9a5a — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
GracefulBear — GracefulBear
debugToolBar.background
#222226
diffEditor.insertedTextBackground #00809b33
dropdown.background #222226
dropdown.border #222226
editor.background #222222
editor.findMatchBackground #42557b
editor.findMatchBorder #457dff
editor.findMatchHighlightBackground #6199ff2f
editor.foreground #abb2bf
editor.lineHighlightBackground #2c313c
editor.selectionBackground #67769660
editor.selectionHighlightBackground #ffffff10
editor.selectionHighlightBorder #dddddd
editor.wordHighlightBackground #d2e0ff2f
editor.wordHighlightBorder #7f848e
editor.wordHighlightStrongBackground #abb2bf26
editor.wordHighlightStrongBorder #7f848e
editorActiveLineNumber.foreground #737984
editorBracketMatch.background #515a6b
editorBracketMatch.border #515a6b
editorCursor.background #ffffffc9
editorCursor.foreground #528bff
editorError.foreground #c24038
editorGroup.background #181a1f
editorGroup.border #181a1f
editorGroupHeader.tabsBackground #222226
editorHoverWidget.background #222226
editorHoverWidget.border #181a1f
editorIndentGuide.activeBackground #c8c8c859
editorIndentGuide.background #3b4048
editorLineNumber.activeForeground #abb2bf
editorLineNumber.foreground #495162
editorMarkerNavigation.background #222226
editorRuler.foreground #abb2bf26
editorSuggestWidget.background #222226
editorSuggestWidget.border #181a1f
editorSuggestWidget.selectedBackground #323232
editorWarning.foreground #ff9a5a
editorWhitespace.foreground #3b4048
editorWidget.background #222226
focusBorder #464646
input.background #1d1f23
list.activeSelectionBackground #323232
list.activeSelectionForeground #ff7854
list.focusBackground #383e4a
list.highlightForeground #c5c5c5
list.hoverBackground #414141
list.inactiveSelectionBackground #323232
list.inactiveSelectionForeground #ff7854
list.warningForeground #ff9a5a
menu.foreground #c8c8c8
panelSectionHeader.background #222226
peekViewEditor.background #1b1d23
peekViewEditor.matchHighlightBackground #29244b
peekViewResult.background #22262b
scrollbarSlider.activeBackground #747d9180
scrollbarSlider.background #4e566660
scrollbarSlider.hoverBackground #5a637580
sideBar.background #222226
sideBarSectionHeader.background #222222
sideBarTitle.foreground #817A85
statusBar.background #222226
statusBar.debuggingBackground #cc6633
statusBar.debuggingBorder #66017a
statusBar.debuggingForeground #ffffff
statusBar.foreground #9da5b4
statusBar.noFolderBackground #222226
statusBarItem.hoverBackground #323232
statusBarItem.remoteBackground #F73118
statusBarItem.remoteForeground #f8fafd
tab.activeBackground #222222
tab.activeForeground #dcdcdc
tab.border #181a1f
tab.hoverBackground #323842
tab.inactiveBackground #222226
tab.unfocusedHoverBackground #323842
terminal.ansiBlack #3f4451
terminal.ansiBlue #4aa5f0
terminal.ansiBrightBlack #4f5666
terminal.ansiBrightBlue #89e6fa
terminal.ansiBrightCyan #699aff
terminal.ansiBrightGreen #69c49a
terminal.ansiBrightMagenta #de73ff
terminal.ansiBrightRed #ff616e
terminal.ansiBrightWhite #ff7854
terminal.ansiBrightYellow #ff71a2
terminal.ansiCyan #42b3c2
terminal.ansiGreen #94ca6d
terminal.ansiMagenta #c162de
terminal.ansiRed #e05561
terminal.ansiWhite #e6e6e6
terminal.ansiYellow #FF805C
terminal.background #222226
terminal.border #abb2bf
terminal.foreground #abb2bf
terminal.selectionBackground #abb2bf30
textLink.foreground #70cde1
titleBar.activeBackground #222226
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #222226
titleBar.inactiveForeground #6b717d #699aff
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #abb2bf —
variable.parameter.function.language.special.self.python #FF699A —
storage.modifier.lifetime.rust #abb2bf —
support.function.std.rust #61afef —
entity.name.lifetime.rust #FF699A —
variable.language.rust #699aff bold
support.constant.edge #de73ff —
constant.other.character-class.regexp #699aff bold
keyword.operator.quantifier.regexp #ff9a5a —
punctuation.definition.string.begin,punctuation.definition.string.end #69c49a —
variable.parameter.function #abb2bf —
comment markup.link #5c6370 —
markup.changed.diff #FF699A —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #61afef —
markup.inserted.diff #69c49a —
markup.deleted.diff #699aff bold
meta.function.c,meta.function.cpp #699aff bold
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c #abb2bf —
punctuation.separator.key-value #abb2bf —
keyword.operator.expression.import #61afef —
support.constant.math #FF699A —
support.constant.property.math #ff9a5a —
variable.other.constant #FF699A —
storage.type.annotation.java, storage.type.object.array.java #FF699A —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java #abb2bf —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #FF699A —
keyword.operator.instanceof.java #de73ff —
meta.definition.variable.name.java #699aff bold
keyword.operator.logical #56b6c2 —
keyword.operator.bitwise #56b6c2 —
keyword.operator.channel #56b6c2 —
support.constant.property-value.scss,support.constant.property-value.css #ff9a5a —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #56b6c2 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #ff9a5a —
punctuation.separator.list.comma.css #abb2bf —
support.constant.color.w3c-standard-color-name.css #ff9a5a —
support.type.vendored.property-name.css #56b6c2 —
support.module.node,support.type.object.module,support.module.node #FF699A —
entity.name.type.module #FF699A —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #699aff bold
support.constant.json #ff9a5a —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #de73ff —
support.type.object.console #699aff bold
support.variable.property.process #ff9a5a —
entity.name.function,support.function.console #61afef —
keyword.operator.misc.rust #abb2bf —
keyword.operator.sigil.rust #de73ff —
keyword.operator.delete #de73ff —
support.type.object.dom #56b6c2 —
support.variable.dom,support.variable.property.dom #699aff bold
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #56b6c2 —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp #de73ff —
punctuation.separator.delimiter #abb2bf —
punctuation.separator.c,punctuation.separator.cpp #de73ff —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56b6c2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #de73ff —
variable.parameter.function.language.python #ff9a5a —
support.type.python #56b6c2 —
keyword.operator.logical.python #de73ff —
variable.parameter.function.python #ff9a5a —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #abb2bf —
meta.function-call.generic.python #61afef —
constant.character.format.placeholder.other.python #ff9a5a —
keyword.operator.assignment.compound #de73ff —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #56b6c2 —
entity.name.namespace #FF699A —
variable.language #FF699A —
token.variable.parameter.java #abb2bf —
import.storage.java #FF699A —
token.package.keyword #de73ff —
entity.name.function, meta.require, support.function.any-method, variable.function #61afef —
entity.name.type.namespace #FF699A —
support.class, entity.name.type.class #FF699A —
entity.name.class.identifier.namespace.type #FF699A —
entity.name.class, variable.other.class.js, variable.other.class.ts #FF699A —
variable.other.class.php #699aff bold
control.elements, keyword.operator.less #ff9a5a —
keyword.other.special-method #61afef —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #de73ff —
token.storage.type.java #FF699A —
support.type.property-name #abb2bf —
support.constant.property-value #abb2bf —
support.constant.font-name #ff9a5a —
entity.other.inherited-class #FF699A —
constant.other.symbol #56b6c2 —
punctuation.definition.constant #ff9a5a —
entity.name.tag #699aff bold
entity.other.attribute-name #ff9a5a —
entity.other.attribute-name.id #61afef normal
entity.other.attribute-name.class.css #ff9a5a normal
markup.heading #699aff bold
markup.heading punctuation.definition.heading, entity.name.section #61afef —
keyword.other.unit #FF699A bold
markup.bold,todo.bold #ff9a5a —
punctuation.definition.bold #FF699A —
markup.italic, punctuation.definition.italic,todo.emphasis #de73ff —
entity.name.section.markdown #699aff bold
punctuation.definition.heading.markdown #699aff bold
punctuation.definition.list.begin.markdown #699aff bold
markup.heading.setext #abb2bf —
punctuation.definition.bold.markdown #ff9a5a —
markup.inline.raw.markdown #69c49a —
markup.inline.raw.string.markdown #69c49a —
punctuation.definition.list.markdown #699aff bold
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #699aff bold
beginning.punctuation.definition.list.markdown #699aff bold
punctuation.definition.metadata.markdown #699aff bold
markup.underline.link.markdown,markup.underline.link.image.markdown #de73ff —
string.other.link.title.markdown,string.other.link.description.markdown #61afef —
constant.character.escape #56b6c2 —
punctuation.section.embedded, variable.interpolation #699aff bold
punctuation.section.embedded.begin,punctuation.section.embedded.end #de73ff —
invalid.illegal.bad-ampersand.html #abb2bf —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #699aff bold
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #699aff bold
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #69c49a —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #56b6c2 —
support.type.property-name.json #699aff bold
support.type.property-name.json punctuation #699aff bold
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #de73ff —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #de73ff —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #FF699A —
keyword.operator.error-control.php #de73ff —
keyword.operator.type.php #de73ff —
punctuation.section.array.begin.php #abb2bf —
punctuation.section.array.end.php #abb2bf —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #FF699A —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #61afef —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #abb2bf —
support.constant.core.rust #ff9a5a —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #ff9a5a —
entity.name.goto-label.php,support.other.php #61afef —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #56b6c2 —
keyword.operator.regexp.php #de73ff —
keyword.operator.comparison.php #56b6c2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #de73ff —
meta.function.decorator.python #61afef —
support.token.decorator.python,meta.function.decorator.identifier.python #56b6c2 —
function.parameter #abb2bf —
function.parameter.ruby, function.parameter.cs #abb2bf —
constant.language.symbol.ruby #56b6c2 —
inline-color-decoration rgb-value #ff9a5a —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #FF699A —
block.scope.end,block.scope.begin #abb2bf —
entity.name.variable.local.cs #699aff bold
token.error-token #f44747 —
token.debug-token #de73ff —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #de73ff —
meta.template.expression #abb2bf —
keyword.operator.module #de73ff —
support.type.type.flowtype #61afef —
support.type.primitive #FF699A —
meta.property.object #699aff bold
variable.parameter.function.js #699aff bold
keyword.other.template.begin #69c49a —
keyword.other.template.end #69c49a —
keyword.other.substitution.begin #69c49a —
keyword.other.substitution.end #69c49a —
keyword.operator.assignment #56b6c2 —
keyword.operator.assignment.go #FF699A —
keyword.operator.arithmetic.go, keyword.operator.address.go #de73ff —
entity.name.package.go #FF699A —
support.type.prelude.elm #56b6c2 —
support.constant.elm #ff9a5a —
punctuation.quasi.element #de73ff —
constant.character.entity #699aff bold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56b6c2 —
entity.global.clojure #FF699A —
meta.symbol.clojure #699aff bold
constant.keyword.clojure #56b6c2 —
meta.arguments.coffee, variable.parameter.function.coffee #699aff bold
meta.scope.prerequisites.makefile #699aff bold
storage.modifier.import.groovy #FF699A —
meta.method.groovy #61afef —
meta.definition.variable.name.groovy #699aff bold
meta.definition.class.inherited.classes.groovy #69c49a —
support.variable.semantic.hlsl #FF699A —
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl #de73ff —
text.variable, text.bracketed #699aff bold
support.type.swift, support.type.vb.asp #FF699A —
entity.name.function.xi #FF699A —
entity.name.class.xi #56b6c2 —
constant.character.character-class.regexp.xi #699aff bold
constant.regexp.xi #de73ff —
keyword.control.xi #56b6c2 —
beginning.punctuation.definition.quote.markdown.xi #69c49a —
beginning.punctuation.definition.list.markdown.xi #7f848e —
constant.character.xi #61afef —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #5c6370 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #FF699A —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #699aff bold
meta.brace.square #abb2bf —
comment, punctuation.definition.comment #7f848e italic
markup.quote.markdown #5c6370 —
punctuation.definition.block.sequence.item.yaml #abb2bf —
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir #56b6c2 —
entity.name.variable.parameter.cs #FF699A —
entity.name.variable.field.cs #699aff bold
markup.deleted #699aff bold
markup.underline — underline
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
keyword.control.import.python,keyword.control.flow.python — italic
markup.italic.markdown — 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*
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 } !` ;
}
GracefulBear | Coding Theme