edheltzel / vscode-better-solarized

☯ A better Solarized theme for Visual Studio Code

Better Solarized + Selenized

This is an improvement to the built-in/original Solarized theme that comes with Visual Studio Code. It leverages Boxy Solarized Theme, with several modifications, tweaks, and customizations. Better Solarized will always draw inspiration from the original Solarized project and now includes the Selenized color palette.

Five(5) variants:

1. Solarized Dark
2. Solarized Light
3. Solarized Dark with Italics
4. Selenized Dark
5. Selenized Light

Featured on:

• vscode.email newsletter.
• located on several VSCode Theme Lists.

Additional Customization and other Tweaks

See something that you'd rather change?

No problem, feel free to edit and customize by using the workbench.colorCustomizations setting. Check out the Theme Color Reference for additional options.

Open up your settings.json and hack way.

"workbench.colorCustomizations":{
  "peekView.border": "#E50A69AB",
  "peekViewTitle.background": "#002b36",
  "peekViewResult.background": "#00212b",
  "peekViewEditor.background": "#002b36",
  "peekViewEditor.matchHighlightBackground": "#00212bAB",
  "editorBracketHighlight.foreground1": "#cdcdcdff",
  "editorBracketHighlight.foreground2": "#b58900ff",
  "editorBracketHighlight.foreground3": "#d33682ff",
},
  "editor.tokenColorCustomizations": {
    "[Better Solarized Dark]": {
      "textMateRules": [
        {
          "scope": "support.type.property-name.table.toml",
          "settings": {
            "foreground": "#FDF6E3",
            "fontStyle": "bold"
          }
        }
      ]
    }
  },

This is just an example, you can customize any color you want)

ScreenShots

Better Solarized	Better Selenized

Development

So theme development is a little unique, in the fact that I've chosen to use Eleventy to generate the JSON files using Nunjucks for templates. Eleventy is very versatile without an opinionated structure, which is why I use it.

Each theme is generated from the ./src/data/themes.js file and has a companion Nunjucks template in ./src which is then compiled into the ./themes directory.

Getting Started

1. Clone the repository gh repo clone edheltzel/vscode-better-solarized && cd vscode-better-solarized
2. Run pnpm install
3. Execute the run without debugging: Run > Run without debugging OR ctrl + F5 (see: VSCode Debugging) to start development.
4. Either open the terminal and run pnpm run serve or run a task with the command prompt Tasks: Run Task and select npm: serve (Either option works - I personally run the task inside of the terminal).
5. To edit the theme colors open the ./src/data/themes.js file and edit the colors as needed and/or edit any of the Nunjucks files in the ./src directory.

NPM Scripts

Lifecycle scripts:
  publish
    vsce publish
  release
    gh release create v%npm_package_version% --generate-notes --latest

Commands available via "pnpm run":
  build
    pnpm dlx @11ty/eleventy
  serve
    pnpm dlx @11ty/eleventy --watch

• pnpm run build - Builds the theme files for production
• pnpm run serve - Builds the theme files and watches for changes
• pnpm run release - Creates a new release using the current version in package.json

vscode-better-solarized's Issues

Syntax highlight support for Markdown

The syntax highlight for Markdown files (.md) is rather weak, I had to switch to the VSCode default solarized dark theme (which has surprisingly good at markdown syntax highlight) whenever I edit a markdown file.
For other filetypes, I really love your theme!!
Keep it up, just wish it could be even more perfect!

Idea: use different colors for string delimiters and escape sequences

Hey — firstly, thank you for creating this theme. It's really well done! I've been happily using it for a couple weeks, and this is the first time I've found something that annoys me.

Right now, the color scheme used to highlight escape sequences is the same as what's used for highlighting quotation marks at the start and end of strings. So, if I'm escaping quote marks within a string, it looks like it's the end of the string at a glance, unless I look closely.

Here's a PHP example (though it's the same in JS):

By comparison, here's how another theme (Monokai Pro) handles the same escapes:

It's a little thing, but this would be a lovely detail to include.

Consider supporting 🌔 "Selenized" 🌒 theme

Would you consider adding support for Selenized theme? Kinda like this nvim solarized palette?

What if I take a stab at it?

Update Screenshots

Need to add screen shots of light theme

disable italics

I really like this theme, but there's no way to disable the italics, and I can't really read the code very well in italics

Comments are too dark in new version

The new version's changelog didn't mention any changes to the comment coloring. However it's a lot darker now, as dark as gitlens' blame message, which makes it confusing.

Can you change it back to what it was?

The rest of the change looks great! Thanks!

No color for numbered list in Markdown

Thanks for the theme, it's really nice!

One thing I notice compared to the default: The default highlights the numbered list items different from the main text, which can be very helpful. An example:

1. Group 1

   We discuss group 1 here.

2. Group 2

   Here we discuss group 2.

The default highlights the titles "1. Group1" and "2. Group 2" in Yellow, and the paragraphs in white. Currently, Better Solarized Dark has everything as the regular paragraph color.

I'm not really sure how to customize this, but I hope you can update the theme to add this feature. Thanks!

Inline hints should be better contrasted against the background

Currently the inline hints are very poorly contrasted against the background:

so sometimes it is really hard to say what it the actual code and what are the hints generated by VS.

Maybe it is even possible to set some kind of transparency for the hints to suggest that those are not actual code?

Illegible terminal text

Hi!

I was trying this theme, and I like it, except it has the same problem as the default Solarized Dark theme: some texts in the VSCode terminal are illegible due to their color being the same as the background one.

Here are a few screenshot to illustrate:

Better Solarized Dark

Better Selenized Dark (ok)

(for reference) Solarized Dark (default VSCode theme)

Light version doesn't work and shows error

The issue #18 is fixed for Dark and Dark Italics themes in 0.9.7. But the Light theme doesn't work at all after the update to 0.9.7. It cannot be set as the theme.

When I try to set the Better Solarized Light theme, I cannot do it, and I am thrown the error:

Unable to load file:///home/[REDACTEDUNAME]/.vscode/extensions/ginfuru.ginfuru-better-solarized-dark-theme-0.9.7/themes/Better%20Solarized%20Light-color-theme.json: Problems parsing JSON theme file: Comma expected, Comma expected, Value expected, Comma expected, Value expected

I also mentioned this in a comment in #18.

Colors of quotes in Markdown

I'm not sure if this is what @ianpan870102 has in mind for Markdown #2, but the color of a quoted block is quite dark.

Feature: Add support for Semantic Highlighting

The Semantic Highlighting API allows the language server to provide much better syntax highlighting. I want to ask if this is a feature you want to support in this theme.

Here is an overview about Semantic Highlighting.

Add a light theme

I like the text colors from this theme, but prefer light themes. Whether it's part of this extension or a parallel extension, is it possible to add a light version?

Change up workflow to be easier to maintain and grow project

Need to update the workflow - consider using something for templating and color tokens... maybe typescript.

Text that matches currently selected text has very low contrast on light theme

First issue here, been a user of the extension for a while now, awesome job!

Very similar issue as stated in #21, in light theme the contrast in any text that matches the currently highlighted text is barely visible.

Same text in both themes, examples from a .sql file

Selected text in Jupyter Notebooks is not highlighted

Selected text in Jupyter Notebooks is not highlighted, and I am clueless about which text I selected.

Steps to reproduce:

• Open a jupyter notebook
• create a code cell
• type in some code
• select some code either with Shift + arrow keys or mouse

You will see that selected text is not highlighted.

---

🟩 Expected behavior (from a different theme)

(selected text gets highlighted)

⚠️ Actual behavior (this theme)

(selected text doesn't get highlighted)

---

Version: 1.82.2
Commit: abd2f3db4bdb28f9e95536dfa84d8479f1eb312d
Date: 2023-09-14T05:51:20.981Z
Electron: 25.8.1
ElectronBuildId: 23779380
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Linux x64 6.4.6-76060406-generic

Create a brighter variant of the Color Scheme

Need to create a more colorful separation of punctuation (specifically markdown) .

Current limitations are still within VSCode itself for no support of background colors inside of color schemes.

parent of #1
parent of #2
parent of #3
parent of #4

New bracket colors do not match the themes (Solarized Dark)

Hello,

The new bracket colors added to solarized dark as of commit 15ff6e59924a7e6a3072fc23d6693f5f4a3159e6 (5/10/24) are very different to the theme and in my opinion do not match at all. It is very disorienting to see all the whiteish brackets. I personally think these colors should either be changed back to the defaults or more closely aligned to the rest of the theme. If that is not possible, would you be able to provide me with the bracket color scheme that VSCode uses by default for other dark themes? It doesn't seem to be listed in any of the theme files on the VSCode GitHub.

Thanks

Correction to markdown list coloring

This is a follow-up to #1.

Thanks for the update!

I think there's a small typo:
punctuation.definition.list.begin.markdown should actually be beginning.punctuation.definition.list.markdown. Right now there's no effect.

Gray background color on tabs in dark mode

Somehow after the last update I am getting this weird (what looks to be like) default grey background color on the tabs when in dark mode.

---

Here is a portion of my settings.json related to tabs if it helps you in any way.

  "workbench.editor.tabSizingFixedMaxWidth": 100,
  "workbench.editor.tabSizingFixedMinWidth": 100,
  "workbench.editor.pinnedTabsOnSeparateRow": true,
  "workbench.editor.wrapTabs": true,
  "workbench.editor.showTabs": "multiple",
  "workbench.editor.pinnedTabSizing": "shrink",
  "workbench.editor.tabSizing": "shrink",

Edit: This seems to happen only on the Better Solarized Dark version of the theme. Better Selenized Dark does not have this bug.

lua code: parameters are too light

Parameter “msg" above is too light，I don't know how to change it (LOL)

Better Solarized Light – red sidebar issue

Selected text is very low contrast in light theme

Great implementation of the solarized theme, thank you!

Only one issue: selected text highlight is almost invisible while in the light theme, as the highlight colour barely differs from the background colour. In dark theme, selected text highlights as expected.

Jupyter cells are white

When using the untamed workbench (which is something I've wanted for a very long time), Jupyter code cells are also turned white. Hopefully this isn't because they use the sidebar color or something hardcoded like that.