Git Product home page Git Product logo

pastel_evening_vscode's Introduction

Pastel Evening Theme

Dark theme with pastel colors and a slight blue hint to the editor.

Color scheme

This theme aims to use relatively few different colors but still clearly distinguish different elements in the code. The comments are purposefully muted to emphasize the actual code. Short summary about colors and their meaning is below. Note however that it's possible to change them to your liking.

Color Tokens
Red Keywords
Green Types
Blue Functions
Yellow Interfaces and annotations
Light Orange Strings and numbers
Orange Labels, lifetimes, escape sequences in strings
Dark gray Comments
Light gray Main text, local variables, namespaces, modules, operators, punctuation
White Constant and static variables, function parameters, member fields and properties

Additionally static variables and methods are in italic (where possible). Mutable variables are underlined in languages where mutable variables are special, like Rust and Kotlin. See ColorScheme.md for more details about the color scheme.

It is recommended to use this theme with semantic highlighting. It will work without it as well, but may miss some colors.

Style related editor settings used to develop this theme are

"editor.fontFamily": "'JetBrains Mono'",
"editor.fontSize": 13,
"editor.inlayHints.fontSize": 10,
"editor.fontWeight": 600,
"editor.fontLigatures": true,
"workbench.iconTheme": "material-icon-theme",

It's worth noting that Linux's and Windows' font rendering is different, I have found that on Linux fontWeight=600 is about the same look as fontWeight=425 on Windows using JetBrains Mono font. With same fontWeight the theme looks quite a bit brighter on Windows than on Linux. Thus if the colors seem a bit too bright you can slightly lower the fontWeight and other way around too.

Configuration

This theme includes various configuration options to easily customize the theme to your liking. Check out the extension settings in VSCode itself, they should be relatively self-explanatory.

Variants

Below are a set of configurations you may be interested in trying out. The settings are given as a json so you can easily copy them to your settings.json.

  • Orange keywords (looks a bit less rainbow)
    "pastelEveningTheme.colorOverrides.tokens": {
        "keywords": "orange"
    }

Tested languages

The theme has been tested with various languages, mainly against the examples from Code Syntax Examples repo but with some other projects as well.

  • C++, C#, F#, Go, Haskell, Java, Javascript (.js, .jsx), Typescript (.ts, .tsx), CSS, HTML, Kotlin, Python, Ruby, Rust, Dart1, Elm1, PHP1, Scala1
  • Markup and text
    • LaTeX, Markdown, AsciiDoc
  • Misc
    • HCL, INI, JSON, RON, TOML, XML, YAML, Pest, Cabal,

Contributions

All suggestions, requests or improvements are very welcome. Submit an issue or pull request and we'll see what can be done. Check out CONTRIBUTING.md for more information.

Inspiration

This theme's code style is inspired by Panda Syntax's and Gatito Theme's pastel colors. Editor's UI style is inspired by Lapce editor's default dark theme.

License

MIT

Footnotes

  1. Have been tested with very short snippet. 2 3 4

pastel_evening_vscode's People

Contributors

kaiusl avatar

Stargazers

Luis Osio Chico avatar Meligy avatar

Watchers

 avatar

pastel_evening_vscode's Issues

Please improve contrast on text selection

Make sure to use the latest version of the theme before adding a report.
✅ v0.3.0
Describe the bug
I would like the text selection background to be a bit easier to distinguish.

Here I searched for "workbench", selected "Pastel":

image

Now with the same selection, I just hovered over the closing double quote of the string value:

image

Another example, this time selecting "centeredLayoutAutoResize":
image

More examples:

Selecting "get":

image (It's worth noting that the contrast looks more obvious in the screenshot than on real screen for some reason)

Selecting "the":

image

Extra information:

  • VS Code version: [e.g. 1.74]
    1.86.0-insider
  • Language and/or file extension: [e.g. .jsx]
    I see it in JSON, TypeScript, C#. It's probably not language specific
  • All relevant used extensions and their versions: [e.g. rust-analyzer v0.4.12]
    Not sure if any extensions are relevant to this specific issue

If you can think of any other relevant information to help find and fix the bug quickly, please add it.

Again: It's worth noting that the contrast looks more obvious in the screenshot than on real screen for some reason. So, I struggle more using the screen than it seems in them.

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.