Google Monokai

Name: Google Monokai
Author: renxzen

Publisher: renxzenThemes in package: 1

A Google inspired VS code monokai theme that focuses on simplicity, concentration and helps eye-strain.

Open in VS Code GitHub

VS Code preview

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

Google Monokai — Google Monokai

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#1e1e1e
activityBar.border#313131
activityBar.foreground#ecece6
badge.background#525252
badge.foreground#ecece6
breadcrumb.foreground#525252
button.background#525252
contrastActiveBorder#1e1e1e
contrastBorder#1e1e1e
debugToolBar.background#383838
diffEditor.insertedTextBackground#62802680
diffEditor.removedTextBackground#8C224880
dropdown.background#383838
editor.background#1e1e1e
editor.findMatchBackground#313131
editor.findMatchHighlightBackground#31313188
editor.findRangeHighlightBackground#31313188
editor.foreground#ecece6
editor.lineHighlightBackground#31313100
editor.lineHighlightBorder#313131
editor.selectionBackground#525252
editor.selectionForeground#ecece6
editor.selectionHighlightBackground#31313188
editor.selectionHighlightBorder#685f5f
editorCursor.foreground#ecece6
editorGroup.border#313131
editorGroup.dropBackground#31313180
editorGroupHeader.tabsBackground#383838
editorHoverWidget.background#313131
editorHoverWidget.border#525252
editorIndentGuide.background1#525252
editorLineNumber.activeForeground#525252
editorLineNumber.foreground#525252
editorSuggestWidget.background#1e1e1e
editorSuggestWidget.border#525252
editorWhitespace.foreground#525252
editorWidget.background#383838
focusBorder#525252
input.background#313131
inputOption.activeBorder#525252
list.activeSelectionBackground#313131
list.dropBackground#313131
list.focusBackground#313131
list.highlightForeground#ecece6
list.hoverBackground#313131
list.inactiveSelectionBackground#313131
notebook.cellBorderColor#525252
notebook.focusedCellBackground#1e1e1e
panel.border#313131
panelTitle.activeBorder#525252
panelTitle.activeForeground#ecece6
panelTitle.inactiveForeground#525252
peekView.border#525252
peekViewEditor.background#1e1e1e
peekViewEditor.matchHighlightBackground#525252
peekViewResult.background#383838
peekViewResult.matchHighlightBackground#525252
peekViewResult.selectionBackground#313131
peekViewTitle.background#383838
pickerGroup.foreground#525252
progressBar.background#525252
scrollbarSlider.activeBackground#525252
scrollbarSlider.background#525252
scrollbarSlider.hoverBackground#525252
selection.background#525252
sideBar.background#1e1e1e
sideBar.border#313131
sideBarSectionHeader.background#1e1e1e
sideBarTitle.foreground#ecece6
statusBar.background#1e1e1e
statusBar.border#313131
statusBar.debuggingBackground#525252
statusBar.debuggingBorder#1e1e1e
statusBar.foreground#ecece6
statusBar.noFolderBackground#313131
tab.activeBackground#1e1e1e
tab.activeBorder#1e1e1e
tab.border#525252
tab.inactiveBackground#313131
tab.inactiveForeground#ecece6
tab.unfocusedActiveBorder#525252
titleBar.activeBackground#252525
titleBar.border#252525
widget.shadow#000000
window.activeBorder#1e1e1e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid, invalid.deprecated, meta.structure.dictionary.json, string.quoted.double.json, meta.template.expression, constant.numeric, constant.character, constant.other, variable, storage.modifier, storage.modifier.import, storage.modifier.package, keyword.operator, storage.type.modifier.access.control, entity.other.inherited-class.java, entity.name.function.operator.member, entity.name.function.operator, variable.parameter.function, variable.parameter, entity.other.attribute-name, markup.list, meta.paragraph.markdown, variable.language, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, storage.type.function.arrow.java, support.constant.property-value.css, support.type.property-name.css, keyword.other.unit.px.css, keyword.other.unit.percentage.css, keyword.other.important.css, keyword.other.unit.suffix.floating-point.cpp, constant.language, entity.name.function.preprocessor, entity.name.function.templated, entity.other.inherited-class.python, keyword.other.unit, constant.language, punctuation.definition.decorator.python, entity.other.inherited-class.ts, storage.type.function.arrow.ts, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, keyword.control.ternary, punctuation, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, meta.ng-binding.property.html expression.ng variable.other.readwrite.ts, meta.ng-binding.template.html expression.ng variable.other.readwrite.ts, meta.ng-binding.template.html expression.ng entity.name.type.ts, meta.decorator.ts meta.objectliteral.ts variable.other.readwrite.ts, meta.embedded.block.html, storage.type.function.arrow.js, meta.item-access.python meta.indexed-name.python, entity.name.class.lua	#ecece6	—
entity.name.class, entity.name.function.call.cpp, entity.name.function.java, entity.name.function.macro.rust, meta.body.function.definition.special.constructor.cpp entity.name.function.member.cpp, meta.body.function.definition.cpp entity.name.function.member.cpp, entity.name.function.support.builtin.go, entity.name.function.support.go, entity.name.function.tagged-template.js, entity.name.tag.html, entity.name.tag.js.jsx, entity.name.tag.tsx, entity.name.type.parameter.cpp, entity.name.tag, entity.name.type.class.cs, entity.name.type.class.templated, entity.other.attribute-name.class.css, keyword.operator.expression.of.js, keyword.operator.expression.of.jsx, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx, keyword.operator.instanceof.java, keyword.other.var.cs, keyword.type.bool.cs, keyword.type.char.cs, keyword.type.cs, keyword.type.double.cs, keyword.type.float.cs, keyword.type.int.cs, keyword.type.long.cs, keyword.type.string.cs, keyword.var.go, markup.bold, markup.heading, markup.italic, meta.decorator.ts meta.object.member.ts meta.function-call.ts entity.name.function.ts, meta.function-call.generic.python, meta.function-call.js entity.name.function.js, meta.function-call.js entity.name.function, meta.function-call.js support.function.dom.js, meta.function-call.jsx entity.name.function.jsx, meta.function-call.ts entity.name.function.ts, meta.function-call.tsx entity.name.function.tsx, meta.function.call.rust entity.name.function.rust, meta.method-call.php entity.name.function, meta.ng-binding.event.html expression.ng entity.name.function.ts, meta.ng-binding.template.html expression.ng keyword.operator.expression.of.ts, meta.tag.sgml.doctype.html, storage.modifier.const.cs, storage.modifier.cs, storage.modifier.extends.java, storage.modifier.implements.java, storage.modifier.java, storage.modifier.js, storage.modifier.private.cs, storage.modifier.public.cs, storage.modifier.static.cs, storage.modifier.ts, storage.type.built-in, storage.type.generic, storage.type.modifier.access.control.private.cpp, storage.type.modifier.access.control.protected.cpp, storage.type.modifier.access.control.public.cpp, support.variable.dom.js, support.variable.property.js, text.html expression.ng entity.name.function.ts, text.html.derivative expression.ng entity.name.function.ts, entity.name.type.ts, meta.qualified-type.cpp entity.name.type.cpp, storage.modifier.specifier.const.cpp, storage.type.js, storage.modifier.specifier.functional.pre-parameters.friend.cpp, storage.type.java, storage.type.primitive.java, storage.type.local.java, storage.type.object.array.java, storage.type.ts, support.type.primitive.ts, support.type.builtin.ts, entity.name.type.module.ts, storage.type.string.go, entity.name.type.go, storage.type.numeric.go, storage.type.boolean.go, storage.type.error.go, meta.class.python support.type.python, source.python support.type.python, meta.indexed-name.python, meta.item-access.arguments.python support.function.builtin.python, storage.type.string.python, support.function.builtin.python, entity.name.type.any.go, keyword.other.rust, entity.name.type.rust, meta.function.call.rust entity.name.function.rust, storage.modifier.mut.rust, entity.name.type.numeric.rust, entity.name.type.primitive.rust, support.function.lua, support.function.library.lua, support.function.any-method.lua	#51adbf	—
string, markup.changed, entity.name.filename.find-in-files, markup.inline.raw, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.raw.markdown, entity.name.import.go, punctuation.definition.string.template, punctuation.definition.string.rust	#e2d560	—
entity.other.inherited-class, markup.inserted, markup.heading.setext, storage.type.annotation.java, entity.name.function.definition.cpp, entity.name.function.decorator.python, punctuation.definition.annotation.java, punctuation.definition.decorator.python, meta.method.identifier.java entity.name.function.java, entity.name.function.js, entity.name.type.class.ts, meta.decorator.ts meta.function-call.ts entity.name.function.ts, punctuation.decorator.ts, meta.decorator.ts variable.other.readwrite.ts, meta.decorator.js meta.function-call.js entity.name.function.js, punctuation.decorator.js, meta.decorator.js variable.other.readwrite.js, meta.attribute.rust, meta.attribute.rust punctuation.brackets.attribute.rust, meta.attribute.rust punctuation.definition.attribute.rust, meta.attribute.rust punctuation.brackets.round.rust, meta.attribute.rust entity.name.type.rust, meta.class.ts entity.other.inherited-class.ts, entity.name.type.class.java, entity.other.inherited-class.java, entity.name.type.class.cpp, meta.head.function.definition.cpp, meta.head.function.definition.cpp entity.name.function.definition.cpp, entity.name.function.definition.special.constructor.cpp, entity.name.scope-resolution.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.type.class.js, meta.head.function.definition.cpp entity.name.function.definition.cpp, entity.name.function.ts, entity.name.type.enum.ts, entity.name.type.alias.ts, entity.name.type.interface.ts, entity.name.function.go, meta.function.decorator.python support.type.python, entity.name.function.python, support.function.magic.python, entity.name.type.class.python, storage.type.function.lambda.python, entity.name.type.struct.rust, entity.name.type.trait.rust, meta.function.definition.rust entity.name.function.rust, entity.name.function.lua	#95cb29	—
constant.numeric.line-number.find-in-files - match, punctuation.definition.template-expression, punctuation.section.embedded.coffee, keyword, keyword.other.import, keyword.control.import, keyword.control.flow, storage, markup.deleted, markup.quote, keyword.operator.logical, punctuation.definition.directive.cpp, keyword.operator.instanceof.java, storage.modifier.async, keyword.operator.new, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, keyword.operator.expression.new.cs, storage.type.namespace.cs, meta.class.java meta.class.identifier.java storage.modifier.java, meta.class.java storage.modifier.extends.java, keyword.operator.expression.instanceof.ts, storage.modifier.rust, storage.modifier.implements.java, meta.use.rust keyword.other.rust	#e02266	—
comment, meta.diff, meta.diff.header, storage.type.class.jsdoc, variable.other.jsdoc, string.quoted.docstring.multi.python, entity.name.type.instance.jsdoc, keyword.other.documentation.javadoc.java, comment.block.javadoc.java, punctuation.definition.comment, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python	#696969	—

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