Merge pull request #126 from jschr/themes-section-rework

Themes section re-work
This commit is contained in:
Valerii Iatsko 2018-07-25 16:16:58 +02:00 committed by GitHub
commit bb68fb9893
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 89 additions and 53 deletions

View File

@ -2,9 +2,9 @@
To submit a package to this list, please do the following: To submit a package to this list, please do the following:
1. Find a link to the package you consider is awesome. Use the link from [marketplace.visualstudio.com](https://marketplace.visualstudio.com/) instead of a link from its GitHub repository. 1. Find a link to the package you consider is awesome. Use the link from [marketplace.visualstudio.com](https://marketplace.visualstudio.com/) instead of a link from its GitHub repository.
2. Find the appropriate place for your package. If it belongs to a certain section, put it there. If it doesn't belong to a specific category, you should put it in the `uncategorized` section. Make sure to put your package in the alphabetical odrer. 2. Find the appropriate place for your package. If it belongs to a certain section, put it there. If it doesn't belong to a specific category, you should put it in the `uncategorized` section. Make sure to put your package in the alphabetical odrer.
3. If possible, find a `.gif` animation that displays the functionality of the package. 3. If possible, find a `.gif` animation that displays the functionality of the package.
Submit your package in the specific form: Submit your package in the specific form:
@ -15,6 +15,13 @@ Submit your package in the specific form:
![title of the package](link to the .gif file that explains its functionality) ![title of the package](link to the .gif file that explains its functionality)
``` ```
Failure of complying to these contributing guidelines will result in your pull request being rejected. **Submitting a theme**
1. Submit a link to [vscodethemes](https://vscodethemes.com) if applicable, otherwise use the [marketplace](https://marketplace.visualstudio.com/) link.
2. Add your theme in alphabetical order.
3. Only one theme per publisher (you may change a featured theme).
4. Submit a similar-style screenshot. You may use [this sketch file](./themes/screenshots/awesome-vscode.sketch) with [this template](./themes/theme-template.js) to help (**tip**: line up vscode with the canvas).
Failure to comply to these contributing guidelines will result in your pull request being rejected.
Thank you for your suggestions! Thank you for your suggestions!

113
README.md
View File

@ -96,19 +96,20 @@ A curated list of delightful [Visual Studio Code](https://code.visualstudio.com/
- [Text Marker (Highlighter)](#text-marker-highlighter) - [Text Marker (Highlighter)](#text-marker-highlighter)
- [Vim Mode](#vim-mode) - [Vim Mode](#vim-mode)
- [Themes](#themes) - [Themes](#themes)
- [An Old Hope Theme](#an-old-hope-theme) - [An Old Hope Theme by Dustin Sanders](#an-old-hope-theme-by-dustin-sanders)
- [Atom One Dark Syntax Theme](#atom-one-dark-syntax-theme) - [Ariake Dark by wart](#ariake-dark-by-wart)
- [Atom One Dark Theme](#atom-one-dark-theme) - [Atom One Dark Theme by Mahmoud Ali](#atom-one-dark-theme-by-mahmoud-ali)
- [Atom One Light Theme](#atom-one-light-theme) - [Ayu by teabyii](#ayu-by-teabyii)
- [Ayu](#ayu) - [Captain Sweetheart by ultradracula](#captain-sweetheart-by-ultradracula)
- [Base16 Ocean Kit](#base16-ocean-kit) - [Cobalt2 Theme Official by Wes Bos](#cobalt2-theme-official-by-wes-bos)
- [Cobalt2 by Wes Bos](#cobalt2-theme-official-by-wes-bos) - [Dracula Official by Dracula Theme](#dracula-official-by-dracula-theme)
- [Dracula](#dracula) - [Eva Theme by fisheva](#eva-theme-by-fisheva)
- [Material-theme](#material-theme) - [Github Theme by Thomas Pink](#github-theme-by-thomas-pink)
- [Nord](#nord) - [Material Palenight Theme by whizkydee](#material-palenight-theme-by-whizkydee)
- [Plastic](#plastic) - [Material Theme by Mattia Astorino](#material-theme-by-mattia-astorino)
- [Shades of Purple](#shades-of-purple) - [Plastic by Will Stone](#plastic-by-will-stone)
- [Seti](#seti) - [Nord by arcticicestudio](#nord-by-arcticicestudio)
- [Shades of Purple by Ahmad Awais](#shades-of-purple-by-ahmad-awais)
- [Resources for extension developers](#resources-for-extension-developers) - [Resources for extension developers](#resources-for-extension-developers)
- [Documentation](#documentation) - [Documentation](#documentation)
- [Libraries](#libraries) - [Libraries](#libraries)
@ -233,7 +234,7 @@ Unlike some other editors, VS Code supports IntelliSense, linting, outline out-o
- [Language Support for Java(TM) by Red Hat](https://marketplace.visualstudio.com/items?itemName=redhat.java) - [Language Support for Java(TM) by Red Hat](https://marketplace.visualstudio.com/items?itemName=redhat.java)
- [Debugger for Java](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-debug) - [Debugger for Java](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-debug)
 ![Debugger for Java](https://raw.githubusercontent.com/Microsoft/vscode-java-pack/master/vscode-java-debug.gif) ![Debugger for Java](https://raw.githubusercontent.com/Microsoft/vscode-java-pack/master/vscode-java-debug.gif)
- [Maven for Java](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-maven) - [Maven for Java](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-maven)
- [Lombok](https://marketplace.visualstudio.com/items?itemName=GabrielBB.vscode-lombok) - [Lombok](https://marketplace.visualstudio.com/items?itemName=GabrielBB.vscode-lombok)
@ -640,75 +641,89 @@ If you're feeling brave, there are at least two custom UIs for VS Code:
## Syntax ## Syntax
### [An Old Hope Theme](https://marketplace.visualstudio.com/items?itemName=dustinsanders.an-old-hope-theme-vscode) ### [An Old Hope Theme by Dustin Sanders](https://marketplace.visualstudio.com/items?itemName=dustinsanders.an-old-hope-theme-vscode)
![](https://raw.githubusercontent.com/dustinsanders/an-old-hope-theme-vscode/0d6b1508a2fbf27c86d92da0040a2549b6150552/dark.png) VSCode theme inspired by a galaxy far far away...
### [Ariake Dark Color Theme](https://marketplace.visualstudio.com/items?itemName=wart.ariake-dark) <img src="./themes/screenshots/dustinsanders.an-old-hope-theme-vscode.png" width="600" />
![](https://raw.githubusercontent.com/a-wart/ariake-dark/master/misc/ariake_dark_github.png) ### [Ariake Dark by wart](https://marketplace.visualstudio.com/items?itemName=wart.ariake-dark)
### [Atom One Dark Syntax Theme](https://marketplace.visualstudio.com/items?itemName=andischerer.theme-atom-one-dark) Dark VSCode theme inspired by Japanese traditional colors and the poetry composed 1000 years ago.
![](https://raw.githubusercontent.com/andischerer/vscode-theme-atom-one-dark/master/theme.png) <img src="./themes/screenshots/wart.ariake-dark.png" width="600" />
### [Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark) ### [Atom One Dark Theme by Mahmoud Ali](https://vscodethemes.com/e/akamud.vscode-theme-onedark)
Features full workbench theming One Dark Theme based on Atom.
![](https://raw.githubusercontent.com/akamud/vscode-theme-onedark/master/screenshots/preview.png) <img src="./themes/screenshots/akamud.vscode-theme-onedark.png" width="600" />
### [Atom One Light Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onelight) ### [Ayu by teabyii](https://vscodethemes.com/e/teabyii.ayu)
Features full workbench theming A simple theme with bright colors and comes in three versions — dark, light and mirage for all day long comfortable work.
![](https://raw.githubusercontent.com/akamud/vscode-theme-onelight/master/screenshots/preview.png) <img src="./themes/screenshots/teabyii.ayu.png" width="600" />
### [Ayu](https://marketplace.visualstudio.com/items?itemName=teabyii.ayu) ### [Captain Sweetheart by ultradracula](https://vscodethemes.com/e/ultradracula.captain-sweetheart)
![dark theme](https://user-images.githubusercontent.com/353888/28989654-114a64b6-7977-11e7-9e4e-9190bc2fae5b.png) Tuff but sweet theme.
![mirage theme](https://user-images.githubusercontent.com/353888/28989655-114d577a-7977-11e7-8646-757b1e8541a2.png) <img src="./themes/screenshots/ultradracula.captain-sweetheart.png" width="600" />
### [Base16 Ocean Kit](https://marketplace.visualstudio.com/items?itemName=chipcollier.Theme-OceanKit) ### [Cobalt2 Theme Official by Wes Bos](https://vscodethemes.com/e/wesbos.theme-cobalt2)
![](https://cloud.githubusercontent.com/assets/376065/12876166/98575186-cdfb-11e5-953d-2691ccad3472.png) 🔥 Official theme by Wes Bos.
### [Captain Sweetheart](https://marketplace.visualstudio.com/items?itemName=ultradracula.captain-sweetheart) <img src="./themes/screenshots/wesbos.theme-cobalt2.png" width="600" />
![](https://raw.githubusercontent.com/mashaal/code-captain-sweetheart/master/preview.png) ### [Dracula Official by Dracula Theme](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)
### [Cobalt2 Theme Official by Wes Bos](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) Official Dracula Theme. A dark theme for many editors, shells, and more.
![Cobalt 2](https://raw.githubusercontent.com/wesbos/cobalt2-vscode/cobalt2-updates/images/ss.png) <img src="./themes/screenshots/dracula-theme.theme-dracula.png" width="600" />
### [Dracula](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula) ### [Eva Theme by fisheva](https://vscodethemes.com/e/fisheva.eva-theme)
![Dracula Theme for VS Code](https://camo.githubusercontent.com/d695efd1815607a9056ea5817501adc0a63632ca/68747470733a2f2f64726163756c617468656d652e636f6d2f6173736574732f696d672f73637265656e73686f74732f7673636f64652e706e67) A colorful and semantic coloring code theme.
### [Material-theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) <img src="./themes/screenshots/fisheva.eva-theme.png" width="600" />
![](https://image.ibb.co/mGCtnn/Material_Theme.gif) ### [Github Theme by Thomas Pink](https://vscodethemes.com/e/thomaspink.theme-github)
### [Nord](https://marketplace.visualstudio.com/items?itemName=arcticicestudio.nord-visual-studio-code) GitHub Theme for Visual Studio Code.
![Nord Theme for VS Code](https://raw.githubusercontent.com/arcticicestudio/nord-visual-studio-code/develop/assets/scrot-preview.png) <img src="./themes/screenshots/thomaspink.theme-github.png" width="600" />
### [Plastic](https://marketplace.visualstudio.com/items?itemName=will-stone.plastic) ### [Material Palenight Theme by whizkydee](https://vscodethemes.com/e/whizkydee.material-palenight-theme)
Features full workbench theming An elegant and juicy material-like theme for Visual Studio Code.
![](https://will-stone.github.io/plastic/screenshot-min.png) <img src="./themes/screenshots/whizkydee.material-palenight-theme.png" width="600" />
### [Shades of Purple](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) ### [Material Theme by Mattia Astorino](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)
A professional theme with hand-picked & bold shades of purple 💜 to go along with your VS Code. A custom VS Code theme with style. The most epic theme now for Visual Studio Code.
![](https://dha4w82d62smt.cloudfront.net/items/032R3i0B353Q3a3u2B3F/Screen%20Recording%202018-03-29%20at%2002.07%20AM.gif) <img src="./themes/screenshots/Equinusocio.vsc-material-theme.png" width="600" />
### [Seti](https://marketplace.visualstudio.com/items?itemName=bialikover.theme-seti) ### [Plastic by Will Stone](https://marketplace.visualstudio.com/items?itemName=will-stone.plastic)
![](https://cloud.githubusercontent.com/assets/376065/12876209/0c5c2060-cdfd-11e5-9ff9-f3db152fc7fe.png) A simple theme.
<img src="./themes/screenshots/will-stone.plastic.png" width="600" />
### [Nord by arcticicestudio](https://vscodethemes.com/e/arcticicestudio.nord-visual-studio-code)
An arctic, north-bluish clean and elegant Visual Studio Code theme.
<img src="./themes/screenshots/arcticicestudio.nord-visual-studio-code.png" width="600" />
### [Shades of Purple by Ahmad Awais](https://vscodethemes.com/e/ahmadawais.shades-of-purple)
⚡ A professional theme with hand-picked & bold shades of purple 💜 to go along with your VS Code. A custom VS Code theme with style.
<img src="./themes/screenshots/ahmadawais.shades-of-purple.png" width="600" />
# Resources for extension developers # Resources for extension developers

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

14
themes/theme-template.js Normal file
View File

@ -0,0 +1,14 @@
const btn = document.getElementById('btn')
let count = 0
function render() {
btn.innerText = `Count: ${count}`
}
btn.addEventListener('click', () => {
// Count from 1 to 10.
if (count < 10) {
count += 1
render()
}
})