Skip to main content
Home Theme VS Code Atom One Dark Ruby Theme Atom One Dark with some Ruby specific semantic highlighting provided by the Ruby LSP from Shopify.
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 #333842 activityBar.foreground #D7DAE0 activityBarBadge.background #528BFF activityBarBadge.foreground #D7DAE0 badge.background #528BFF badge.foreground #D7DAE0 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle source.ruby #E06C75 — punctuation.separator.key-value #9DA5B4 — text.html.erb, source.ruby.embedded.haml #E06C75 — punctuation.separator.method.ruby, punctuation.separator.object.ruby, punctuation.separator.namespace.ruby #9DA5B4 — comment
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Atom One Dark Ruby Theme — Atom One Dark Ruby Theme
button.background
#4D78CC
button.foreground #FFFFFF
button.hoverBackground #6087CF
diffEditor.insertedTextBackground #00809B33
dropdown.background #353b45
dropdown.border #181A1F
editor.background #282C34
editor.findMatchHighlightBackground #528BFF3D
editor.foreground #ABB2BF
editor.lineHighlightBackground #99BBFF0A
editor.selectionBackground #3E4451
editorCursor.foreground #528BFF
editorGroup.border #181A1F
editorGroupHeader.tabsBackground #21252B
editorHoverWidget.background #21252B
editorHoverWidget.border #181A1F
editorIndentGuide.activeBackground1 #626772
editorIndentGuide.background1 #ABB2BF26
editorInlayHint.background #2C313A
editorInlayHint.foreground #636e83
editorLineNumber.activeForeground #ABB2BF
editorLineNumber.foreground #636D83
editorRuler.foreground #ABB2BF26
editorSuggestWidget.background #21252B
editorSuggestWidget.border #181A1F
editorSuggestWidget.selectedBackground #2C313A
editorWhitespace.foreground #ABB2BF26
editorWidget.background #21252B
editorWidget.border #3A3F4B
extensionButton.prominentBackground #2BA143
extensionButton.prominentHoverBackground #37AF4E
focusBorder #528BFF
input.background #1B1D23
input.border #181A1F
list.activeSelectionBackground #2C313A
list.activeSelectionForeground #D7DAE0
list.focusBackground #2C313A
list.highlightForeground #D7DAE0
list.hoverBackground #2C313A66
list.inactiveSelectionBackground #2C313A
list.inactiveSelectionForeground #D7DAE0
notebook.cellEditorBackground #2C313A
peekView.border #528BFF
peekViewEditor.background #1B1D23
peekViewResult.background #21252B
peekViewResult.selectionBackground #2C313A
peekViewTitle.background #1B1D23
pickerGroup.border #528BFF
scrollbarSlider.activeBackground #747D9180
scrollbarSlider.background #4E566680
scrollbarSlider.hoverBackground #5A637580
sideBar.background #21252B
sideBarSectionHeader.background #333842
statusBar.background #21252B
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #9DA5B4
statusBar.noFolderBackground #21252B
statusBarItem.hoverBackground #2C313A
tab.activeBackground #282C34
tab.activeForeground #D7DAE0
tab.border #181A1F
tab.inactiveBackground #21252B
titleBar.activeBackground #21252B
titleBar.activeForeground #9DA5B4
titleBar.inactiveBackground #21252B
titleBar.inactiveForeground #9DA5B4 comment markup.link #5C6370 —
entity.other.inherited-class #E5C07B —
keyword.other.special-method #61AFEF —
keyword.other.unit #D19A66 —
storage.type.annotation, storage.type.primitive #C678DD —
storage.modifier.package, storage.modifier.import #ABB2BF —
constant.variable #D19A66 —
constant.character.escape #56B6C2 —
constant.other.color #56B6C2 —
constant.other.symbol #56B6C2 —
variable.interpolation #BE5046 —
variable.parameter #ABB2BF —
string > source, string embedded #ABB2BF —
string.regexp source.ruby.embedded #E5C07B —
string.other.link #E06C75 —
punctuation.definition.comment #5C6370 —
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array #ABB2BF —
punctuation.definition.heading, punctuation.definition.identity #61AFEF —
punctuation.definition.bold #E5C07B bold
punctuation.definition.italic #C678DD italic
punctuation.section.embedded #BE5046 —
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class #ABB2BF —
support.function.any-method #61AFEF —
entity.name.function #61AFEF —
entity.name.class, entity.name.type.class #E5C07B —
entity.name.section #61AFEF —
entity.other.attribute-name #D19A66 —
entity.other.attribute-name.id #61AFEF —
meta.method-call, meta.method #ABB2BF —
meta.definition.variable #E06C75 —
invalid.deprecated #523D14 —
markup.italic #C678DD italic
markup.heading punctuation.definition.heading #61AFEF —
source.c keyword.operator #C678DD —
source.cpp keyword.operator #C678DD —
source.cs keyword.operator #C678DD —
source.css property-name, source.css property-value #828997 —
source.css property-name.support, source.css property-value.support #ABB2BF —
source.elixir source.embedded.source #ABB2BF —
source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition #61AFEF —
source.elixir variable.definition, source.elixir variable.anonymous #C678DD —
source.elixir parameter.variable.function #D19A66 italic
source.elixir quoted #98C379 —
source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty #E06C75 —
source.elixir readwrite.module punctuation #E06C75 —
source.elixir regexp.section, source.elixir regexp.string #BE5046 —
source.elixir separator, source.elixir keyword.operator #D19A66 —
source.elixir variable.constant #E5C07B —
source.elixir array, source.elixir scope, source.elixir section #828997 —
source.gfm link entity #61AFEF —
source.go storage.type.string #C678DD —
source.ini keyword.other.definition.ini #E06C75 —
source.java storage.modifier.import #E5C07B —
source.java storage.type #E5C07B —
source.java keyword.operator.instanceof #C678DD —
source.java-properties meta.key-pair #E06C75 —
source.java-properties meta.key-pair > punctuation #ABB2BF —
source.js keyword.operator #56B6C2 —
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void #C678DD —
source.ts keyword.operator #56B6C2 —
source.flow keyword.operator #56B6C2 —
source.json meta.structure.dictionary.json > string.quoted.json #E06C75 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #E06C75 —
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 #98C379 —
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json #56B6C2 —
ng.interpolation.begin, ng.interpolation.end #61AFEF —
ng.interpolation function #E06C75 —
ng.interpolation function.begin, ng.interpolation function.end #61AFEF —
ng.interpolation bool #D19A66 —
ng.interpolation bracket #ABB2BF —
ng.pipe, ng.operator #ABB2BF —
ng.attribute-with-value attribute-name #E5C07B —
ng.attribute-with-value string #C678DD —
ng.attribute-with-value string.begin, ng.attribute-with-value string.end #ABB2BF —
source.ruby constant.other.symbol > punctuation inherit —
source.php class.bracket #ABB2BF —
source.python keyword.operator.logical.python #C678DD —
source.python variable.parameter #D19A66 —
support.type.property-name #ABB2BF —
string.quoted.double punctuation #98C379 —
support.type.property-name.json #E06C75 —
support.type.property-name.json punctuation #E06C75 —
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx #56B6C2 —
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator #56B6C2 —
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx #ABB2BF —
support.variable.dom.js, support.variable.dom.ts #E06C75 —
support.variable.property.dom.js, support.variable.property.dom.ts #E06C75 —
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition #BE5046 —
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters #ABB2BF —
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block #ABB2BF —
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma #ABB2BF —
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx #E06C75 —
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx #E06C75 —
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx #C678DD —
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx #C678DD —
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx #ABB2BF —
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor #ABB2BF —
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx #ABB2BF —
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx #D19A66 —
source.js support.variable, source.ts support.variable, source.tsx support.variable #E06C75 —
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx #D19A66 —
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx #C678DD —
source.ts keyword.operator, source.tsx keyword.operator #56B6C2 —
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #ABB2BF —
constant.language.import-export-all.js, constant.language.import-export-all.ts #E06C75 —
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx #56B6C2 —
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx #ABB2BF —
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx #E06C75 —
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx #D19A66 —
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts #E06C75 —
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor #98C379 —
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator #ABB2BF —
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx #98C379 —
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx #ABB2BF —
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable #ABB2BF —
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type #ABB2BF —
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator #ABB2BF —
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded #ABB2BF —
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable #E5C07B —
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx #E06C75 —
constant.language.json #56B6C2 —
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx #D19A66 —
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx #56B6C2 —
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition #98C379 —
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template #98C379 —
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx #C678DD —
variable.other.object.js, variable.other.object.ts #ABB2BF —
meta.object-literal.key.js, meta.object-literal.key.ts #E06C75 —
source.python constant.other #ABB2BF —
source.python constant #D19A66 —
constant.character.format.placeholder.other.python storage #D19A66 —
support.variable.magic.python #E06C75 —
meta.function.parameters.python #D19A66 —
punctuation.separator.annotation.python #ABB2BF —
punctuation.separator.parameters.python #ABB2BF —
entity.name.variable.field.cs #E06C75 —
source.cs keyword.operator #ABB2BF —
variable.other.readwrite.cs #ABB2BF —
variable.other.object.cs #ABB2BF —
variable.other.object.property.cs #ABB2BF —
entity.name.variable.property.cs #61AFEF —
keyword.other.unsafe.rust #C678DD —
entity.name.type.rust #56B6C2 —
storage.modifier.lifetime.rust #ABB2BF —
entity.name.lifetime.rust #D19A66 —
storage.type.core.rust #56B6C2 —
meta.attribute.rust #D19A66 —
storage.class.std.rust #56B6C2 —
markup.raw.block.markdown #ABB2BF —
punctuation.definition.variable.shell #E06C75 —
support.constant.property-value.css #ABB2BF —
punctuation.definition.constant.css #D19A66 —
punctuation.separator.key-value.scss #E06C75 —
punctuation.definition.constant.scss #D19A66 —
meta.property-list.scss punctuation.separator.key-value.scss #ABB2BF —
storage.type.primitive.array.java #E5C07B —
entity.name.section.markdown #E06C75 —
punctuation.definition.heading.markdown #E06C75 —
markup.heading.setext #ABB2BF —
punctuation.definition.bold.markdown #D19A66 —
markup.inline.raw.markdown #98C379 —
beginning.punctuation.definition.list.markdown #E06C75 —
markup.quote.markdown #5C6370 italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ABB2BF —
punctuation.definition.metadata.markdown #C678DD —
markup.underline.link.markdown, markup.underline.link.image.markdown #C678DD —
string.other.link.title.markdown, string.other.link.description.markdown #61AFEF —
punctuation.separator.variable.ruby #E06C75 —
variable.other.constant.ruby #D19A66 —
keyword.operator.other.ruby #98C379 —
punctuation.definition.variable.php #E06C75 —
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 } !` ;
}
Atom One Dark Ruby Theme | Coding Theme