Darkiota Theme

Name: Darkiota Theme
Author: Samzyre

Publisher: SamzyreThemes in package: 3

Some dark theme for vscode

Open in VS Code GitHub

Color themes

VS Code preview

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

Darkiota Theme — Darkiota Origin

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ee8811
activityBar.background#333333
activityBar.border#11111188
activityBar.dropBorder#ee8811
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffffff88
activityBarBadge.background#ee8811
activityBarBadge.foreground#ffffff
badge.background#222222
badge.foreground#ee8811
breadcrumb.activeSelectionForeground#6699cc
breadcrumb.background#333333
breadcrumb.focusForeground#cccccc
breadcrumb.foreground#aaaaaa
breadcrumbPicker.background#333333
button.background#66666688
button.border#00000011
button.foreground#ee8811
button.hoverBackground#88888888
button.secondaryBackground#66666688
button.secondaryForeground#dddddd
button.secondaryHoverBackground#88888888
checkbox.background#111111
checkbox.border#ffffff33
checkbox.foreground#ee8811
commandCenter.activeBackground#ffffff11
commandCenter.activeForeground#6699cc
commandCenter.background#00000011
commandCenter.border#88888844
commandCenter.foreground#6699cc
debugConsole.errorForeground#cc2211
debugConsole.infoForeground#4488aa
debugConsole.sourceForeground#aaaaaa
debugConsole.warningForeground#886622
debugConsoleInputIcon.foreground#aaaaaa
debugExceptionWidget.background#333333
debugExceptionWidget.border#88888844
debugToolBar.background#333333
debugToolBar.border#ee881188
descriptionForeground#888888
diffEditor.border#00000088
diffEditor.diagonalFill#88888844
diffEditor.insertedTextBackground#00f00010
diffEditor.insertedTextBorder#00000044
diffEditor.removedTextBackground#f0000010
diffEditor.removedTextBorder#00000044
dropdown.background#111111
dropdown.border#ffffff11
dropdown.foreground#ee8811
dropdown.listBackground#111111
editor.background#1c1c1c
editor.findMatchBackground#00880044
editor.findMatchBorder#00440022
editor.findMatchHighlightBackground#ff880044
editor.findMatchHighlightBorder#88440044
editor.findRangeHighlightBackground#4488cc11
editor.findRangeHighlightBorder#11111188
editor.focusedStackFrameHighlightBackground#00ff0011
editor.foldBackground#34383c44
editor.foreground#aaaaaa
editor.hoverHighlightBackground#44444444
editor.inactiveSelectionBackground#88888844
editor.inlineValuesBackground#00000044
editor.inlineValuesForeground#cc8888
editor.lineHighlightBackground#00000018
editor.lineHighlightBorder#88888811
editor.rangeHighlightBackground#44444444
editor.rangeHighlightBorder#44444444
editor.selectionBackground#556677bb
editor.selectionForeground#ffffff88
editor.selectionHighlightBackground#00000066
editor.selectionHighlightBorder#000000
editor.snippetFinalTabstopHighlightBackground#33333388
editor.snippetFinalTabstopHighlightBorder#aa55ff88
editor.snippetTabstopHighlightBackground#33333388
editor.snippetTabstopHighlightBorder#88888844
editor.stackFrameHighlightBackground#ffff0011
editor.wordHighlightBackground#00448811
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#00884411
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#44444488
editorBracketMatch.border#88888888
editorCodeLens.foreground#888888
editorCursor.background#111111
editorCursor.foreground#ffffff
editorError.border#00000000
editorError.foreground#880000
editorGroup.border#11111188
editorGroup.dropBackground#ee881122
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#55555588
editorGroupHeader.noTabsBackground#22222288
editorGroupHeader.tabsBackground#222222
editorGroupHeader.tabsBorder#88888844
editorGutter.addedBackground#55aa1188
editorGutter.background#11111188
editorGutter.commentRangeForeground#cccccc88
editorGutter.deletedBackground#cc221188
editorGutter.foldingControlForeground#cccccccc
editorGutter.modifiedBackground#ee881188
editorHint.border#00000000
editorHint.foreground#ff888888
editorHoverWidget.background#000000
editorHoverWidget.border#88888844
editorHoverWidget.statusBarBackground#11111144
editorIndentGuide.activeBackground#ee881144
editorIndentGuide.background#ffffff11
editorInfo.border#00000000
editorInfo.foreground#4488aa44
editorInlayHint.background#00000011
editorInlayHint.foreground#aa99bb66
editorInlayHint.parameterBackground#00000011
editorInlayHint.parameterForeground#aa99bb66
editorInlayHint.typeBackground#00000011
editorInlayHint.typeForeground#aa99bb66
editorLightBulb.foreground#ffcc0088
editorLightBulbAutoFix.foreground#75beff88
editorLineNumber.activeForeground#ee8811
editorLineNumber.foreground#88888888
editorLink.activeForeground#9966cc
editorMarkerNavigation.background#333333
editorMarkerNavigationError.background#cc221188
editorMarkerNavigationInfo.background#11888888
editorMarkerNavigationWarning.background#88881188
editorOverviewRuler.addedForeground#55aa1188
editorOverviewRuler.border#88888844
editorOverviewRuler.bracketMatchForeground#888888
editorOverviewRuler.commonContentForeground#114444
editorOverviewRuler.currentContentForeground#441144
editorOverviewRuler.deletedForeground#cc221188
editorOverviewRuler.errorForeground#aa224488
editorOverviewRuler.findMatchForeground#55667788
editorOverviewRuler.incomingContentForeground#444411
editorOverviewRuler.infoForeground#1166aa88
editorOverviewRuler.modifiedForeground#bb881188
editorOverviewRuler.rangeHighlightForeground#112244
editorOverviewRuler.selectionHighlightForeground#442211
editorOverviewRuler.warningForeground#bbaa1188
editorOverviewRuler.wordHighlightForeground#114422
editorOverviewRuler.wordHighlightStrongForeground#224411
editorPane.background#111111
editorRuler.foreground#cc554422
editorSuggestWidget.background#333333
editorSuggestWidget.border#88888844
editorSuggestWidget.foreground#cccccc
editorSuggestWidget.highlightForeground#ee8811
editorSuggestWidget.selectedBackground#111111
editorUnicodeHighlight.border#cccc0088
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000bb
editorWarning.border#00000000
editorWarning.foreground#88662288
editorWhitespace.foreground#88888844
editorWidget.background#333333
editorWidget.border#88888844
editorWidget.foreground#aaaaaa
editorWidget.resizeBorder#ee881188
errorForeground#ee4444
extensionButton.prominentBackground#66666688
extensionButton.prominentForeground#eebb11
extensionButton.prominentHoverBackground#88888888
focusBorder#ee881122
foreground#aaaaaa
gitDecoration.addedResourceForeground#99cc66
gitDecoration.conflictingResourceForeground#9966cc
gitDecoration.deletedResourceForeground#cc6699
gitDecoration.ignoredResourceForeground#888888
gitDecoration.modifiedResourceForeground#cc9966
gitDecoration.renamedResourceForeground#66cccc
gitDecoration.stageDeletedResourceForeground#cc88cc
gitDecoration.stageModifiedResourceForeground#cccc88
gitDecoration.submoduleResourceForeground#66cc99
gitDecoration.untrackedResourceForeground#6699cc
input.background#00000033
input.border#ffffff22
input.foreground#cccccc
input.placeholderForeground#cccccc88
inputOption.activeBackground#00000088
inputOption.activeBorder#ee881188
inputOption.hoverBackground#88888844
inputValidation.errorBackground#111111
inputValidation.errorBorder#ee444488
inputValidation.errorForeground#ee4444
inputValidation.infoBackground#111111
inputValidation.infoBorder#77889988
inputValidation.infoForeground#778899
inputValidation.warningBackground#111111
inputValidation.warningBorder#bbaa4488
inputValidation.warningForeground#bbaa44
list.activeSelectionBackground#00000088
list.activeSelectionForeground#ee8811
list.dropBackground#ee881122
list.errorForeground#ee4444
list.focusAndSelectionOutline#ee881111
list.focusBackground#ee881144
list.focusForeground#eeeeee
list.focusOutline#ee881111
list.highlightForeground#ee8811
list.hoverBackground#44444488
list.hoverForeground#ffffff
list.inactiveFocusBackground#88888844
list.inactiveSelectionBackground#11111188
list.inactiveSelectionForeground#ee8811
list.invalidItemForeground#cc2211
list.warningForeground#bbaa44
listFilterWidget.background#000000cc
listFilterWidget.noMatchesOutline#cc221188
listFilterWidget.outline#ee881188
menu.background#383838
menu.border#88888844
menu.foreground#cccccc
menu.selectionBackground#88888844
menu.selectionBorder#44444411
menu.selectionForeground#ffffff
menu.separatorBackground#88888844
menubar.selectionBackground#ffffff11
menubar.selectionBorder#11111111
menubar.selectionForeground#6699cc
merge.border#00000000
merge.commonContentBackground#22446611
merge.commonHeaderBackground#22446644
merge.currentContentBackground#44662211
merge.currentHeaderBackground#44662244
merge.incomingContentBackground#66224411
merge.incomingHeaderBackground#66224444
mergeEditor.change.background#77889911
mergeEditor.change.word.background#66442288
mergeEditor.conflict.handled.minimapOverViewRuler#ee881166
mergeEditor.conflict.handledFocused.border#ee881166
mergeEditor.conflict.handledUnfocused.border#77889966
mergeEditor.conflict.unhandled.minimapOverViewRuler#9966cccc
mergeEditor.conflict.unhandledFocused.border#cc88ff88
mergeEditor.conflict.unhandledUnfocused.border#9966cc88
minimap.findMatchHighlight#ee8811
notificationCenter.border#88888844
notificationCenterHeader.background#444444
notificationCenterHeader.foreground#ee8811
notificationLink.foreground#9966cc
notifications.background#333333
notifications.border#88888844
notifications.foreground#cccccc
notificationsErrorIcon.foreground#ee4444
notificationToast.border#88888844
panel.background#282828
panel.border#88888844
panel.dropBorder#ee8811
panelSection.border#88888888
panelSection.dropBackground#ee881122
panelSectionHeader.background#444444
panelSectionHeader.border#88888888
panelSectionHeader.foreground#ffffff
panelTitle.activeBorder#ee8811
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#ffffff88
peekView.border#99887788
peekViewEditor.background#111111
peekViewEditor.matchHighlightBackground#1188ee11
peekViewEditor.matchHighlightBorder#11223311
peekViewEditorGutter.background#000000
peekViewResult.background#222222
peekViewResult.fileForeground#888888
peekViewResult.lineForeground#cccccc
peekViewResult.matchHighlightBackground#1188ee11
peekViewResult.selectionBackground#000000
peekViewResult.selectionForeground#ee8811
peekViewTitle.background#333333
peekViewTitleDescription.foreground#cccccc
peekViewTitleLabel.foreground#ee8811
pickerGroup.border#88888844
pickerGroup.foreground#ee8811
problemsErrorIcon.foreground#cc2211
problemsInfoIcon.foreground#778899
problemsWarningIcon.foreground#aa8844
progressBar.background#ee8811
quickInput.background#282828
quickInput.foreground#cccccc
quickInputList.focusIconForeground#cccccc
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#ee881188
scrollbarSlider.background#aaaaaa44
scrollbarSlider.hoverBackground#ffffff44
selection.background#55667788
settings.checkboxBackground#111111
settings.checkboxBorder#ffffff33
settings.checkboxForeground#ee8811
settings.dropdownBackground#111111
settings.dropdownBorder#ffffff22
settings.dropdownForeground#ee8811
settings.dropdownListBorder#ffffff22
settings.focusedRowBackground#00000022
settings.focusedRowBorder#ee881122
settings.headerBorder#ffffff22
settings.headerForeground#dddddd
settings.modifiedItemIndicator#4488cc88
settings.numberInputBackground#111111
settings.numberInputBorder#ffffff22
settings.numberInputForeground#aacc99
settings.rowHoverBackground#88888811
settings.sashBorder#ffffff22
settings.textInputBackground#111111
settings.textInputBorder#ffffff22
settings.textInputForeground#cc9988
sideBar.background#282828
sideBar.border#11111188
sideBar.dropBackground#ee881122
sideBar.foreground#cccccc
sideBarSectionHeader.background#444444
sideBarSectionHeader.border#88888888
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ee8811
statusBar.background#444444
statusBar.border#88888844
statusBar.debuggingBackground#ee881188
statusBar.debuggingBorder#ee881144
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#ee881122
statusBar.foreground#ee8811
statusBar.noFolderBackground#444444
statusBar.noFolderBorder#88888844
statusBar.noFolderForeground#cccccc
statusBarItem.activeBackground#00000088
statusBarItem.errorBackground#ff221188
statusBarItem.errorForeground#ffffff
statusBarItem.focusBorder#ee881144
statusBarItem.hoverBackground#88888844
statusBarItem.prominentBackground#22222288
statusBarItem.prominentForeground#eebb11
statusBarItem.prominentHoverBackground#88888844
statusBarItem.remoteBackground#ee881188
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#aa884488
statusBarItem.warningForeground#eeeeee
symbolIcon.arrayForeground#aabbcc
symbolIcon.booleanForeground#cc88aa
symbolIcon.classForeground#ccaa11
symbolIcon.colorForeground#aaaaaa
symbolIcon.constantForeground#aa88cc
symbolIcon.constructorForeground#6699cc
symbolIcon.enumeratorForeground#55bb77
symbolIcon.enumeratorMemberForeground#aa88cc
symbolIcon.eventForeground#55bb77
symbolIcon.fieldForeground#aabbcc
symbolIcon.fileForeground#cc9966
symbolIcon.folderForeground#cc9966
symbolIcon.functionForeground#6699cc
symbolIcon.interfaceForeground#ccaa11
symbolIcon.keyForeground#ee8811
symbolIcon.keywordForeground#ee8811
symbolIcon.methodForeground#6699cc
symbolIcon.moduleForeground#cc5544
symbolIcon.namespaceForeground#cc5544
symbolIcon.nullForeground#000000
symbolIcon.numberForeground#99bb88
symbolIcon.objectForeground#ccaa11
symbolIcon.operatorForeground#55bbbb
symbolIcon.packageForeground#cc5544
symbolIcon.propertyForeground#55bb77
symbolIcon.referenceForeground#cc6699
symbolIcon.snippetForeground#aaaaaa
symbolIcon.stringForeground#bb8877
symbolIcon.structForeground#aa9977
symbolIcon.textForeground#888888
symbolIcon.typeParameterForeground#ccaa11
symbolIcon.unitForeground#55bbbb
symbolIcon.variableForeground#aabbcc
tab.activeBackground#000000
tab.activeBorder#ee8811
tab.activeBorderTop#ee881188
tab.activeForeground#ee8811
tab.activeModifiedBorder#553388cc
tab.border#88888844
tab.hoverBackground#44444488
tab.hoverBorder#11111188
tab.inactiveBackground#00000088
tab.inactiveForeground#888888
tab.inactiveModifiedBorder#55338888
tab.unfocusedActiveBackground#000000cc
tab.unfocusedActiveBorder#888888
tab.unfocusedActiveBorderTop#88888888
tab.unfocusedActiveForeground#cccccc
tab.unfocusedActiveModifiedBorder#55338866
tab.unfocusedHoverBackground#44444488
tab.unfocusedHoverBorder#00000088
tab.unfocusedInactiveBackground#00000066
tab.unfocusedInactiveForeground#888888
tab.unfocusedInactiveModifiedBorder#55338844
terminal.ansiBlack#000000
terminal.ansiBlue#3333bb
terminal.ansiBrightBlack#888888
terminal.ansiBrightBlue#4444dd
terminal.ansiBrightCyan#44dddd
terminal.ansiBrightGreen#44dd44
terminal.ansiBrightMagenta#dd44dd
terminal.ansiBrightRed#dd4444
terminal.ansiBrightWhite#dddddd
terminal.ansiBrightYellow#dddd44
terminal.ansiCyan#33bbbb
terminal.ansiGreen#33bb33
terminal.ansiMagenta#bb33bb
terminal.ansiRed#bb3333
terminal.ansiWhite#aaaaaa
terminal.ansiYellow#bbbb33
terminal.background#111111
terminal.border#88888844
terminal.foreground#bbbbbb
terminal.selectionBackground#ffffff44
terminalCursor.background#111111
terminalCursor.foreground#ffffff
textBlockQuote.background#6699cc22
textBlockQuote.border#6699cc88
textCodeBlock.background#33333388
textLink.activeForeground#9966cc
textLink.foreground#6699cc
textPreformat.foreground#cc9966
textSeparator.foreground#cccccc
titleBar.activeBackground#181818
titleBar.activeForeground#6699cc
titleBar.border#88888844
titleBar.inactiveBackground#444444
titleBar.inactiveForeground#888888
tree.indentGuidesStroke#88888888
walkThrough.embeddedEditorBackground#222222
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.groovy.embedded	#CCCCCC	—
emphasis	—	italic
strong	—	bold
header	#AABBCC	—
comment, punctuation.definition.comment	#AABBBB88	—
string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#CCBBAA88	—
string, punctuation.definition.string, punctuation.definition.char	#BB8877	—
constant.numeric	#99BB88	—
constant.language	#CC88AA	—
punctuation.definition.constant, constant.character, constant.other, support.constant	#AA88CC	—
variable	—
keyword, keyword.control, keyword.other	#EE8811	—
keyword.preprocessor, keyword.other.documentation	#DD5588	—
storage, entity.name.function.decorator	#77BBBB
storage.type, keyword.other.var, keyword.other.unit, entity.name.tag	#DDAA11
storage.modifier, entity.name.type.lifetime, punctuation.definition.lifetime	#CC5544	—
entity.name.class, entity.other.attribute-name, entity.other.inherited-class	#AA88CC
entity.name.function, support.function, meta.function-call.generic	#6699CC	—
variable.parameter	#CCCCCC
support.type, support.class, punctuation.support	#BBCCDD
support.other.variable	—
invalid	#CC2211
invalid.deprecated	#CC2211	—
meta.structure.dictionary.json string.quoted.double.json	#BB8877	—
meta.diff, meta.diff.header	#445566	—
markup.deleted	#EE118888	—
markup.inserted	#88EE1188	—
markup.changed	#EE881188	—
constant.numeric.line-number.find-in-files - match	#88EE1188	—
entity.name.filename.find-in-files	#DDAA1188	—
meta.property-value, support.constant.property-value, constant.other.color	#CCCC88	—
meta.structure.dictionary.json string.quoted.double.json	#9999AA	—
meta.structure.dictionary.value.json string.quoted.double.json	#BB8877	—
meta.property-name support.type.property-name	—
meta.property-value punctuation.separator.key-value	#AABBBB	—
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin	#EE8811
variable.other	#AABBCC
variable.parameter.function.coffee	#BBBB88
entity.name.section.markdown	#CCCCCC	—
punctuation.definition.heading.markdown	#EE8811	—
markup.raw.inline.markdown	#CCCC88	—
punctuation.definition.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#DDAA11	—
punctuation.definition.metadata.markdown	#CC5544	—
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown	#6699CC
markup.bold.markdown, markup.italic.markdown	#AA88AA	—
markup.italic.markdown	—	italic
markup.bold.markdown	—	bold
markup.raw.block.markdown	#CC5544	—
markup.deleted.git_gutter	#EE118888	—
markup.inserted.git_gutter	#88EE1188	—
markup.changed.git_gutter	#EE881188	—
meta.template.expression	#AABBCC	—
token.info-token	#6699CC	—
token.warn-token	#CC9966	—
token.error-token	#EE5555	—
token.debug-token	#9966CC	—
punctuation, meta.brace	#BBBBBB	—
punctuation.definition.bracket, punctuation.definition.begin, punctuation.definition.end, punctuation.other, punctuation.terminator, keyword.operator	#CCCCCC	—
entity.name.type, entity.name.package	#DDDDDD	—
constant.regexp	#8888CC	—
markup.underline	—	underline
markup.bold	#6699CC	bold
markup.heading	#AABBCC	bold
markup.italic	—	italic
beginning.punctuation.definition.quote.markdown	#99CC66	—
beginning.punctuation.definition.list.markdown	#6699CC	—
markup.inline.raw	#CC9966	—
punctuation.definition.tag	#888888	—
meta.preprocessor, meta.selector, meta.attribute	#99889F	—
meta.paragraph, meta.embedded	#999FA0	—
support.variable	#88AA99	—
meta.preprocessor.string	#998877	—
meta.preprocessor.numeric	#889977	—
string.tag, string.value	#CC9966	—
string.regexp	#AA88AA	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#6699CC	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python	#CC5544	—
support.function.git-rebase	#AABBCC	—
constant.sha.git-rebase	#BBCCAA	—
variable.language, variable.parameter.function.language.special, keyword.other.this	#AA9977	—
support.constant.handlebars	#BBAA88	—
meta.object-literal.key, meta.definition.variable.name, entity.name.variable	#CCCCCC	—
support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#CC9966	—
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, keyword.operator.or.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp	#CCBB88	—
text, meta	#AAAAAA	—
log	#888888	—
log.string	#BB8877	—
log.date	#778899	—
log.constant	#CC88AA	—
log.verbose	#AA88CC	—
log.debug	#6699CC	—
log.info	#99BB88	—
log.warning	#CCBB44	—
log.error	#CC5544	—
log.exceptiontype	#CC6622	—
log.exception	#CC9922	—
*, comment, markup.quote, variable.language, variable.parameter, storage.type.function	—

Shiki preview

TypeScript sample highlighted with 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}!`;
}