Code Monkey home page Code Monkey logo

vscode-theme-gruvbox-minor's Introduction

Gruvbox Minor

A functional Visual Studio Code theme based off of the original gruvbox theme and the Visual Studio Code Gruvbox Theme. Contains a dark and light mode as well as three sub-modes each, hard, medium, and soft.

Screenshot

screenshot

Extensions

Font

The font used in the above preview is Lilex.

Bracket Highlight

In Visual Studio Code user settings, add the following to enable editor bracket highlighting:

  "editor.bracketPairColorization.enabled": true,

Indent-rainbow

If you use indent-rainbow, add the following to your settings for matching colors:

  "indentRainbow.colors": [
    "rgba(250, 189, 47, 0.05)",
    "rgba(142, 192, 124, 0.05)",
    "rgba(131, 165, 152, 0.05)",
    "rgba(211, 134, 155, 0.05)",
    "rgba(254, 128, 25, 0.05)"
  ],
  "indentRainbow.errorColor": "rgba(251, 73, 52, 0.2)",

PRs are welcomed

Tips

  • In the json file, scope can be an array or a string of CSS classes
  • VSCode's Developer: Inspect TM Scopes command is useful to find out the scope

Customization

Customizations and tweaks can be made to all six themes at once by:

  1. Saving the customizations in tokens for syntax change, and/or workbench for editor chrome changes,
  2. Running npm start, which builds the TypeScript files and launches a program that regenerates the six theme files.

Publishing

npm start
# Replace <id> w/ vscode marketplace publisher ID (e.g. `adamsome-gruvbox`)
vsce login <id>
vsce package
# Replace <...> w/ the semanitic version segment to increment
vsce publish <'patch' | 'minor' | 'major'>

Thank Yous

Special thanks to the creator of gruvbox

Thanks to:

who worked on the original VSCode Gruvbox theme that this is based on:

Gruvbox Theme

vscode-theme-gruvbox-minor's People

Contributors

3ximus avatar adamsome avatar dependabot[bot] avatar jdinhify avatar triteksol avatar

Stargazers

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

Watchers

 avatar

vscode-theme-gruvbox-minor's Issues

Feature Request: High contrast edition of the theme.

Thanks for this awesome theme. It would be nice if there's an high contrast edition of the theme where the panes will have some sort of border or they have slightly different background color. Then it would be easier to distinguish among panes. Some folk like me prefer this than the whole workbench being in same flat color.

feature request: opaque tooltip background

It can be difficult to read a typescript mouseover when there's text behind it. Can the background be made opaque? I'm willing to take a stab at it if you can point me in the right direction.

Overlapping backgrounds in diff editor

The background for consecutive inserted and removed lines overlaps. See the below screenshot. Also now that I look at it, the color of the line numbers is pretty hard to read.
image
For reference, here's the expected behavior from the default theme:
image
I poked around a bit with the inspect element tool but I couldn't find anything obvious. Not sure what's causing this, but also I don't really have any experience with typescript, etc.

Inlay hints are very distracting

Right now the default colors for inlay hints are very distracting, this is how it looks right now (Rust code):

image

I think inlay hints are supposed to be in the background and only give you additional information when you're actively trying to look at them, they probably shouldn't be the center of attention and you should be able to read the code without being too distracted by them.

This is how the "Gruvbox Material" theme has done inlay hints and I think it looks very good:
image

Right now I'm using this code to change the colors of inlay hints for this theme:

    "workbench.colorCustomizations": {
        "[Gruvbox Minor Dark *]": {
            "editorInlayHint.background": "#ffffff00",
            "editorInlayHint.foreground": "#fcdc9060",
        }
    }

So now the background is completely transparent and for the foreground I'm using a very bright yellow (the same hue as the theme's yellow color) with low transparency which in practice looks like this:
image

Personally as long as the background is transparent and the foreground color is sufficiently faded I'd be happy.

Possible "Bracket Pair Colorizer" and "indent-rainbow" support

The original vim theme supports Rainbow Parentheses and Indent Guides plugins.

The equivalents in VS Code extension ecosystem are indent-rainbow and Bracket Pair Colorizer.

Using the colours specified in the original theme I hacked it together using Settings Cycler.

The relevant settings snippet:

    "settings.cycle": [
        {
            "id": "switchGruvbox",
            "overrideWorkspaceSettings": false,
            "values": [
                {
                    "workbench.colorTheme": "Gruvbox Minor Dark Medium",
                    "indentRainbow.colors": [
                        "rgba(31,29,27,0.1)",
                        "rgba(60,59,54,0.1)"
                    ],
                    "bracketPairColorizer.consecutivePairColors": [
                        "()",
                        "[]",
                        "{}",
                        [
                            "#d65d0e",
                            "#cc241d",
                            "#b16286"
                        ],
                        "#458588"
                    ]
                },
                {
                    "workbench.colorTheme": "Gruvbox Minor Light Medium",
                    "indentRainbow.colors": [
                        "rgba(213,196,161,0.1)",
                        "rgba(235,219,178,0.1)"
                    ],
                    "bracketPairColorizer.consecutivePairColors": [
                        "()",
                        "[]",
                        "{}",
                        [
                            "#d65d0e",
                            "#cc241d",
                            "#b16286"
                        ],
                        "#458588"
                    ]
                }
            ]
        }
    ],

Fix stickyscroll border

Love the theme! However, it doesn't properly color the border when using

    "editor.stickyScroll.enabled": true,

Here's a screenshot from Tom Philbin's Gruvbox Themes (light medium):

image

And here's a screenshot from gruvbox-minor (light medium):

image

Notice the lack of border in the second screenshot.

Is this an easy fix? I have no experience with theming vscode. ๐Ÿ˜…

Low contrast for LaTeX files

Issue: The theme has IMO very low contrast between comments (prefixed with '%') and normal text for documents written in the LaTeX markup language. The images below show the contrast between text in the gruvbox-minor (dark-hard) theme on the top as well as the gruvbox theme by jdinhlife on the bottom. In my opinion the text in the bottom picture is much more readable.

The problem for me is that I have difficulty differentiating comments from normal text, especially in larger documents. In addition general contrast of normal text to the background appears too low.

Proposed Solution: I know that color contrast may be personal preference and there might be a reason for the chosen contrast. However, if this is just an oversight or this theme is simply seldomly used for writing LaTeX, I would appreciate if the contrast could be increased. A good reference is IMO the contrast for Markdown documents, as for them gruvbox-minor is delightful to use...

minor

jdinhlife

Neovim port?

This is easily the best color scheme I've used!

I've been trying to find something equivalent for neovim, but nothing really fits the bill quite like this one.

I'm reluctant to trying to port this myself, even though I'm considering it.

Do you know of any projects who've tried it?

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.