odon ml theme

Name: odon ml theme
Author: odon-ml-theme

Publisher: odon-ml-themeThemes in package: 3

my first custom theme vscode

Open in VS Code

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

odon ml theme — devu-dark-theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#99F2BF25
activityBar.activeBorder#99F2BF
activityBar.background#281031
activityBar.border#2B2B2B
activityBar.foreground#99F2BF
activityBar.inactiveForeground#AB7ABF
activityBarBadge.background#0078D4
activityBarBadge.foreground#FFFFFF
badge.background#616161
badge.foreground#F8F8F8
button.background#0078D4
button.border#FFFFFF12
button.foreground#FFFFFF
button.hoverBackground#026EC1
editor.background#281031
editor.findMatchBackground#9E6A03
editor.foreground#CCCCCC
editorGroup.border#FFFFFF17
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#2B2B2B
focusBorder#0078D4
foreground#CCCCCC
icon.foreground#CCCCCC
input.background#313131
input.border#3C3C3C
input.foreground#CCCCCC
panel.background#281031
panel.border#AB7ABF95
panelInput.border#2B2B2B
panelTitle.activeBorder#99F2BF
panelTitle.activeForeground#99F2BF
panelTitle.inactiveForeground#D08DA0
pickerGroup.border#3C3C3C
progressBar.background#0078D4
scrollbar.shadow#00000000
scrollbarSlider.background#370b44
scrollbarSlider.hoverBackground#46083b
sideBar.background#281031
sideBar.border#2B2B2B
sideBar.foreground#CCCCCC
sideBarSectionHeader.background#181818
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#CCCCCC
sideBarTitle.foreground#CCCCCC
statusBar.background#281031
statusBar.border#2B2B2B
statusBar.debuggingBackground#0078D4
statusBar.debuggingForeground#FFFFFF
statusBar.focusBorder#0078D4
statusBar.foreground#618BC0
statusBar.noFolderBackground#1F1F1F
statusBarItem.focusBorder#0078D4
statusBarItem.hoverBackground#F1F1F133
statusBarItem.hoverForeground#FFFFFF
statusBarItem.prominentBackground#6E768166
statusBarItem.remoteBackground#0078D4
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#AB7ABF3b
tab.activeBorder#1F1F1F
tab.activeBorderTop#AB7ABF
tab.activeForeground#DFDEDE
tab.border#2B2B2B
tab.hoverBackground#12c89517
tab.hoverBorder#99F2BF
tab.inactiveBackground#001a3b39
tab.inactiveForeground#DFDEDE
tab.selectedBorderTop#6caddf
tab.unfocusedActiveBorder#1F1F1F
tab.unfocusedActiveBorderTop#2B2B2B
tab.unfocusedHoverBackground#1F1F1F
tab.unfocusedHoverForeground#10ab7f
terminal.background#281031
terminal.border#99F2BF95
terminal.foreground#CCCCCC
terminal.tab.activeBorder#FFB700
titleBar.activeBackground#281031
titleBar.activeForeground#DFDEDE
titleBar.border#2B2B2B
titleBar.inactiveBackground#1F1F1F
titleBar.inactiveForeground#9D9D9D
widget.border#313131
window.activeBorder#AB7ABF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python, meta.template.expression	#D4D4D4	—
emphasis	—	italic
strong	—	bold
header	#000080	—
comment	#6A9955	—
constant.language	#569cd6	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit, constant.sha.git-rebase, meta.preprocessor.numeric	#b5cea8	—
constant.regexp	#646695	—
entity.name.tag	#569cd6	—
entity.name.tag.css, entity.name.tag.less, entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss, keyword.operator.quantifier.regexp, constant.character.escape	#d7ba7d	—
entity.other.attribute-name, meta.structure.dictionary.key.python, support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded, support.function.git-rebase	#9cdcfe	—
invalid	#f44747	—
markup.underline	—	underline
markup.bold, markup.heading, markup.changed	#569cd6	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#b5cea8	—
markup.deleted, markup.inline.raw, string, meta.embedded.assembly, string.tag, string.value, meta.preprocessor.string, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color, punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#ce9178	—
punctuation.definition.quote.begin.markdown	#6A9955	—
punctuation.definition.list.begin.markdown	#6796e6	—
punctuation.definition.tag	#808080	—
meta.preprocessor, entity.name.function.preprocessor, meta.diff.header, storage, storage.type, storage.modifier, keyword.operator.noexcept, keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, variable.language, constant.character, constant.other.option	#569cd6	—
string.regexp, constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#d16969	—
keyword.operator	#d4d4d4	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#d4d4d4	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, keyword.operator.or.regexp, keyword.control.anchor.regexp	#DCDCAA	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby	#4EC9B0	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator	#C586C0	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder, meta.object-literal.key	#9CDCFE	—
variable.other.constant, variable.other.enummember	#4FC1FF	—
entity.name.label	#C8C8C8	—