Code Monkey home page Code Monkey logo

apollo-midnight's Introduction

Apollo Midnight Visual Studio Code theme

Screenshot of the Apollo Midnight VS 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! ๐ŸŽ‰

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. ๐Ÿง โšก๐Ÿ˜€ 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.

apollo-midnight's People

Contributors

jglovier avatar svc-secops avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

apollo-midnight's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.