A clean, dark, Discord theme based on Tokyo Night colorscheme.
+A clean, dark, Discord port of the V.S. Code Tokyo Night theme.
--- ## Installation -### BetterDiscord +### [BetterDiscord](https://betterdiscord.app) 1. Download the theme file [here](https://betterdiscord.app/Download?id=439) 2. Place it in the BetterDiscord themes folder -3. Enable Tokyo Night in the themes tab +3. Go to user settings (CTRL + ,) +4. Go to the "BetterDiscord" category and select the "Themes" tab. +5. Enable Tokyo Night in the themes tab -### Replugged -```sh -cd replugged/themes && git clone https://github.com/Dyzean/Tokyo-Night -``` -or [Click This Link](https://replugged.dev/install?url=https://github.com/Dyzean/Tokyo-Night) +### [Vencord](https://vencord.dev) -### Vencord +##### Online Theme Method 1. Go to user settings (CTRL + ,) -2. Go to the "Vencord" category and select the "Themes" tab. +2. Go to the "Vencord" category and select the "Themes" tab, then go to the "Online Themes" section. 3. In the input field under "THEMES" paste the following URL. ``` -https://raw.githubusercontent.com/Dyzean/Tokyo-Night/main/tokyo-night.theme.css +https://raw.githubusercontent.com/Dyzean/Tokyo-Night/main/themes/tokyo-night.theme.css ``` -### Stylus +##### Local Theme Method + +1. Go [here](https://github.com/Dyzean/Tokyo-Night/blob/main/themes/tokyo-night.theme.css) and download the theme file. +2. Place it in the Vencord themes folder +3. Go to user settings (CTRL + ,) +4. Go to the "Vencord" category and select the "Themes" tab, then go to the "Local Themes" section. +5. Enable Tokyo Night in the themes tab + +### Stylus | Extension: [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)/[Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us) > ***Important Note!*** > > ***To be able to customize this theme, please fork using [this link](https://github.com/Dyzean/Tokyo-Night/fork) and follow the instructions in `tokyo-night.user.css` starting at line 12.*** -1. Install the broswer extensions for your repsective browser. - - [Chrome Webstore](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) - - [Firefox Addons](https://addons.mozilla.org/en-US/firefox/addon/styl-us) -2. Once installed, open [this link](https://github.com/Dyzean/Tokyo-Night/blob/main/tokyo-night.user.css) in a new browser tab. This opens the page where you will install this userstyle. -3. Press the `Install Style` button. +1. Open [this link](https://github.com/Dyzean/Tokyo-Night/blob/main/themes/tokyo-night.user.css) in a new browser tab. +2. Press the `Install Style` button. ## Credits diff --git a/powercord_manifest.json b/powercord_manifest.json deleted file mode 100644 index 130cbba..0000000 --- a/powercord_manifest.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "version": "2.0.2", - "name": "Tokyo Night", - "author": "Ashtrath", - "license": "MIT", - "theme": "tokyo-night.theme.css", - "description": "A Clean, Dark Discord Theme Based on Tokyo Night Scheme." -} diff --git a/addons/compact-mode.css b/src/addons/compact-mode.css similarity index 100% rename from addons/compact-mode.css rename to src/addons/compact-mode.css diff --git a/addons/mac-titlebar.css b/src/addons/mac-titlebar.css similarity index 100% rename from addons/mac-titlebar.css rename to src/addons/mac-titlebar.css diff --git a/addons/monospace-fonts.css b/src/addons/monospace-fonts.css similarity index 100% rename from addons/monospace-fonts.css rename to src/addons/monospace-fonts.css diff --git a/addons/revert-rebrand.css b/src/addons/revert-rebrand.css similarity index 100% rename from addons/revert-rebrand.css rename to src/addons/revert-rebrand.css diff --git a/addons/square-avatar.css b/src/addons/square-avatar.css similarity index 100% rename from addons/square-avatar.css rename to src/addons/square-avatar.css diff --git a/addons/syntax-highlight.css b/src/addons/syntax-highlight.css similarity index 100% rename from addons/syntax-highlight.css rename to src/addons/syntax-highlight.css diff --git a/addons/username-background.css b/src/addons/username-background.css similarity index 100% rename from addons/username-background.css rename to src/addons/username-background.css diff --git a/addons/vscode-user-area.css b/src/addons/vscode-user-area.css similarity index 100% rename from addons/vscode-user-area.css rename to src/addons/vscode-user-area.css diff --git a/assets/emoji-dark.png b/src/assets/emoji-dark.png similarity index 100% rename from assets/emoji-dark.png rename to src/assets/emoji-dark.png diff --git a/assets/emoji-light.png b/src/assets/emoji-light.png similarity index 100% rename from assets/emoji-light.png rename to src/assets/emoji-light.png diff --git a/assets/preview.png b/src/assets/preview.png similarity index 100% rename from assets/preview.png rename to src/assets/preview.png diff --git a/main.css b/src/main.css similarity index 99% rename from main.css rename to src/main.css index 5e15ec0..b117214 100644 --- a/main.css +++ b/src/main.css @@ -193,11 +193,11 @@ } .theme-dark .sprite__294b3:not(:hover) { filter: none !important; - background: url("https://dyzean.github.io/Tokyo-Night/assets/emoji-dark.png") center/contain no-repeat !important; + background: url("https://dyzean.github.io/Tokyo-Night/src/assets/emoji-dark.png") center/contain no-repeat !important; } .theme-light .sprite__294b3:not(:hover) { filter: none !important; - background: url("https://dyzean.github.io/Tokyo-Night/assets/emoji-light.png") center/contain no-repeat !important; + background: url("https://dyzean.github.io/Tokyo-Night/src/assets/emoji-light.png") center/contain no-repeat !important; } /* Home Channel */ diff --git a/tokyo-night.theme.css b/themes/tokyo-night.theme.css similarity index 85% rename from tokyo-night.theme.css rename to themes/tokyo-night.theme.css index c4d31e6..464d246 100644 --- a/tokyo-night.theme.css +++ b/themes/tokyo-night.theme.css @@ -1,13 +1,14 @@ /** * @name Tokyo Night - * @description Discord Port of Visual Studio Code Theme * @author Ashtrath - * @version 2.0.2 + * @version 2.1.0 + * @description A Discord port of the V.S. Code "Tokyo Night" theme. + * @source https://github.com/Dyzean/Tokyo-Night/ * @authorId 2354831939099688962 */ /* DONT TOUCH THIS!!! */ -@import url("https://dyzean.github.io/Tokyo-Night/main.css"); +@import url("https://dyzean.github.io/Tokyo-Night/src/main.css"); /* Read this before editing stuff!!! * @@ -20,32 +21,32 @@ */ /* ====== Optional Addons ====== */ -@import url("https://dyzean.github.io/Tokyo-Night/addons/revert-rebrand.css"); +@import url("https://dyzean.github.io/Tokyo-Night/src/addons/revert-rebrand.css"); @import url("https://nyri4.github.io/Discolored/main.css"); /* VSCode User Area, get Visual Studio like user area (Enabled by default) note: this addons doesn't works well with Compact Mode addon, please disable this when using Compact Mode addon */ -@import url("https://dyzean.github.io/Tokyo-Night/addons/vscode-user-area.css"); +@import url("https://dyzean.github.io/Tokyo-Night/src/addons/vscode-user-area.css"); /* Syntax Highlight, get hljs styling with Tokyo Night scheme (Enabled by default) */ -@import url("https://dyzean.github.io/Tokyo-Night/addons/syntax-highlight.css"); +@import url("https://dyzean.github.io/Tokyo-Night/src/addons/syntax-highlight.css"); /* Username Background, get colorful background behind username on chat, works best with Monospace addon. (Disabled by default) */ -/* @import url("https://dyzean.github.io/Tokyo-Night/addons/username-background.css"); */ +/* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/username-background.css"); */ /* Mac Like Titlebar (windows only), get mac style titlebar on windows client (Enabled by default) */ -@import url("https://dyzean.github.io/Tokyo-Night/addons/mac-titlebar.css"); +@import url("https://dyzean.github.io/Tokyo-Night/src/addons/mac-titlebar.css"); /* Compact Mode, hide some UI part on specific windows size, <920px Channel sidebar and member list get hidden, <600px Chat window only. (Disabled by default) */ -/* @import url("https://dyzean.github.io/Tokyo-Night/addons/compact-mode.css"); */ +/* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/compact-mode.css"); */ /* Monospace, use monospaced font (JetBrains Mono) instead the default one (Disabled by default) */ -/* @import url("https://dyzean.github.io/Tokyo-Night/addons/monospace-fonts.css"); */ +/* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/monospace-fonts.css"); */ /* Square Avatar, get square avatar on chat memberlist and user area (Disabled by default) */ -/* @import url("https://dyzean.github.io/Tokyo-Night/addons/square-avatar.css"); */ +/* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/square-avatar.css"); */ /* ==== Discord Variables ==== */ diff --git a/tokyo-night.user.css b/themes/tokyo-night.user.css similarity index 86% rename from tokyo-night.user.css rename to themes/tokyo-night.user.css index e54e7bb..6daf0b4 100644 --- a/tokyo-night.user.css +++ b/themes/tokyo-night.user.css @@ -1,13 +1,13 @@ @-moz-document domain("discord.com") { /* ==UserStyle== @name Tokyo Night - @description Discord Port of Visual Studio Code Theme + @description A Discord port of the V.S. Code "Tokyo Night" theme. @author Ashtrath @namespace https://github.com/Dyzean/Tokyo-Night/ - @version 2.0.2 + @version 2.1.0 ==/UserStyle== */ - @import url("https://dyzean.github.io/Tokyo-Night/main.css");} + @import url("https://dyzean.github.io/Tokyo-Night/src/main.css");} /* Read this before editing stuff!!! * @@ -20,29 +20,29 @@ */ /* ====== Optional Addons ====== */ -@import url("https://dyzean.github.io/Tokyo-Night/addons/revert-rebrand.css"); +@import url("https://dyzean.github.io/Tokyo-Night/src/addons/revert-rebrand.css"); @import url("https://nyri4.github.io/Discolored/main.css"); /* VSCode User Area, get Visual Studio like user area (Enabled by default) note: this addons doesn't works well with Compact Mode addon, please disable this when using Compact Mode addon */ -@import url("https://dyzean.github.io/Tokyo-Night/addons/vscode-user-area.css"); +@import url("https://dyzean.github.io/Tokyo-Night/src/addons/vscode-user-area.css"); /* Syntax Highlight, get hljs styling with Tokyo Night scheme (Enabled by default) */ -@import url("https://dyzean.github.io/Tokyo-Night/addons/syntax-highlight.css"); +@import url("https://dyzean.github.io/Tokyo-Night/src/addons/syntax-highlight.css"); /* Username Background, get colorful background behind username on chat, works best with Monospace addon. (Disabled by default) */ -/* @import url("https://dyzean.github.io/Tokyo-Night/addons/username-background.css"); */ +/* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/username-background.css"); */ /* Compact Mode, hide some UI part on specific windows size, <920px Channel sidebar and member list get hidden, <600px Chat window only. (Disabled by default) */ -/* @import url("https://dyzean.github.io/Tokyo-Night/addons/compact-mode.css"); */ +/* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/compact-mode.css"); */ /* Monospace, use monospaced font (JetBrains Mono) instead the default one (Disabled by default) */ -/* @import url("https://dyzean.github.io/Tokyo-Night/addons/monospace-fonts.css"); */ +/* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/monospace-fonts.css"); */ /* Square Avatar, get square avatar on chat memberlist and user area (Disabled by default) */ -/* @import url("https://dyzean.github.io/Tokyo-Night/addons/square-avatar.css"); */ +/* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/square-avatar.css"); */ /* ==== Discord Variables ==== */