DEV Community

Cover image for Show time: Malibu, A retro VS Code theme inspired by the surfing days in Malibu beach.
Michael Andreuzza
Michael Andreuzza

Posted on

Show time: Malibu, A retro VS Code theme inspired by the surfing days in Malibu beach.

Get it here:

https://marketplace.visualstudio.com/items?itemName=wicked-labs.malibu

Malibu for VS Code.

Installation

  1. Open Extensions sidebar panel in VS Code. View → Extensions
  2. Search for Malibu
  3. Click Install to install it.
  4. Code > Preferences > Color Theme > Malibu Sunset - Malibu Sunrise

The theme is available for editors; shells, UI's and more coming up. Checkout the website

Available Options

  • Malibu Sunset
  • Malibu Sunrise

Sunrise

VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace

Sunset

VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace
VS Code Marketplace

Personal Settings.

{

  "editor.fontFamily": "'IBM Plex Mono', monospace",
  "editor.fontSize": 18,
  "editor.lineHeight": 38,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "normal",
  "prettier.eslintIntegration": true,
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "phase",
  "editor.renderWhitespace": "all",
}
Enter fullscreen mode Exit fullscreen mode

All themes use italics for certain language tokens by default.
To disable italics for all themes, add this snippet to your settings.json:

  • quotes and italic strings (like in markdown) will be unaffected and still be italic
  • if you want to exclude one of the themes from this change, simply remove its name (along with the brackets []) at the top of the snippet
"editor.tokenColorCustomizations": {
  "[Malibu Sunrise][Malibu Sunset]": {
    "textMateRules": [
      {
        "scope": [
          "comment",
          "variable",
          "variable.other.object.js",
          "variable.other.object.property",
          "variable.language",
          "punctuation.accessor",
          "markup.changed",
          "markup.deleted.diff",
          "markup.inserted.diff",
          "keyword",
          "keyword.operator.relational",
          "keyword.operator.comparison",
          "keyword.control.flow.js",
          "keyword.control.flow.ts",
          "keyword.control.flow.tsx",
          "keyword.control.ruby",
          "keyword.control.module.ruby",
          "keyword.control.class.ruby",
          "keyword.control.def.ruby",
          "keyword.control.loop.js",
          "keyword.control.loop.ts",
          "keyword.control.import.js",
          "keyword.control.import.ts",
          "keyword.control.import.tsx",
          "keyword.control.from.js",
          "keyword.control.from.ts",
          "keyword.control.from.tsx",
          "keyword.operator.instanceof.js",
          "keyword.operator.expression.instanceof.ts",
          "keyword.operator.expression.instanceof.tsx",
          "support.constant",
          "support.function",
          "entity.other.attribute-name",
          "entity.other.inherited-class",
          "entity.name.function",
          "entity.name.tag.doctype",
          "entity.name.function",
          "meta.directive.vue",
          "meta.diff.header.git",
          "meta.diff.header.from-file",
          "meta.diff.header.to-file",
          "meta.var.expr",
          "meta.delimiter.period",
          "meta.selector",
          "meta.tag.sgml.doctype",
          "meta.tag.sgml.doctype.html",
          "meta.class meta.method.declaration meta.var.expr storage.type.js",
          "storage",
          "storage.type.property.js",
          "storage.type.property.ts",
          "storage.type.property.tsx",
          "source.elixir .punctuation.binary.elixir",
          "source.go keyword.package.go",
          "source.go keyword.import.go",
          "source.go keyword.function.go",
          "source.go keyword.type.go",
          "source.go keyword.struct.go",
          "source.go keyword.interface.go",
          "source.go keyword.const.go",
          "source.go keyword.var.go",
          "source.go keyword.map.go",
          "source.go keyword.channel.go",
          "source.go keyword.control.go",
          "string.quoted.docstring.multi.python",
        ],
        "settings": {
          "fontStyle": ""
        },
      },
    ],
  },
},
Enter fullscreen mode Exit fullscreen mode

Malibu Theme created by Michael Andreuzza.
Twitter

Top comments (1)

Collapse
 
tomford profile image
tomford51 • Edited

Not bad, I prefer real kitesurfing lessons xtremeexpert.com/kite-safari-in-eg... Teachers usually offer not only theoretical course but also practical lessons on the water, which allows you to immerse yourself in the real process of kitesurfing and immerse yourself in the world of water adventure, a great way to relax