One Dark Pro
Atom's iconic One Dark theme for Visual Studio Code
Atom's iconic One Dark theme for Visual Studio Code
Full workbench mockup using this variant's colors and tokenColors.
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}!`;
}
One Dark Pro is Atom's One Dark theme for VS Code. The pack includes One Dark Pro, Flat, Darker, Mix, and Night Flat. The syntax colors stay the same. Only the background changes. The README also covers italic keywords and a markdown preview style. Those color settings apply to the default One Dark Pro theme.
Comments are #7f848e. Keywords are #c678dd. Strings are #98c379. Functions are #61afef. Types are #e5c07b. Numbers are #d19a66. Variables are #e06c75. Body text is #abb2bf.
The default background is #282c34. Darker is #23272e. Night Flat is #16191d. Purple keywords, green strings, and blue functions stay easy to pick out.
Workbench UI color keys from the theme JSON colors map.
| key | HEX | RGB | RGBA |
|---|---|---|---|
actionBar.toggledBackground | |||
activityBar.background | |||
activityBar.foreground | |||
activityBarBadge.background | |||
activityBarBadge.foreground | |||
agents.background | |||
agentsBadge.background | |||
agentsBadge.foreground | |||
agentsChatInput.background | |||
agentsChatInput.border | |||
agentsChatInput.focusBorder | |||
agentsChatInput.foreground | |||
agentsChatInput.placeholderForeground | |||
agentSessionReadIndicator.foreground | |||
agentSessionSelectedBadge.border | |||
agentSessionSelectedUnfocusedBadge.border | |||
agentsGradient.tintColor | |||
agentsNewSessionButton.background | |||
agentsNewSessionButton.border | |||
agentsNewSessionButton.foreground | |||
agentsNewSessionButton.hoverBackground | |||
agentsPanel.background | |||
agentsPanel.border | |||
agentsPanel.foreground | |||
agentStatusIndicator.background | |||
agentsUnreadBadge.background | |||
agentsUnreadBadge.foreground | |||
badge.background | |||
button.background | |||
button.secondaryBackground | |||
button.secondaryForeground | |||
chat.avatarBackground | |||
chat.avatarForeground | |||
chat.checkpointSeparator | |||
chat.editedFileForeground | |||
chat.linesAddedForeground | |||
chat.linesRemovedForeground | |||
chat.requestBackground | |||
chat.requestBorder | |||
chat.requestBubbleBackground | |||
chat.requestBubbleHoverBackground | |||
chat.requestCodeBorder | |||
chat.slashCommandBackground | |||
chat.slashCommandForeground | |||
chat.thinkingShimmer | |||
checkbox.border | |||
debugToolBar.background | |||
descriptionForeground | |||
diffEditor.insertedTextBackground | |||
dropdown.background | |||
dropdown.border | |||
editor.background | |||
editor.border | |||
editor.findMatchBackground | |||
editor.findMatchBorder | |||
editor.findMatchHighlightBackground | |||
editor.foreground | |||
editor.lineHighlightBackground | |||
editor.linkedEditingBackground | |||
editor.selectionBackground | |||
editor.selectionHighlightBackground | |||
editor.selectionHighlightBorder | |||
editor.wordHighlightBackground | |||
editor.wordHighlightBorder | |||
editor.wordHighlightStrongBackground | |||
editor.wordHighlightStrongBorder | |||
editorBracketHighlight.foreground1 | |||
editorBracketHighlight.foreground2 | |||
editorBracketHighlight.foreground3 | |||
editorBracketMatch.background | |||
editorBracketMatch.border | |||
editorCursor.background | |||
editorCursor.foreground | |||
editorError.foreground | |||
editorGroup.border | |||
editorGroup.emptyBackground | |||
editorGroupHeader.tabsBackground | |||
editorGutter.addedBackground | |||
editorGutter.deletedBackground | |||
editorGutter.modifiedBackground | |||
editorHoverWidget.background | |||
editorHoverWidget.border | |||
editorHoverWidget.highlightForeground | |||
editorIndentGuide.activeBackground1 | |||
editorIndentGuide.background1 | |||
editorInlayHint.background | |||
editorInlayHint.foreground | |||
editorLineNumber.activeForeground | |||
editorLineNumber.foreground | |||
editorMarkerNavigation.background | |||
editorMinimap.inlineChatInserted | |||
editorOverviewRuler.addedForeground | |||
editorOverviewRuler.border | |||
editorOverviewRuler.deletedForeground | |||
editorOverviewRuler.inlineChatInserted | |||
editorOverviewRuler.inlineChatRemoved | |||
editorOverviewRuler.modifiedForeground | |||
editorRuler.foreground | |||
editorStickyScroll.background | |||
editorStickyScroll.border | |||
editorStickyScroll.shadow | |||
editorStickyScrollGutter.background | |||
editorStickyScrollHover.background | |||
editorSuggestWidget.background | |||
editorSuggestWidget.border | |||
editorSuggestWidget.selectedBackground | |||
editorWarning.foreground | |||
editorWhitespace.foreground | |||
editorWidget.background | |||
focusBorder | |||
git.blame.editorDecorationForeground | |||
gitDecoration.ignoredResourceForeground | |||
inlineChat.background | |||
inlineChat.border | |||
inlineChat.foreground | |||
inlineChat.shadow | |||
inlineChatDiff.inserted | |||
inlineChatDiff.removed | |||
inlineChatInput.background | |||
inlineChatInput.border | |||
inlineChatInput.focusBorder | |||
inlineChatInput.placeholderForeground | |||
input.background | |||
input.foreground | |||
list.activeSelectionBackground | |||
list.activeSelectionForeground | |||
list.focusBackground | |||
list.focusForeground | |||
list.highlightForeground | |||
list.hoverBackground | |||
list.hoverForeground | |||
list.inactiveSelectionBackground | |||
list.inactiveSelectionForeground | |||
list.warningForeground | |||
menu.foreground | |||
menu.separatorBackground | |||
minimap.chatEditHighlight | |||
minimapGutter.addedBackground | |||
minimapGutter.deletedBackground | |||
minimapGutter.modifiedBackground | |||
modernActivityBar.background | |||
modernActivityBar.border | |||
modernActivityBar.inactiveBackground | |||
modernPanel.border | |||
modernUI.inactiveShellBackground | |||
modernUI.shellBackground | |||
multiDiffEditor.background | |||
multiDiffEditor.border | |||
multiDiffEditor.headerBackground | |||
panel.border | |||
panelSectionHeader.background | |||
peekViewEditor.background | |||
peekViewEditor.matchHighlightBackground | |||
peekViewEditorStickyScroll.background | |||
peekViewEditorStickyScrollGutter.background | |||
peekViewResult.background | |||
scmGraph.foreground1 | |||
scmGraph.foreground2 | |||
scmGraph.foreground3 | |||
scmGraph.foreground4 | |||
scmGraph.foreground5 | |||
scmGraph.historyItemBaseRefColor | |||
scmGraph.historyItemHoverAdditionsForeground | |||
scmGraph.historyItemHoverDefaultLabelBackground | |||
scmGraph.historyItemHoverDefaultLabelForeground | |||
scmGraph.historyItemHoverDeletionsForeground | |||
scmGraph.historyItemHoverLabelForeground | |||
scmGraph.historyItemRefColor | |||
scmGraph.historyItemRemoteRefColor | |||
scrollbar.shadow | |||
scrollbarSlider.activeBackground | |||
scrollbarSlider.background | |||
scrollbarSlider.hoverBackground | |||
settings.focusedRowBackground | |||
settings.headerForeground | |||
sideBar.background | |||
sideBar.foreground | |||
sideBarSectionHeader.background | |||
sideBarSectionHeader.foreground | |||
sideBarStickyScroll.background | |||
sideBarStickyScroll.border | |||
sideBarStickyScroll.shadow | |||
statusBar.background | |||
statusBar.debuggingBackground | |||
statusBar.debuggingBorder | |||
statusBar.debuggingForeground | |||
statusBar.foreground | |||
statusBar.noFolderBackground | |||
statusBarItem.remoteBackground | |||
statusBarItem.remoteForeground | |||
surface.background | |||
surface.border | |||
tab.activeBackground | |||
tab.activeBorder | |||
tab.activeForeground | |||
tab.border | |||
tab.hoverBackground | |||
tab.inactiveBackground | |||
tab.unfocusedHoverBackground | |||
terminal.ansiBlack | |||
terminal.ansiBlue | |||
terminal.ansiBrightBlack | |||
terminal.ansiBrightBlue | |||
terminal.ansiBrightCyan | |||
terminal.ansiBrightGreen | |||
terminal.ansiBrightMagenta | |||
terminal.ansiBrightRed | |||
terminal.ansiBrightWhite | |||
terminal.ansiBrightYellow | |||
terminal.ansiCyan | |||
terminal.ansiGreen | |||
terminal.ansiMagenta | |||
terminal.ansiRed | |||
terminal.ansiWhite | |||
terminal.ansiYellow | |||
terminal.background | |||
terminal.border | |||
terminal.foreground | |||
terminal.selectionBackground | |||
terminalStickyScroll.background | |||
terminalStickyScroll.border | |||
terminalStickyScrollHover.background | |||
textBlockQuote.background | |||
textBlockQuote.border | |||
textLink.foreground | |||
textPreformat.foreground | |||
titleBar.activeBackground | |||
titleBar.activeForeground | |||
titleBar.inactiveBackground | |||
titleBar.inactiveForeground | |||
tree.indentGuidesStroke | |||
walkThrough.embeddedEditorBackground | |||
welcomePage.tileHoverBackground |
Foregrounds this theme assigns to the token scope catalog. A rule with only a font style is skipped, and a longer matching scope wins. Italic and bold rules are not listed — the preview above shows them in the code.
| scope | HEX | RGB | RGBA |
|---|---|---|---|
comment | |||
comment.block | |||
comment.block.documentation | |||
comment.line | |||
constant | |||
constant.character | |||
constant.character.escape | |||
constant.numeric | |||
constant.numeric.integer | |||
constant.numeric.float | |||
constant.numeric.hex | |||
constant.numeric.octal | |||
constant.other | |||
constant.other.placeholder | |||
constant.regexp | |||
constant.rgb-value | |||
entity | |||
entity.name | |||
entity.name.class | |||
entity.name.function | |||
entity.name.namespace | |||
entity.name.section | |||
entity.name.tag | |||
entity.name.type | |||
entity.name.type.enum | |||
entity.name.type.interface | |||
entity.name.type.struct | |||
entity.other | |||
entity.other.attribute-name | |||
entity.other.inherited-class | |||
invalid | |||
invalid.deprecated | |||
invalid.illegal | |||
keyword | |||
keyword.control | |||
keyword.control.flow | |||
keyword.operator | |||
keyword.operator.new | |||
keyword.operator.assignment | |||
keyword.operator.arithmetic | |||
keyword.operator.logical | |||
keyword.other | |||
markup | |||
markup.bold | |||
markup.changed | |||
markup.deleted | |||
markup.heading | |||
markup.inline.raw | |||
markup.inserted | |||
markup.italic | |||
markup.list | |||
markup.other | |||
markup.quote | |||
markup.raw | |||
markup.underline | |||
markup.underline.link | |||
meta | |||
meta.function | |||
meta.function-call | |||
meta.selector | |||
meta.tag | |||
punctuation.definition.bracket | |||
punctuation.definition.comment | |||
punctuation.definition.string.begin | |||
punctuation.definition.string.end | |||
punctuation.separator | |||
punctuation.separator.continuation | |||
punctuation.terminator | |||
storage | |||
storage.modifier | |||
storage.type | |||
string | |||
string.interpolated | |||
string.other | |||
string.quoted | |||
string.quoted.double | |||
string.quoted.other | |||
string.quoted.single | |||
string.quoted.triple | |||
string.regexp | |||
string.template | |||
string.unquoted | |||
support | |||
support.class | |||
support.constant | |||
support.function | |||
support.other | |||
support.type | |||
support.type.primitive | |||
support.type.property-name | |||
support.variable | |||
variable | |||
variable.function | |||
variable.language | |||
variable.name | |||
variable.other | |||
variable.other.constant | |||
variable.other.property | |||
variable.other.readwrite | |||
variable.parameter |