Apollo Midnight Visual Studio Code theme

The Apollo Midnight VC Code color theme is based on the color palette of Apollo Studio's GraphQL Explorer in dark mode.

Install

From Marketplace:

1. Go to the VS Code Marketplace
2. Click "Install"

From VS Code:

1. Go to Extensions in the VS Code Activity Bar (View -> Extensions)
2. Search for apollo midnight color theme
3. Click Install to install it
4. Set the theme as your active color theme (Cmd + Shift + P -> Preferences: Color Theme -> Apollo Midnight)

Customizing

Do you like this theme, but want to customize it a bit? You can easily do that by adding custom rules to your VS Code user settings file that overide theme defaults. Here's how:

{
  "workbench.colorCustomizations": {
      "[Apollo Midnight]": {
        "activityBar.background": "#000000",
        "activityBar.border": "#ff0000",
        "sideBar.background": "#000000",
        "sideBar.border": "#ff0000",
        "sideBar.foreground": "#ffffff"
      }
  }
}

Read more about customizing themes in your user settings.json file.

You may also want to refer to the Theme Color docs that tell you what keys to use to select parts of the VS Code UI.

If you wish to customize syntax, you need to do that with editor.tokenColorCustomizations, which you'll put under the workbench.colorCustomizations declarations. More about that here.

Contributing

I found something that isn't styled. Thanks for noticing! Feel free to open an issue to report it and I'll ship an update as soon as I'm able. Or, feel free to propose a styling for it by submitting a pull request! :tada:

I don't like something the way that it is styled. I understand, color choices can be very personal. If you think it's problematic for accessibilty, please let me know by opening an issue and I will address it as soon as I'm able (or open a pull request to propose a fix). If it is not accessibility related but you have general feedback, I still want to hear it. Please open an issue. Otherwise, if it's just a matter of personal taste, feel free to overide the styles with your own custom user settings on your machine. Here's how.

I have an idea for something really cool. Awesome! Great ideas are fun. :brain::zap::grinning: If your idea is something you think that everyone else would like too, open an issue to discuss it or just open a PR to propose it. If you're not sure, feel free to propose it anyway. If you just want to try out your idea for yourself, feel free to override the theme styles with your own custom user settings on your machine. Here's how.

Development (internal)

Maintainer: @jglovier

Some helpful docs for working on this theme:

• Color Theme - general context on working with Color Themes in VS Code, including making user customizations to a given them, and publishing your own themes.
• Theme Color - contains all of the different customizable elements of VS Code, and what their identifiers are.
• Publishing Extensions - how to guide on getting your theme published into the VS Code marketplace.
• Extension Manifest - definitions for what can go in your theme manifest, used for publishing in the VS Code marketplace.
• TestMate syntax Scope Naming - a guide to the syntax structure used in VS Code syntax theming (you may not need to refer to this if you just use VS Code's built in Scope Inspector to identify syntax scope on a case by case basis).
• Creating a VS Code Theme by Sarah Drasner - a helpful walk through of what it's like to create a VS Code Theme and a recommended order to do stuff in.

Note: if you want to preview your customizations immediately on your existing editor windows (instead of using VS Code's "run theme" workflow using F5), you can make your changes in your settings.json file where they will be applied globally immediately. Then you can copy and paste those into your actual theme file.

Publishing

Note: Publishing a new version of this theme is only meant for maintainers.

Prerequisite: Please follow this guide to install and login to vsce. Ask an existing maintainer how to get the "Personal Access Token".

1. Update CHANGELOG.md, and commit latest changes to the repo.
2. Run vsce publish [version]. Follow the SemVer convention and replace [version] with one of the following options:
   • patch for bug fixes
   • minor for improvements
   • major for breaking or bigger changes
3. Push the commits and make a new release.

License

This project is licensed with the MIT License, and created by Joel Glovier for hack day at Apollo.