Ohlala

🕶 How it looks

JSX

Markdown, CSS, HTML, Typescript/Javascript

🌈 Color palette

Main colors:

Color	Hex	RGB	HSL	🎨
green	#37E7AC	55, 231, 172	160°, 61%, 56%
cyan	#51FBDE	81, 251, 222	170°, 51%, 65%
blue	#00B2FF	0, 178, 255	198°, 100%, 50%
purple	#9A89B4	154, 137, 180	264°, 13%, 62%
lavender	#9B6DFF	155, 109, 255	259°, 39%, 71%
pink	#FF5CD3	255, 92, 211	316°, 46%, 68%
rose	#FF6B9D	255, 107, 157	340°, 40%, 71%
orange	#FF9970	255, 153, 112	17°, 38%, 72%
yellow	#FED604	254, 214, 4	50°, 97%, 51%
gray-01	#D9E0E8	217, 224, 232	212°, 2%, 88%
gray-02	#808182	128, 129, 130	210°, 0%, 51%
gray-09	#1F2330	31, 35, 48	226°, 21%, 15%

⚙️ Installation

1. Open the Extensions sidebar
2. Search for Ohlala
3. Click on Install
4. Open the Command Palette with Ctrl+Shift+P or ⇧ ⌘ P or go to View -> Command Palette...
5. Select Preferences: Color Theme and choose Ohlala.
6. Enjoy! 🎉

🙈 Language support

I develop mainly in React, HTML, CSS, Javascript and Typescript so for this set of languages, the theme should look pretty good but maybe there be problems for other not tested languages. 👇

🐡 Customization

If you don't like something and you want to change it, VS Code allows you to do it easily: just open the Command Palette (Ctrl+Shift+P) and select Preferences: Open Settings (JSON).
Now, you can override VS Code's defaults or Ohlala's colors.

Some examples:

• Contrast colors: if you want to add borders around items across the UI to increase the contrast:

  Code

  "workbench.colorCustomizations": {
    "contrastActiveBorder": "#68737D",
    "contrastBorder": "#68737D"
  }
  

• Underline: if you don't like underline style, you can remove it:

  Code

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "No underline",
        "scope": [
          "markup.error",
          "invalid",
          "invalid.illegal",
          "invalid.deprecated",
          "markup.underline",
          "markup.heading",
          "markup.underline.link",
          "markup.underline.link.image",
          "entity.name.type.class",
          "comment keyword.codetag.notation",
          "comment.block.documentation keyword",
          "comment.block.documentation storage.type.class",
          "entity.name.type",
          "keyword.primitive-datatypes.swift",
          "keyword.type.cs",
          "meta.protocol-list.objc",
          "meta.return-type.objc",
          "source.go storage.type",
          "source.groovy storage.type",
          "source.java storage.type",
          "source.powershell entity.other.attribute-name",
          "storage.class.std.rust",
          "storage.type.attribute.swift",
          "storage.type.c",
          "storage.type.core.rust",
          "storage.type.cs",
          "storage.type.groovy",
          "storage.type.objc",
          "storage.type.php",
          "storage.type.haskell",
          "storage.type.ocaml",
        ],
        "settings": {
          "fontStyle": "normal"
        }
      }
    ]
  }
  

• Italics: the same, if you don't like italics style, you can remove it:

  Code

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "No italics",
        "scope": [
          "markup.error",
          "invalid",
          "invalid.illegal",
          "invalid.deprecated",
          "markup.italic",
          "fenced_code.block.language.markdown",
          "fenced_code.block.language",
          "markup.raw.inner.restructuredtext",
          "markup.fenced_code.block.markdown punctuation.definition.markdown",
          "keyword.expressions-and-types.swift",
          "keyword.other.this",
          "variable.language",
          "variable.language punctuation.definition.variable.php",
          "variable.other.readwrite.instance.ruby",
          "variable.parameter.function.language.special",
          "meta.attribute.src.html",
          "meta.decorator variable.other.readwrite",
          "meta.decorator variable.other.property",
          "string",
          "entity.name.function.target.makefile",
          "entity.name.section.toml",
          "entity.name.tag.yaml",
          "variable.other.key.toml",
        ],
        "settings": {
          "fontStyle": "normal"
        }
      }
    ]
  }
  

To learn more about scopes, check out the color theme documentation.

Remove the older ohlala theme extensions

To completely remove the two old extensions published on the Marketplace and now no longer present (therefore not uninstallable), go to:

• MacOs / Linux: ~/.vscode/extensions
• Windows: %USER%\\.vscode\extensions or %USERPROFILE%\.vscode\extensions

and delete the folders ilariaventurini.ohlala-theme-1.0.8 and ilariaventurini.ohlala-vscode-1.0.10.

🐛 Issues & contributing

This theme is still in progress. Anyway, if you open an issue (or a PR), I will be happy :)

1. Clone and open this repo in VSCode
2. Run yarn to install the dependencies
3. Press F5 to open a new window with your extension loaded
4. Open Code > Preferences > Color Theme [⌘k ⌘t] and pick the Ohlala theme
5. Make changes to the /src/theme.js file
   • UI: For all changes to the "outer UI", like (status bar, file navigation etc.), take a look at the Theme Color reference
   • Syntax: For changes to the "code highlighting", examine the syntax scopes by invoking the Developer: Inspect Editor Tokens and Scopes command from the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) in the Extension Development Host window.
6. Run yarn build to update the theme. You can also run yarn start instead to automatically rebuild the theme while making changes and no reloading should be necessary.
7. Once you're happy, commit your changes and open a PR.

License

MIT © Ilaria Venturini