{"id":18785410,"url":"https://github.com/swashata/vscode-beautiful-ui","last_synced_at":"2025-04-13T12:33:57.940Z","repository":{"id":50510294,"uuid":"131886005","full_name":"swashata/vscode-beautiful-ui","owner":"swashata","description":"A set of beautiful color themes for VSCode, inspired by Sublime DA UI.","archived":false,"fork":false,"pushed_at":"2020-09-07T18:09:12.000Z","size":24571,"stargazers_count":60,"open_issues_count":11,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T03:41:38.468Z","etag":null,"topics":["color-theme","vscode","vscode-theme"],"latest_commit_sha":null,"homepage":"https://vscbui.rocks/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/swashata.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-02T17:44:04.000Z","updated_at":"2024-08-03T17:51:35.000Z","dependencies_parsed_at":"2022-08-31T18:22:46.191Z","dependency_job_id":null,"html_url":"https://github.com/swashata/vscode-beautiful-ui","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashata%2Fvscode-beautiful-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashata%2Fvscode-beautiful-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashata%2Fvscode-beautiful-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashata%2Fvscode-beautiful-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swashata","download_url":"https://codeload.github.com/swashata/vscode-beautiful-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248714742,"owners_count":21149959,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-theme","vscode","vscode-theme"],"created_at":"2024-11-07T20:46:41.697Z","updated_at":"2025-04-13T12:33:54.742Z","avatar_url":"https://github.com/swashata.png","language":"JavaScript","funding_links":["https://www.paypal.me/voronianski"],"categories":[],"sub_categories":[],"readme":"# VSCode Beautiful UI - Color Themes\n\n[![codecov](https://codecov.io/gh/swashata/vscode-beautiful-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/swashata/vscode-beautiful-ui) [![Build Status](https://travis-ci.org/swashata/vscode-beautiful-ui.svg?branch=master)](https://travis-ci.org/swashata/vscode-beautiful-ui) [![VSCode Version](https://vsmarketplacebadge.apphb.com/version-short/swashata.beautiful-ui.svg)](https://marketplace.visualstudio.com/items?itemName=swashata.beautiful-ui) [![VSCode Install](https://vsmarketplacebadge.apphb.com/installs/swashata.beautiful-ui.svg)](vscode:extension/swashata.beautiful-ui) [![VSCode Rating](https://vsmarketplacebadge.apphb.com/rating-short/swashata.beautiful-ui.svg)](https://marketplace.visualstudio.com/items?itemName=swashata.beautiful-ui#review-details)\n\n--------------------------------------\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://vscbui.rocks/\"\u003e\n\t\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/bui-logo-medium.png\" /\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\nA collection of **32** [VSCode](https://code.visualstudio.com/) themes inspired from\nthe awesome [Sublime DA CS](https://github.com/ihodev/sublime-da-cs).\n\nI am not at all the original author of the color scheme. This project was born\nout of a necessity. I was a user of Sublime Text and Sublime DA UI for a long time.\n\nDue to many reasons (mainly VSCode's intellisense and JS friendliness) I had to\nswitch to VSCode and the only thing I felt missing was the awesome UI engine made\nby [Ihor Oleksandrov](https://github.com/ihodev) and compatible themes.\n\nSo this is my attempt to fill the gap. Personally I've been using Tomorrow Night\ntheme for a long time and I have put effort to port as many themes as possible.\n\n\u003e * I am not original author of any of the color schemes.\n\u003e * Syntax highlighting differs from the DA UI and DA CS, but I have managed to keep as much as possible. Also in some cases I have increased the darkness of colors for light themes.\n\u003e * If you like any color theme, go and ❤️ the original authors.\n\n## Installation\n\nYou can install manually from `git` or use the [vscode extensions marketplace](https://marketplace.visualstudio.com/items?itemName=swashata.beautiful-ui).\n\n### Marketplace Installation\n\nFrom command palette, run\n\n```\next install swashata.beautiful-ui\n```\n\nOr search for `Beautiful UI` in the marketplace and install from there.\n\n### Git Installation\n\n* Go to `~/.vscode/extensions/`\n* Clone the repository.\n```bash\ngit clone git@github.com:swashata/vscode-beautiful-ui.git\n```\n\n### Activation\n\nAfter installation, open/restart vscode and from command palette search for\n`βui -`. You can choose and apply the color theme of your choice.\n\n## Customization\n\nWorkspace colors can be customized by editing `workbench.colorCustomizations`\nuser settings. More information can be found [here](https://code.visualstudio.com/docs/getstarted/theme-color-reference).\n\n## Recommended Settings\n\nFollowing extensions/tools are recommended for the color schemes.\n\n* [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons) - For file icons.\n* [WhiteViz](https://marketplace.visualstudio.com/items?itemName=spywhere.whiteviz) - Sublime like whitespace highlight.\n* [FiraCoda](https://github.com/tonsky/FiraCode) - For an awesome font with ligatures.\n* [Dank Mono](https://dank.sh/) - Awesome font for `40.00£`. This is what I am using right now.\n* [Operator Mono](https://www.typography.com/fonts/operator/styles/) - If you can spend `$200` 😉.\n* [Operator Mono Lig](https://github.com/kiliman/operator-mono-lig) - For creating ligatures for operator mono.\n\nAlso note the recommended user settings.\n\n```json\n{\n\t\"workbench.iconTheme\": \"vscode-icons\",\n\t\"editor.fontFamily\": \"Operator Mono SSM Lig\",\n\t\"editor.lineHeight\": 25,\n\t\"editor.fontLigatures\": true,\n\t\"explorer.decorations.badges\": false,\n\t\"editor.fontSize\": 14,\n\t\"editor.letterSpacing\": 0.5,\n\t\"editor.fontWeight\": \"400\",\n\t\"editor.renderWhitespace\": \"none\",\n\t\"workbench.statusBar.feedback.visible\": false,\n\t\"editor.rulers\": [\n\t\t80,\n\t\t100,\n\t\t120\n\t],\n\t\"whiteviz.maximumLimit\": 500,\n\t\"whiteviz.expandedTabIndicator\": false,\n\t\"editor.occurrencesHighlight\": true,\n\t\"workbench.tree.horizontalScrolling\": true,\n\t\"editor.cursorStyle\": \"line-thin\",\n\t\"editor.showFoldingControls\": \"always\",\n\t\"editor.matchBrackets\": true\n}\n```\n\n## Color Themes\n\nThe following color themes have been ported.\n\n### Color Pack from Chris Kempson\n\n* Original [sources](https://github.com/chriskempson/base16).\n* Licensed under the [MIT License](https://github.com/chriskempson/base16/blob/master/LICENSE.md).\n\n#### Eighties Dark\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/EightiesDark.png\" alt=\"Eighties Dark\" title=\"Eighties Dark\"\u003e\n\u003c/p\u003e\n\n#### Ocean Dark\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/OceanDark.png\" alt=\"Ocean Dark\" title=\"Ocean Dark\"\u003e\n\u003c/p\u003e\n\n#### Ocean Light\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/OceanLight.png\" alt=\"Ocean Light\" title=\"Ocean Light\"\u003e\n\u003c/p\u003e\n\n#### Tomorrow Dark\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/TomorrowNight.png\" alt=\"Tomorrow Dark\" title=\"Tomorrow Dark\"\u003e\n\u003c/p\u003e\n\n#### Tomorrow Subliminal\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/TomorrowSubliminal.png\" alt=\"Tomorrow Subliminal\" title=\"Tomorrow Subliminal\"\u003e\n\u003c/p\u003e\n\n#### Tomorrow Light\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/TomorrowLight.png\" alt=\"Tomorrow Dark\" title=\"Tomorrow Dark\"\u003e\n\u003c/p\u003e\n\n\n### Color Pack from Ethan Schoonover\n\n* Original [sources](http://ethanschoonover.com/solarized).\n* Licensed under the [MIT License](https://github.com/altercation/solarized/blob/master/LICENSE).\n\n#### Solarized Dark\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/SolarizedDark.png\" alt=\"Solarized Dark\" title=\"Solarized Dark\"\u003e\n\u003c/p\u003e\n\n#### Solarized Light\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/SolarizedLight.png\" alt=\"Solarized Light\" title=\"Solarized Light\"\u003e\n\u003c/p\u003e\n\n### Color Pack from Dmitri Voronianski\n\n* Original [sources](https://labs.voronianski.com/oceanic-next-color-scheme/).\n* Licensed under the [MIT License](https://github.com/voronianski/oceanic-next-color-scheme/blob/master/README.md).\n* You can show your appreciation to Dmitri using [PayPal](https://www.paypal.me/voronianski).\n\n#### Oceanic Next\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/OceanicNext.png\" alt=\"OceanicNext\" title=\"OceanicNext\"\u003e\n\u003c/p\u003e\n\n### Color Pack from Wimer Hazenberg\n\n* Original [sources](https://www.monokai.pro/sublime-text/).\n* Monokai \u0026copy; 2017.\n* You can show your appreciation to Wimer via buying [Monokai Pro](https://www.monokai.pro/sublime-text/).\n\n\n#### Monokai Classic\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MonokaiClassic.png\" alt=\"Monokai Classic\" title=\"Monokai Classic\"\u003e\n\u003c/p\u003e\n\n\n#### Monokai Machine\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MonokaiMachine.png\" alt=\"Monokai Machine\" title=\"Monokai Machine\"\u003e\n\u003c/p\u003e\n\n\n#### Monokai Octagon\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MonokaiOctagon.png\" alt=\"Monokai Octagon\" title=\"Monokai Octagon\"\u003e\n\u003c/p\u003e\n\n\n#### Monokai Pro\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MonokaiPro.png\" alt=\"Monokai Pro\" title=\"Monokai Pro\"\u003e\n\u003c/p\u003e\n\n\n#### Monokai Ristretto\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MonokaiRistretto.png\" alt=\"Monokai Ristretto\" title=\"Monokai Ristretto\"\u003e\n\u003c/p\u003e\n\n\n#### Monokai Spectrum\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MonokaiSpectrum.png\" alt=\"Monokai Spectrum\" title=\"Monokai Spectrum\"\u003e\n\u003c/p\u003e\n\n\n### Color Pack from Mattia Astorino\n\n* Original [sources](https://github.com/equinusocio/material-theme).\n* Licensed under the [MIT License](https://github.com/equinusocio/material-theme/blob/master/LICENSE.md).\n* You can show your appreciation to Mattia using [Beerpay](https://beerpay.io/equinusocio/material-theme).\n\n\n#### Material\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/Material.png\" alt=\"Material\" title=\"Material\"\u003e\n\u003c/p\u003e\n\n\n#### Material Darker\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MaterialDarker.png\" alt=\"Material Darker\" title=\"Material Darker\"\u003e\n\u003c/p\u003e\n\n\n#### Material Palenight\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MaterialPalenight.png\" alt=\"Material Palenight\" title=\"Material Palenight\"\u003e\n\u003c/p\u003e\n\n### Color Pack from GitHub Inc.\n\n* Original [sources](https://github.com/atom/one-dark-syntax).\n* Licensed under the [MIT License](https://github.com/atom/one-dark-syntax/blob/master/LICENSE.md).\n\n#### One Dark\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/OneDark.png\" alt=\"One Dark\" title=\"One Dark\"\u003e\n\u003c/p\u003e\n\n#### One Light\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/OneLight.png\" alt=\"One Light\" title=\"One Light\"\u003e\n\u003c/p\u003e\n\n### Color Pack from Jani Nurminen, Colin T.A. Gray, William D. Neumann\n\n* Original [sources](https://github.com/colinta/zenburn).\n* Licensed under the [BSD 2-clause \"Simplified\" License](https://github.com/colinta/zenburn/blob/master/LICENSE).\n\n#### Zenburn\n\n\u003cp\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/Zenburn.png\" alt=\"Zenburn\" title=\"Zenburn\"\u003e\n\u003c/p\u003e\n\n\n### Color Pack from Adam Christiansen, Merrick Christensen, Trevor D. Miller\n\n* Original [sources](https://trevordmiller.com/projects/nova).\n* Licensed under the [MIT License](https://github.com/trevordmiller/nova-colors/blob/master/LICENSE).\n\n\n#### Nova\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/Nova.png\" alt=\"Nova\" title=\"Nova\"\u003e\n\u003c/p\u003e\n\n\n### Color Pack from Arctic Ice Studio\n\n* Original [sources](https://github.com/arcticicestudio/nord).\n* Licensed under the [Apache License](https://github.com/arcticicestudio/nord/blob/develop/LICENSE.md).\n\n\n#### Nord\n\n\u003cp\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/Nord.png\" alt=\"Nord\" title=\"Nord\"\u003e\n\u003c/p\u003e\n\n\n### Color Pack from Chris Thomas\n\n* Original [sources](https://github.com/textmate/themes.tmbundle/blob/master/Themes/Espresso%20Libre.tmTheme).\n* Licensed under the [Permissive License](https://github.com/textmate/themes.tmbundle/blob/master/README.mdown).\n\n\n#### Espresso Libre\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/EspressoLibre.png\" alt=\"Espresso Libre\" title=\"Espresso Libre\"\u003e\n\u003c/p\u003e\n\n\n### Color Pack from Ian Hill\n\n* Original [sources](https://github.com/buymeasoda/soda-theme).\n* Licensed under the [Creative Commons Attribution-ShareAlike 3.0 License](https://creativecommons.org/licenses/by-sa/3.0/).\n\n#### Espresso Soda\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/EspressoSoda.png\" alt=\"Espresso Soda\" title=\"Espresso Soda\"\u003e\n\u003c/p\u003e\n\n\n### Color Pack from Ike Ku\n\n* Original [sources](https://github.com/dempfi/ayu).\n* Licensed under the [MIT License](https://github.com/dempfi/ayu/blob/master/LICENSE).\n\n\n#### Ayu Dark\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/AyuDark.png\" alt=\"Ayu Dark\" title=\"Ayu Dark\"\u003e\n\u003c/p\u003e\n\n\n#### Ayu Light\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/AyuLight.png\" alt=\"Ayu Light\" title=\"Ayu Light\"\u003e\n\u003c/p\u003e\n\n\n#### Ayu Mirage\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/AyuMirage.png\" alt=\"Ayu Mirage\" title=\"Ayu Mirage\"\u003e\n\u003c/p\u003e\n\n### Minimal Color Pack\n\nInspired from Dan Abramov's Subliminal.\n\n* Original [sources](https://github.com/gaearon/subliminal).\n* Licensed under the [MIT License](https://github.com/gaearon/subliminal/blob/master/LICENSE).\n\n#### Minimal Blue\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MinimalBlue.png\" alt=\"Minimal Blue\" title=\"Minimal Blue\"\u003e\n\u003c/p\u003e\n\n#### Minimal Yellow\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MinimalYellow.png\" alt=\"Minimal Yellow\" title=\"Minimal Yellow\"\u003e\n\u003c/p\u003e\n\n#### Minimal Purple\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MinimalPurple.png\" alt=\"Minimal Purple\" title=\"Minimal Purple\"\u003e\n\u003c/p\u003e\n\n#### Minimal Green\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/swashata/vscode-beautiful-ui/master/docs/assets/screenshots/MinimalGreen.png\" alt=\"Minimal Green\" title=\"Minimal Green\"\u003e\n\u003c/p\u003e\n\n## Development\n\n\u003e Help porting popular tmThemes to vscode.\n\nThe development is made easy with some custom scripts. First fork and clone the\nrepo and run\n\n```bash\nyarn install\n```\n\nThis will install all dependencies. Then run\n\n```bash\nyarn start\n```\n\nTo build the themes and watch for file changes. You can press \u003ckbd\u003eF5\u003c/kbd\u003e to\nlaunch VSCode development window where you can preview the themes.\n\nOnce satisfied run\n\n```bash\nyarn build\n```\n\nto finalize the themes and make changes to `package.json` manually.\n\nThen submit a PR.\n\n### Adding a new theme\n\n* Copy `./src/schemes/Template.noop.js` to `./src/schemes/MyTheme.js`.\n* Mark the theme `dark` or `light` and make changes accordingly.\n* Add colors to the config.\n* Import and add the theme in `src/colors.js`.\n* Build and test.\n\n\u003ch1 align=\"center\"\u003e\n👨‍🎨\n\u003c/h1\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswashata%2Fvscode-beautiful-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswashata%2Fvscode-beautiful-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswashata%2Fvscode-beautiful-ui/lists"}