Sublime Text - Identical Mariana Theme

Name: Sublime Text - Identical Mariana Theme
Author: duttdutt

Publisher: duttduttThemes in package: 3

Just turn on semantic and enjoy💥

Open in VS Code GitHub

Color themes

VS Code preview

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

Sublime Text - Identical Mariana Theme — Sublime Mariana ⎯ Semantic Colorful

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#22262a
activityBar.foreground#e6e6e6
activityBarBadge.background#2e3238cc
activityBarBadge.foreground#e6e6e6
badge.background#2E3842
badge.foreground#e6e6e6
button.background#444444
button.foreground#e6e6e6
button.hoverBackground#007acc
diffEditor.insertedTextBackground#a3ce9e40
diffEditor.removedTextBackground#ee6a6f40
dropdown.background#343d46
dropdown.listBackground#343d46
editor.background#2E3842
editor.findMatchBackground#cfebfd21
editor.findMatchHighlightBackground#cfebfd21
editor.findRangeHighlightBackground#cfebfd21
editor.foreground#FFF
editor.hoverHighlightBackground#cfebfd21
editor.inactiveSelectionBackground#4c5863fc
editor.lineHighlightBackground#4D5864
editor.lineHighlightBorder#2E3842
editor.rangeHighlightBackground#cfebfd21
editor.selectionBackground#4c5863
editor.selectionHighlightBackground#4c5863fc
editor.selectionHighlightBorder#647382
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorCursor.foreground#FFAA42
editorError.border#00000000
editorError.foreground#ee6a6f
editorGroup.border#2E3842
editorGroup.dropBackground#4f565e90
editorGroupHeader.border#2E3842
editorGroupHeader.noTabsBackground#2E3842
editorGroupHeader.tabsBackground#4F565E
editorGutter.addedBackground#a3ce9e
editorGutter.deletedBackground#ee6a6f
editorGutter.modifiedBackground#ebcb8b
editorInfo.foreground#a3ce9e
editorLineNumber.activeForeground#bfc5d0
editorLineNumber.foreground#848b95
editorOverviewRuler.addedForeground#a3ce9e
editorOverviewRuler.border#2E3842
editorOverviewRuler.bracketMatchForeground#cfebfd3d
editorOverviewRuler.currentContentForeground#cfebfd3d
editorOverviewRuler.deletedForeground#ee6a6f
editorOverviewRuler.errorForeground#ee6a6f
editorOverviewRuler.findMatchForeground#cfebfd3d
editorOverviewRuler.incomingContentForeground#cff4fd3d
editorOverviewRuler.infoForeground#cfebfd3d
editorOverviewRuler.modifiedForeground#ebcb8b
editorOverviewRuler.rangeHighlightForeground#cfebfd3d
editorOverviewRuler.selectionHighlightForeground#cfebfd3d
editorOverviewRuler.warningForeground#ebcb8b
editorOverviewRuler.wordHighlightForeground#cfebfd3d
editorOverviewRuler.wordHighlightStrongForeground#cfebfd3d
editorSuggestWidget.background#404954
editorWarning.border#00000000
editorWarning.foreground#fab763
editorWhitespace.foreground#cfebfd3d
editorWidget.background#404954
editorWidget.border#cfebfd3d
extensionButton.prominentBackground#454b54
extensionButton.prominentForeground#e6e6e6
extensionButton.prominentHoverBackground#454b5470
focusBorder#cfebfd3d
foreground#e6e6e6
gitDecoration.conflictingResourceForeground#FF5261
gitDecoration.deletedResourceForeground#ee6a6f
gitDecoration.modifiedResourceForeground#FFAA42
gitDecoration.submoduleResourceForeground#ffffff70
gitDecoration.untrackedResourceForeground#ffffff70
input.background#343d46
input.border#cfebfd21
input.foreground#e6e6e6
input.placeholderForeground#ffffff70
list.activeSelectionBackground#cfebfd21
list.activeSelectionForeground#e6e6e6
list.dropBackground#cfebfd21
list.errorForeground#ee6a6f
list.focusBackground#cfebfd21
list.focusForeground#e6e6e6
list.highlightForeground#e6e6e6
list.hoverBackground#cfebfd14
list.hoverForeground#e6e6e6
list.inactiveSelectionBackground#cfebfd14
list.inactiveSelectionForeground#e6e6e6
list.warningForeground#fab763
menu.background#2b2a29e8
merge.currentContentBackground#fab76340
merge.currentHeaderBackground#fab76370
merge.incomingContentBackground#a3ce9e40
merge.incomingHeaderBackground#a3ce9e70
minimap.selectionHighlight#687785fc
minimapSlider.activeBackground#696c6f59
minimapSlider.background#696c6f59
minimapSlider.hoverBackground#696c6f59
notificationCenterHeader.background#23292e
notificationCenterHeader.foreground#e6e6e6
panel.background#454b54
panel.border#cfebfd21
panelTitle.activeBorder#e7e7e7
peekView.border#6699cc
peekViewEditor.background#23292e
peekViewEditor.matchHighlightBackground#cfebfd3d
peekViewEditorGutter.background#23292e
peekViewResult.background#343d46
peekViewTitle.background#23292e
pickerGroup.border#6699cc
pickerGroup.foreground#6699cc
progressBar.background#23292e
scrollbar.shadow#2E384200
scrollbarSlider.activeBackground#bdc0c366
scrollbarSlider.background#61666d66
scrollbarSlider.hoverBackground#5c626bb3
selection.background#ffffff80
sideBar.background#22262A
sideBar.foreground#CCC
sideBarSectionHeader.background#22262a
sideBarSectionHeader.foreground#e6e6e6
sideBarTitle.foreground#999A9D
statusBar.background#2e3238
statusBar.border#cfebfd00
statusBar.debuggingBackground#007acc
statusBar.debuggingForeground#e6e6e6
statusBar.foreground#e6e6e6
statusBar.noFolderBackground#181c21
statusBar.noFolderForeground#e6e6e6
statusBarItem.activeBackground#cfebfd21
statusBarItem.hoverBackground#cfebfd14
statusBarItem.prominentBackground#cfebfd21
statusBarItem.prominentHoverBackground#cfebfd14
tab.activeBackground#2E3842
tab.activeBorder#2E3842
tab.activeBorderTop#2E3842
tab.activeForeground#e6e6e6
tab.border#4F565E
tab.hoverBackground#40474fe8
tab.inactiveBackground#4F565E
tab.inactiveForeground#CBCDCF
tab.unfocusedActiveBorder#2E3842
tab.unfocusedActiveBorderTop#4f565e
tab.unfocusedActiveForeground#ffffff70
tab.unfocusedInactiveForeground#CBCDCF
terminal.ansiBlack#e6e6e6
terminal.ansiBlue#6699cc
terminal.ansiBrightBlack#e6e6e6
terminal.ansiBrightBlue#6699cc
terminal.ansiBrightCyan#6699cc
terminal.ansiBrightGreen#a3ce9e
terminal.ansiBrightMagenta#c594c5
terminal.ansiBrightRed#ee6a6f
terminal.ansiBrightYellow#fab763
terminal.ansiCyan#6699cc
terminal.ansiGreen#a3ce9e
terminal.ansiMagenta#c594c5
terminal.ansiRed#ee6a6f
terminal.ansiWhite#ffffffdd
terminal.ansiYellow#fab763
terminal.background#454b54
terminal.selectionBackground#ffffff30
terminalCursor.background#ffffff30
terminalCursor.foreground#e6e6e6
textLink.activeForeground#6699cc
textLink.foreground#6699cc
textPreformat.foreground#6699cc
titleBar.activeBackground#2b2b2b
titleBar.activeForeground#e6e6e6
titleBar.inactiveBackground#2b2b2b
titleBar.inactiveForeground#7f7f7f
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.definition.block, punctuation.definition.binding-pattern.object, punctuation.definition.parameters, punctuation.definition.binding-pattern.array, punctuation.definition.dictionary, punctuation.definition.array, constant.other.color.rgb-value.xi, meta.type.tuple, meta.brace	#FFF	—
variable.other.readwrite.alias, support.type.property-name.json.comments, constant.other.color.rgb-value.xi, entity.other.inherited-class, constant.other.php, constant.other.class.php, meta.object-literal.key.js, new.expr entity.name.function, punctuation.definition.template-expression, variable.other.object.property, variable.other.object.property.js, variable.other.property, meta.var.expr meta.array.literal meta.brace.square	#FFF
support.type.property-name	#FFF	italic
entity.name.tag, support.class.component, keyword.operator.optional, constant.language.json.comments, storage, constant.regexp.xi, red, meta.type.tuple	#f64857
support.variable.property.importmeta, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan, constant.language.infinity, variable.language.this, constant.language.json, support.function	#f64857	italic
wikiword.xi	#C2B19D	—
keyword.control, storage.type, entity.other.attribute-name, keyword.control.default, keyword.control.export, keyword.control.from, entity.name.function.xi, keyword.operator.expression, constant.character, constant.language.import-export-all, storage.type.	#f380e7	—
keyword.operator.new.ts, keyword.control.flow, keyword.control.conditional, keyword.control.loop, support.function.construct.output.php, keyword.other.new.php, storage.type.function.arrow, keyword.operator.new, keyword.generator.asterisk	#f380e7	—
storage.modifier.async, storage.type	#f380e7	italic
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc	#f380e7
meta.method.declaration storage.type	#04bebb	—
string, string.quoted.double.json.comments, support.type.property-name.json.comments, support.type.property-name.json	#76d37b
punctuation.definition.string, punctuation.definition.tag, punctuation.definition.typeparameters, meta.jsx.children punctuation.section.embedded, punctuation.definition.string.begin.json.comments, punctuation.definition.string.end.json.comments, entity.name.class.xi, punctuation.definition, support.constant.core, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#04bebb
meta.tag.attributes keyword.operator.assignment, comment.block, comment, punctuation.definition.comment, keyword.operator.type.annotation, punctuation.accessor, comment.block.ts, lalala, zazaza, entity.name.type.instance.jsdoc, punctuation.definition.bracket.curly, punctuation.definition.section.case-statement, punctuation.terminator.statement, punctuation.separator.comma, meta.type.tuple punctuation.separator.comma	#A5ACBA	—
constant.numeric, invalid.xi, orange	#ff198c	—
entity.name.type.class.php, support.class.php, entity.other.inherited-class.php	#FCBB6A	—
keyword.operator, keyword.control.xi, storage.type.function.arrow	#ff5d35
keyword.operator.logical, keyword.operator.optional	#ff5d35	bold
keyword.operator.expression.keyof, keyword.operator.expression.typeof, keyword.operator.expression.delete, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.instanceof, keyword.operator.expression.void, keyword.operator.expression.of, keyword.other.type, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.from, keyword.control.as, keyword.control.flow, storage.modifier, storage.modifier.async, keyword.operator.new, keyword.operator.new.ts	#ff5d35	italic
entity.name.function, constant.character.character-class.regexp.xi	#1c9dff	italic
support.type.primitive, variable.other.object	#1c9dff	italic
entity.name.type.class	#FFF	—
entity.,other.inherited-class.ts	#FFF	italic
beginning.punctuation.definition.list.markdown.xi, punctuation.definition.tag.xi, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#404750	—
text.xi	#CE9178	—
white	#FFFFFF	—
beginning.punctuation.definition.quote.markdown.xi	#00E673	—
accent.xi	#00E6E6	—
constant.character.xi	#1c9dff	—
meta.type.declaration entity.name.type	#1c9dff	italic

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}!`;
}