trongthanh / vscode-boxythemekit Goto Github PK

View Code? Open in Web Editor NEW

6.0 4.0 6.0 1.39 MB

My port of Sublime Boxy Themes to VSCode

Home Page: https://marketplace.visualstudio.com/items?itemName=trongthanh.theme-boxythemekit

License: MIT License

JavaScript 100.00%

vscode-theme vscode tomorrow-night monokai-color-scheme ocean-theme solarized-color-schemes

vscode-boxythemekit's Introduction

Boxy Theme Kit for Visual Studio Code

A set of color themes based on Sublime's Boxy Theme by Ihor Oleksandrov.

I have ported these theme files to VSCode's theme format and published to VSCode Marketplace. The Boxy Ocean Light was created by me (@trongthanh) by tweaking the colors from Boxy Ocean.

My current themes, Boxy Ocean dimmed (for dark mode) and Boxy Ocean Light (light mode) are getting extra work bench customizations and syntax color tweaks.

For other themes, please feel free to send PR (please respect the original theme, just fix the coloring issues), I'll publish changes as soon as possible.

Preview screenshot below: ⬇

Additional customizations:

Here are my recommendations to set in the user's settings. Since these are personal preferences, I won't set this permanently in theme files.

Smaller workbench font size

This will make workbench text smaller to make it less distracted, more room to display contents and easier to distinguish between workbench's and editor's texts.

{
	"window.zoomLevel": -0.5,
	"editor.fontSize": 16,
	"terminal.integrated.fontSize": 16,
	"workbench.tree.indent": 16,
}

Override theme's workbench customization

There are workbench customizations mostly based on contributors' preferences. Some may not like it. Luckily, VSCode allows us to override the workbench theme with user's settings. Here's the default workbench theme re-defined as user settings to reset the theme's workbench customization.

{
	"workbench.colorCustomizations": {
		"activityBar.background": "#333333",
		"activityBar.foreground": "#cccccc",
		"activityBarBadge.background": "#007acc",
		"editor.background": "#1E1E1E",
		"editor.foreground": "#D4D4D4",
		"editor.inactiveSelectionBackground": "#3A3D41",
		"editor.selectionHighlightBackground": "#ADD6FF26",
		"editorIndentGuide.background": "#404040",
		"list.dropBackground": "#383B3D",
		"list.hoverBackground": "#2a2d2d",
		"sideBar.background": "#252525",
		"sideBarTitle.foreground": "#BBBBBB",
		"tab.inactiveBackground": "#2d2d2d"
	}
}

Boxy Monokai

Boxy Nova

Boxy Ocean

Has custom workbench theming. Thanks @dganoff.

Boxy Ocean (dimmed bg)

Has custom workbench
Editor's background is dimmed to improve contrast and make text easier to read for long period.

Boxy Ocean Light [NEW]

Has custom workbench
This is the light theme created by me by tweaking colors from Boxy Ocean
Can be used with Boxy Ocean (dimmed bg) for day and night shifts.

Boxy Solarized Dark

Has custom workbench theming. Thanks @prog-rajkamal.

Boxy Solarized Light

Boxy Tomorrow

This theme is based on the original Tomorrow Night theme with better syntax coloring for HTML, XML, Markdown, JSON, etc.
The comment doc tags were dimmed to avoid clutter.

Boxy Yesterday

MIT License

vscode-boxythemekit's People

Contributors

Stargazers

Watchers

Forkers

bluetidepro xuxin6063652 hjcalderon10 a-legrand forivall parachutel

vscode-boxythemekit's Issues

Sidebar coloring

I just recently switched to using VS Code from Sublime, and wanted to continue to use Boxy with VS Code.

In the Sublime version, https://github.com/ihodev/sublime-boxy, their theme extends to the sidebar. Is that something you are planning to add for this VS Code port?

It doesn't support Operator fonts.

How can I tweak this theme to make it support Operator fonts?

My Tomorrow theme mod if you like it.

Hi,

Thanks for having ported this theme to VS Code.

When I used it for Sublime, I tweaked the Tomorrow theme because it was my favorite too.

Here is the version for VS Code. Feel free to add it to your package as a mod, change its name, edit it, etc.

Mainly, for VS Code it only manages to change the color for: caret (yellow) and selection (blue).

Incorrect hightliting

When putting some code below a "content_for :javascripts" block, even though the code is outside the blocks scope, it seems to affect the highlighting. If I comment out the content_for block, the highlighting shows as expected.

HTML Color

I am working with Angular 2.

I detected a problem in the Boxy yesterday HTML colors. When I write "&&" the color is white but the background is also white. So It appears be nothing.

Wrong Highlighting in PHP

Left sublime right vscode

notice the TypeHints and the \DB:: they should be the same color as the use declarations

1.73 update breaks highlighting (react/tsx)

Bracket pair colorization highlighting colors

After a lot of fine tuning and tweaking to get colors that are distinct from tomorrow's builtin bracket color, i've settled on these colors for bracket pair colorization settings:

      "editorBracketHighlight.foreground1": "#8abeb7", // tomorrow default curly color
      "editorBracketHighlight.foreground2": "#74e0d2", // saturated
      "editorBracketHighlight.foreground3": "#8cca99", // desaturated green
      "editorBracketHighlight.foreground4": "#7fc9ee", // saturated + blue
      "editorBracketHighlight.foreground5": "#b0cdc8", // lightened (50/50 mix between plain text color and curly color)
      "editorBracketHighlight.foreground6": "#63d47b", // saturated + green

Similar tweaks can be made by adjusting the HSL of the bracket colors of the other themes in the same direction, or you can just publish this one (since tomorrow is, i think, the main theme of this kit). If you manually tweak the other themes in the same manner, I find that alternating between saturated and desaturated works the best.

What font did you use on the screenshots ?

I want to know what font did you use in the screenshots, looks very very nice with the theme

VS Code Update 1.65.2 breaks some highlighting

After today's update it looks like class names are being rendered in white