Added vscodium

This commit is contained in:
Kristofers Solo
2022-04-28 21:17:01 +03:00
parent 837a479d82
commit d7dddc39ef
29139 changed files with 250215 additions and 45125 deletions

View File

@@ -0,0 +1,163 @@
# One Dark Pro
## About
[One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) is based on Atom's default One Dark theme, and is one of the most downloaded themes for VS Code. This document will show you how to install the theme on VS Code, and how to develop and contribute to this project.
# screenshot
![ScreenShot](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/normal.png)
![ScreenShot](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/italic.png)
## Install
Using the Extensions menu, search for **'One Dark Pro'**. Don't forget to apply the theme (see below).
## Apply
Press `ctrl(⌘) + k`, then press `ctrl(⌘) + t`, you will see a theme selection interface. Choose **'One Dark Pro'**.
## Develop
If you see any inconsistencies or missing colors, the following guide will show you how to make your own changes. You can submit your improvements as a merge request to this theme.
Clone this repo
```
$ git clone git@github.com:Binaryify/OneDark-Pro.git
```
Then run
```
$ yarn
```
Then use vscode open and press `F5` key
Change the `src/themes/themeData.ts` or `src/themes/data/*` file then reload vscode and you will see the change
You also can use `npm run package` to package extension file, the *.vsic file will be generate, then use vscode install the vsic file
### Principle
VS Code will parse code and specify a scope for each piece of syntax. For example, the scope may be a keyword, a constant, or punctuation. **'themeData.ts'** includes the settings that tell VS Code how to format the text accordingly, using these scopes.
### Common scope list
```
comment
constant
constant.character.escape
constant.language
constant.numeric
declaration.section entity.name.section
declaration.tag
deco.folding
entity.name.function
entity.name.tag
entity.name.type
entity.other.attribute-name
entity.other.inherited-class
invalid
invalid.deprecated.trailing-whitespace
keyword
keyword.control.import
keyword.operator.js
markup.heading
markup.list
markup.quote
meta.embedded
meta.preprocessor
meta.section entity.name.section
meta.tag
storage
storage.type.method
string
string source
string.unquoted
support.class
support.constant
support.function
support.type
support.variable
text source
variable
variable.language
variable.other
variable.parameter
```
### Get code scope
VS Code comes with a built-in tool to easily obtain the scope of a piece of syntax.
Press `ctrl(⌘) + shift + P`, then type `dev`, and choose **"Developer: Inspect TM Scopes"** option.
This will show you the selected token's scope. There are four sections:
- the in-scope piece of syntax
- language, token type, etc.
- the theme rule and shows the foreground color of the token
- the list of scopes for the token
![ScreenShot](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/scope.png)
### Add/Change code color
Now you know the rules for the theme, you simply need the code scope and the hex color you would like. Now edit the **'themeData.ts'** file, add/change code snippet like this:
```js
{
"name": "c++ function",
"scope": "meta.function.c",
"settings": {
"foreground": colorObj['coral']
}
}
```
### Reload
Then press `ctrl(⌘) + shift + P`, type **'reload'** and press `enter`. Once the window has reloaded, you will find the color of the code has changed.
## Tweaks & theming
If you want to play around with new colors, use the setting `workbench.colorCustomizations` to customize the currently selected theme.
For example, you can add this snippet in your "settings.json" file:
```json
"workbench.colorCustomizations":{
"tab.activeBackground": "#282c34",
"activityBar.background": "#282c34",
"sideBar.background": "#282c34"
}
```
or use the setting `editor.tokenColorCustomizations`
```json
"editor.tokenColorCustomizations":{
"[One Dark Pro]": {
"textMateRules": [
{
"scope":["source.python"],
"settings": {
"foreground": "#e06c75"
}
}
]
}
}
```
Please check the official documentation,
[Theme Color Reference](https://code.visualstudio.com/docs/getstarted/theme-color-reference) and
[Theme Color](https://code.visualstudio.com/docs/getstarted/themes) , for more helpful information.
[More info](https://code.visualstudio.com/updates/v1_15#_user-definable-syntax-highlighting-colors)
## Highlight color custom
The colors default
![](/screenshots/color.png)
You can custom the color in VS Code's settings
![](/screenshots/colorCustom.png)
## Contribute
Now you know how to develop the theme, you can fork this repository and send a pull request with your version. The request will be reviewed, and if successful, merged into this theme and published on the VS Code market.
To publish your own theme, please refer to the official documentation: [https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers](https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers)

View File

@@ -0,0 +1,14 @@
<img src='icon.svg' style="height:80px;">
# One Dark Pro
> Atom's iconic One Dark theme for Visual Studio Code
- Atom's iconic One Dark theme, but much better!
- Make your Visual Studio Code sexier!
- Open-source!
[GitHub](https://github.com/Binaryify/OneDark-Pro)
[Get Started](#About)
![color](#ffffff)

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512">
<defs/>
<circle cx="256" cy="256" r="256" fill="#2D323B"/>
<circle cx="256" cy="256" r="24" fill="#CB81DA"/>
<path fill="#CB81DA" fill-rule="evenodd" d="M165 170c4 32 16 72 38 113 21 42 46 76 70 97 12 11 24 18 34 22s18 3 24 0c5-3 10-9 13-18 3-10 3-23 2-38-3-31-14-69-34-109a6 6 0 0111-5c20 41 32 81 35 113 1 16 1 30-3 42-3 11-9 21-19 26s-22 4-34 0c-11-4-24-13-37-24-25-23-51-58-73-100s-35-84-39-118c-2-17-1-32 2-44s9-22 20-27c9-6 21-5 33-1 11 5 24 13 36 24a6 6 0 01-8 9c-11-11-23-18-32-21-10-4-18-4-24-1s-11 10-13 20c-3 10-4 24-2 40z" clip-rule="evenodd"/>
<path fill="#CB81DA" fill-rule="evenodd" d="M100 268c6 7 16 14 29 20a6 6 0 01-5 11c-14-7-25-14-33-23-8-8-12-18-12-29 1-11 7-21 17-29s23-14 39-20c33-10 76-15 124-13 47 2 90 12 121 26 16 7 29 15 38 23 8 9 14 20 13 31 0 10-6 20-14 27-9 8-20 14-34 19a6 6 0 11-5-11c14-5 24-10 31-17 7-6 10-12 10-19 1-6-2-14-10-21-7-8-19-15-34-21-29-13-70-23-117-25-46-2-88 3-119 13-15 5-27 11-35 18-9 6-12 13-13 20 0 6 3 13 9 20z" clip-rule="evenodd"/>
<path fill="#CB81DA" fill-rule="evenodd" d="M189 396c10-3 22-9 35-18a6 6 0 116 10c-13 10-26 16-38 19s-24 2-33-4-14-16-16-29c-2-12-1-28 2-44 8-33 26-73 52-113s56-72 84-92c13-9 27-16 39-19 12-4 24-3 34 3 9 6 14 17 16 29 2 13 1 28-3 44a6 6 0 01-12-2c4-16 5-29 3-40-2-10-5-17-11-21s-14-4-24-2c-10 3-22 9-35 18-26 19-56 50-81 89-26 38-43 77-50 109-3 15-4 29-3 39 2 11 6 18 12 21 5 4 13 5 23 3z" clip-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" contect="OneDark Pro, One Dark Pro, VS Code, vscode, vsc">
<meta name="description" content="One Dark Pro for VS Code">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="referrer" content="never">
<title>One Dark Pro for VS Code</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
</body>
<script>
window.$docsify = {
name: 'One Dark Pro',
repo: 'https://github.com/Binaryify/OneDark-Pro',
coverpage: true
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script>
if (typeof navigator.serviceWorker !== 'undefined') {
navigator.serviceWorker.register('sw.js')
}
</script>
</html>

View File

@@ -0,0 +1,83 @@
/* ===========================================================
* docsify sw.js
* ===========================================================
* Copyright 2016 @huxpro
* Licensed under Apache 2.0
* Register service worker.
* ========================================================== */
const RUNTIME = 'docsify'
const HOSTNAME_WHITELIST = [
self.location.hostname,
'fonts.gstatic.com',
'fonts.googleapis.com',
'unpkg.com'
]
// The Util Function to hack URLs of intercepted requests
const getFixedUrl = (req) => {
var now = Date.now()
var url = new URL(req.url)
// 1. fixed http URL
// Just keep syncing with location.protocol
// fetch(httpURL) belongs to active mixed content.
// And fetch(httpRequest) is not supported yet.
url.protocol = self.location.protocol
// 2. add query for caching-busting.
// Github Pages served with Cache-Control: max-age=600
// max-age on mutable content is error-prone, with SW life of bugs can even extend.
// Until cache mode of Fetch API landed, we have to workaround cache-busting with query string.
// Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190
if (url.hostname === self.location.hostname) {
url.search += (url.search ? '&' : '?') + 'cache-bust=' + now
}
return url.href
}
/**
* @Lifecycle Activate
* New one activated when old isnt being used.
*
* waitUntil(): activating ====> activated
*/
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim())
})
/**
* @Functional Fetch
* All network requests are being intercepted here.
*
* void respondWith(Promise<Response> r)
*/
self.addEventListener('fetch', event => {
// Skip some of cross-origin requests, like those for Google Analytics.
if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) {
// Stale-while-revalidate
// similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale
// Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1
const cached = caches.match(event.request)
const fixedUrl = getFixedUrl(event.request)
const fetched = fetch(fixedUrl, { cache: 'no-store' })
const fetchedCopy = fetched.then(resp => resp.clone())
// Call respondWith() with whatever we get first.
// If the fetch fails (e.g disconnected), wait for the cache.
// If theres nothing in cache, wait for the fetch.
// If neither yields a response, return offline pages.
event.respondWith(
Promise.race([fetched.catch(_ => cached), cached])
.then(resp => resp || fetched)
.catch(_ => { /* eat any errors */ })
)
// Update the cache with the version we fetched (only for ok status)
event.waitUntil(
Promise.all([fetchedCopy, caches.open(RUNTIME)])
.then(([response, cache]) => response.ok && cache.put(event.request, response))
.catch(_ => { /* eat any errors */ })
)
}
})