diff --git a/.gitbook.yml b/.gitbook.yml deleted file mode 100644 index afdeba9..0000000 --- a/.gitbook.yml +++ /dev/null @@ -1 +0,0 @@ -root: ./docs diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..39e8c6d --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,35 @@ +# Contributing + +## Installation + +Run the following commands to clone the repository for this theme and install all necessary dependencies. + +```bash +git clone git@github.com:one-dark/vscode-one-dark-theme.git +cd vscode-one-dark-theme +npm install +``` + +## Testing the theme + +To run the theme, open the project in VS Code and run the `Debug: Start Debugging` command. When you start debugging, a new VS Code test instance \(heretofore referred to as the "test instance"\) will be launched with all your extensions disabled and the One Dark theme enabled and selected. The TypeScript compiler will also start in watch mode and compile any changes you make to the theme. After making your changes, run the `Debug: Restart` command to restart the test instance with the changes you made. + +### Live reload using nodemon + +This project is configured to allow live theme reloading using `nodemon`. This will update the theme colors in the test instance to allow you to immediately see how your changes will look without having to restart the test instance. To utilize this feature, run the following command before you start debugging. + +```bash +npm run theme:watch +``` + +## Color Guidelines + +To increase theme consistency, the following colors should be used for all syntax highlighting colors. Editor colors should use this color palette when possible, but the editor colors are not required to strictly follow this color palette. + +| Name | Value | Preview | Name | Value | Preview | +| :--------- | :------- | :-------------------------- | :---------- | :------- | :--------------------------- | +| **chalky** | \#e5c07b | ![](docs/colors/chalky.jpg) | **malibu** | \#61afef | ![](docs/colors/malibu.jpg) | +| **coral** | \#e06c75 | ![](docs/colors/coral.jpg) | **sage** | \#98c379 | ![](docs/colors/sage.jpg) | +| **cyan** | \#56b6c2 | ![](docs/colors/cyan.jpg) | **stone** | \#5c6370 | ![](docs/colors/stone.jpg) | +| **error** | \#f44747 | ![](docs/colors/error.jpg) | **violet** | \#c678dd | ![](docs/colors/violet.jpg) | +| **ivory** | \#abb2bf | ![](docs/colors/ivory.jpg) | **whiskey** | \#d19a66 | ![](docs/colors/whiskey.jpg) | diff --git a/README.md b/README.md index b2b732f..b6adde3 100644 --- a/README.md +++ b/README.md @@ -10,66 +10,29 @@ ![Code example](static/screenshots/code.png) -## Basic Configuration 🔧 +## Configuration This theme comes with several configuration settings to allow you to customize the theme to your preference. We currently support the following settings: -- **Vivid** - Uses the [One Dark Vivid](https://atom.io/themes/one-dark-vivid-syntax) color palette instead of the default color palette. -- **Italic** - When enabled, uses italic font for keywords. Note that some scopes \(i.e. markdown block quotes\) are styled with italic font even when this setting is disabled. -- **Bold** - When enabled, uses bold font for namespace, class, and function names. Note that some scopes \(i.e. markdown headers\) are styled with bold font even when this setting is disabled. +- **Italic** - When enabled, uses italic font for keywords. Note that some scopes \(e.g. markdown block quotes\) are styled with italic font even when this setting is disabled. +- **Bold** - When enabled, uses bold font for namespace, class, and function names. Note that some scopes \(e.g. markdown headers\) are styled with bold font even when this setting is disabled. To access these configuration settings, open the VS Code settings page and search for "One Dark". ![Theme settings](static/screenshots/settings.png) -This theme ships with the italic setting turned on by default and the other settings turned off by default, but you can adjust the settings to any combination you like. After updating the settings, you will be prompted to reload the window to apply the configuration changes. +This theme ships with the italic setting turned on by default and the other settings turned off by default, but you can adjust the settings to any combination you like. -![Theme settings reload prompt](static/screenshots/reload-prompt.png) +## Vivid Variant -## Advanced Configuration 🧰 +In addition to the default color pallette, this theme ships with a vivid variant which uses the [One Dark Vivid](https://atom.io/themes/one-dark-vivid-syntax) pallette. This can be enabled by selecting "One Dark Vivid" from the Color Theme dropdown in your VS Code settings. -VS Code allows users to fully customize themes to their liking. If you wish to adjust the editor colors, use the `workbench.colorCustomizations` setting in your `settings.json` file. An example of this is shown below. +![Vivid setting](static/screenshots/vivid-setting.png) -```json -"workbench.colorCustomizations": { - "tab.activeBackground": "#282c34", - "activityBar.background": "#282c34", - "sideBar.background": "#282c34" -} -``` - -To customize the syntax highlighting, use the `editor.tokenColorCustomizations` setting. An example of this is shown below. - -```json -"editor.tokenColorCustomizations": { - "[One Dark]": { - "textMateRules": [ - { - "scope": ["source.python"], - "settings": { - "foreground": "#e06c75" - } - } - ] - } -} -``` - -For more information, see the official [theme color reference](https://code.visualstudio.com/docs/getstarted/theme-color-reference) or [color theme documentation](https://code.visualstudio.com/docs/getstarted/themes). - -## Further Documentation 📖 - -Check out the [docs](https://one-dark.gitbook.io/vscode) for manual installation instructions, additional screenshots, and contributing guidelines. - -- [Installation](https://one-dark.gitbook.io/vscode/installation) -- [Screenshots](https://one-dark.gitbook.io/vscode/screenshots) -- [Contributing](https://one-dark.gitbook.io/vscode/contributing) - -## Thanks 🙏 +## Thanks - Thanks to [Binaryify](https://github.com/Binaryify) for his work on the theme this project was originally based on. -- Thanks to [VS Code Nebula Theme](https://github.com/eating-coleslaw/vscode-nebula-theme) for being a great example of how to build a VS Code theme using configuration settings. -- Thanks to GitBook for hosting the docs! +- Thanks to [VS Code Nebula Theme](https://github.com/eating-coleslaw/vscode-nebula-theme) for the inspiration for creating a configurable color theme. ## Contributors ✨ diff --git a/docs/.gitbook/assets/2019-10-26_11-41-02 (1).png b/docs/.gitbook/assets/2019-10-26_11-41-02 (1).png deleted file mode 100644 index d2a1a92..0000000 Binary files a/docs/.gitbook/assets/2019-10-26_11-41-02 (1).png and /dev/null differ diff --git a/docs/.gitbook/assets/2019-10-26_11-41-02.png b/docs/.gitbook/assets/2019-10-26_11-41-02.png deleted file mode 100644 index d2a1a92..0000000 Binary files a/docs/.gitbook/assets/2019-10-26_11-41-02.png and /dev/null differ diff --git a/docs/.gitbook/assets/2019-10-26_12-19-19.png b/docs/.gitbook/assets/2019-10-26_12-19-19.png deleted file mode 100644 index 119196a..0000000 Binary files a/docs/.gitbook/assets/2019-10-26_12-19-19.png and /dev/null differ diff --git a/docs/.gitbook/assets/2019-10-26_16-03-34.png b/docs/.gitbook/assets/2019-10-26_16-03-34.png deleted file mode 100644 index a7d8e43..0000000 Binary files a/docs/.gitbook/assets/2019-10-26_16-03-34.png and /dev/null differ diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index b230254..0000000 --- a/docs/README.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -description: One Dark theme for VS Code. ---- - -# Introduction - -## Major Changes from One Dark Pro Italic 🚨 - -This theme is the next generation of the One Dark Pro Italic theme. The old theme had become bloated with years of changes making the scope lists a tangled web of conflicting styles. With this release we have re-created the theme from scratch using low level scopes to apply to as many languages as possible. Because of this, the theme has changed significantly, may vary greatly from previous versions, and may not work in certain languages. - -Additionally, we have moved away from the approach of generating multiple theme \(i.e. One Dark Italic Vivid, One Dark Italic Bold\) in favor of a single theme "One Dark" which can be customized using settings. Search for "One Dark" in the VS Code settings editor to view the available settings for this theme. Not only is this a better user experience, but it also allows for more customization \(i.e. vivid and bold without italics\). - -Finally, this release changes the theme name from "One Dark Pro Italic" to "One Dark Theme" as the theme can now be configured to use or not use italics using the new theme settings. - -We hope you enjoy this new version and we appreciate your patience with any issues that come up as a result of this major overhaul. If you find any issues with this update, please open an issue on our [GitHub repo](https://github.com/one-dark/vscode-one-dark-theme). Thank you all! - -## Thanks 🙏 - -- Thanks to [阿发](https://github.com/Binaryify) for his work on the theme this project was originally based on. -- Thanks to [VS Code Nebula Theme](https://github.com/eating-coleslaw/vscode-nebula-theme) for being a great example of how to build a VS Code theme using configuration settings. diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md deleted file mode 100644 index 78deab8..0000000 --- a/docs/SUMMARY.md +++ /dev/null @@ -1,6 +0,0 @@ -# Table of contents - -- [Introduction](README.md) -- [Installation](installation.md) -- [Screenshots](screenshots.md) -- [Contributing](contributing.md) diff --git a/docs/.gitbook/assets/chalky.jpg b/docs/colors/chalky.jpg similarity index 100% rename from docs/.gitbook/assets/chalky.jpg rename to docs/colors/chalky.jpg diff --git a/docs/.gitbook/assets/coral.jpg b/docs/colors/coral.jpg similarity index 100% rename from docs/.gitbook/assets/coral.jpg rename to docs/colors/coral.jpg diff --git a/docs/.gitbook/assets/cyan.jpg b/docs/colors/cyan.jpg similarity index 100% rename from docs/.gitbook/assets/cyan.jpg rename to docs/colors/cyan.jpg diff --git a/docs/.gitbook/assets/error.jpg b/docs/colors/error.jpg similarity index 100% rename from docs/.gitbook/assets/error.jpg rename to docs/colors/error.jpg diff --git a/docs/.gitbook/assets/ivory.jpg b/docs/colors/ivory.jpg similarity index 100% rename from docs/.gitbook/assets/ivory.jpg rename to docs/colors/ivory.jpg diff --git a/docs/.gitbook/assets/malibu.jpg b/docs/colors/malibu.jpg similarity index 100% rename from docs/.gitbook/assets/malibu.jpg rename to docs/colors/malibu.jpg diff --git a/docs/.gitbook/assets/sage.jpg b/docs/colors/sage.jpg similarity index 100% rename from docs/.gitbook/assets/sage.jpg rename to docs/colors/sage.jpg diff --git a/docs/.gitbook/assets/stone.jpg b/docs/colors/stone.jpg similarity index 100% rename from docs/.gitbook/assets/stone.jpg rename to docs/colors/stone.jpg diff --git a/docs/.gitbook/assets/violet.jpg b/docs/colors/violet.jpg similarity index 100% rename from docs/.gitbook/assets/violet.jpg rename to docs/colors/violet.jpg diff --git a/docs/.gitbook/assets/whiskey.jpg b/docs/colors/whiskey.jpg similarity index 100% rename from docs/.gitbook/assets/whiskey.jpg rename to docs/colors/whiskey.jpg diff --git a/docs/contributing.md b/docs/contributing.md deleted file mode 100644 index a4bc8f8..0000000 --- a/docs/contributing.md +++ /dev/null @@ -1,56 +0,0 @@ -# Contributing - -## Installation - -Run the following commands to clone the repository for this theme and install all necessary dependencies. - -```bash -git clone git@github.com:one-dark/vscode-one-dark-theme.git -cd vscode-one-dark-theme -npm install -``` - -## Testing the Theme - -To run the theme, open the project in VS Code and run the `Debug: Start Debugging` command. When you start debugging, a new VS Code test instance \(heretofore referred to as the "test instance"\) will be launched with all your extensions disabled and the One Dark theme enabled and selected. The TypeScript compiler will also start in watch mode and compile any changes you make to the theme. After making your changes, run the `Debug: Restart` command to restart the test instance with the changes you made. - -### Live reload using nodemon - -This project is configured to allow live theme reloading using `nodemon`. This will update the theme colors in the test instance to allow you to immediately see how your changes will look without having to restart the test instance. To utilize this feature, run the following command before you start debugging. - -```bash -npm run watch:theme -``` - -{% hint style="warning" %} -This method does not respect the theme configuration settings in the VS Code settings file. To simulate different combinations of settings while using live reload, following the instructions below. -{% endhint %} - -Live reload is accomplished by watching for source file changes and regenerating the `one_dark.json` file when changes are made. As mentioned in the warning above, this does not respect the VS Code settings and thus you must manually configure the settings if you want to test different settings combinations while using live reload, change the options in the `scripts/generate-theme.ts` file where the `generateTheme` method is called. Below is an example showing how to generate the theme with the bold and vivid settings turned on and the italic setting turned off. - -```typescript -import { join } from "path"; -import { generateTheme } from "../src/themes"; -import { writeFile } from "../src/utils/file"; - -writeFile( - join(__dirname, "..", "themes", "one-dark.json"), - generateTheme({ - bold: true, - italic: false, - vivid: true, - }) -); -``` - -## Color Guidelines - -To increase theme consistency, the following colors should be used for all syntax highlighting colors. Editor colors should use this color palette when possible, but the editor colors are not required to strictly follow this color palette. - -| Name | Value | Preview | Name | Value | Preview | -| :--------- | :------- | :------------------------------ | :---------- | :------- | :------------------------------- | -| **chalky** | \#e5c07b | ![](.gitbook/assets/chalky.jpg) | **malibu** | \#61afef | ![](.gitbook/assets/malibu.jpg) | -| **coral** | \#e06c75 | ![](.gitbook/assets/coral.jpg) | **sage** | \#98c379 | ![](.gitbook/assets/sage.jpg) | -| **cyan** | \#56b6c2 | ![](.gitbook/assets/cyan.jpg) | **stone** | \#5c6370 | ![](.gitbook/assets/stone.jpg) | -| **error** | \#f44747 | ![](.gitbook/assets/error.jpg) | **violet** | \#c678dd | ![](.gitbook/assets/violet.jpg) | -| **ivory** | \#abb2bf | ![](.gitbook/assets/ivory.jpg) | **whiskey** | \#d19a66 | ![](.gitbook/assets/whiskey.jpg) | diff --git a/docs/installation.md b/docs/installation.md deleted file mode 100644 index b968601..0000000 --- a/docs/installation.md +++ /dev/null @@ -1,23 +0,0 @@ -# Installation - -## Visual Studio Marketplace **\(recommended\)** - -1. Open this theme in the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mskelton.one-dark-theme). -2. Click the **Install** button. -3. When the theme is opened in VS Code, click the **Install** button. -4. When prompted to select a color theme, select **One Dark**. -5. Enjoy the beauty of One Dark! - -## Manual - -To install the plugin manually, use the following steps. - -1. Download the VSIX file for the [latest release](https://github.com/one-dark/vscode-one-dark-theme/releases/latest) on GitHub. -2. Open the extensions sidebar and click the triple dot menu at the top right. -3. Click **Install from VSIX...** \(see screenshot below\). -4. Select the VSIX file you just downloaded. -5. After the prompt notifies you that the theme was installed successfully, run the `Preferences: Color Theme` command from the command palette. -6. Select **One Dark** from the list. -7. Enjoy the beauty of One Dark! - -![](.gitbook/assets/2019-10-26_16-03-34.png) diff --git a/docs/screenshots.md b/docs/screenshots.md deleted file mode 100644 index 9ce39c2..0000000 --- a/docs/screenshots.md +++ /dev/null @@ -1,3 +0,0 @@ -# Screenshots - -Coming soon! diff --git a/static/screenshots/reload-prompt.png b/static/screenshots/reload-prompt.png deleted file mode 100644 index 5b64c43..0000000 Binary files a/static/screenshots/reload-prompt.png and /dev/null differ diff --git a/static/screenshots/settings.png b/static/screenshots/settings.png index b739a75..0bc9f90 100644 Binary files a/static/screenshots/settings.png and b/static/screenshots/settings.png differ diff --git a/static/screenshots/vivid-setting.png b/static/screenshots/vivid-setting.png new file mode 100644 index 0000000..f34a97f Binary files /dev/null and b/static/screenshots/vivid-setting.png differ