New version: created v3

2026-09-24 01:52:09 +00:00 · 2022-07-23 15:08:47 +02:00
parent eb3bdd5962
commit a2d46e7b94
551 changed files with 103679 additions and 4704 deletions
@@ -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)  
@@ -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)
@@ -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>
@@ -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>
@@ -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 there’s 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 */ })
+    )
+  }
+})