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

2 2

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay