Tokyo Night

By Ashtrath Version 2.0.2 Updated 09/26/2022 249.4K downloads

Discord Port of Visual Studio Code Theme

dark light other white customizable

127

Live preview

Full Discord interface with this theme applied — powered by ThemePreview.

Screenshot

tokyo-night.theme.css

GitHub

Open source

https://raw.githubusercontent.com/Dyzean/Tokyo-Night/93e60a52711900a4a4f9cba2faaf6afd705c643c/tokyo-night.theme.css

1/**

2 * @name Tokyo Night

3 * @description Discord Port of Visual Studio Code Theme

4 * @author Ashtrath

5 * @version 2.0.2

6 * @authorId 2354831939099688962

7 */

9/* DONT TOUCH THIS!!! */

10@import url("https://dyzean.github.io/Tokyo-Night/main.css");

12/* Read this before editing stuff!!!

13*

*   > To comment or uncomment a line you need to put those "/" and "*" characters as you can see at the beginning and ending of my comments.

*      (You don't need to put a * at each line like I do, it's just for readability). See more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Comments

16*

*   > You can play with the values and see how it goes, don't delete "px" after the value if you don't have knowledges in CSS.

18*

19* > To change the colors, replace the HEX code with the one you picked here : https://htmlcolorcodes.com

20*/

22/* ====== Optional Addons ====== */

23@import url("https://dyzean.github.io/Tokyo-Night/addons/revert-rebrand.css");

24@import url("https://nyri4.github.io/Discolored/main.css");

26/* VSCode User Area, get Visual Studio like user area (Enabled by default)

27 note: this addons doesn't works well with Compact Mode addon,

28 please disable this when using Compact Mode addon */

29@import url("https://dyzean.github.io/Tokyo-Night/addons/vscode-user-area.css");

31/* Syntax Highlight, get hljs styling with Tokyo Night scheme (Enabled by default) */

32@import url("https://dyzean.github.io/Tokyo-Night/addons/syntax-highlight.css");

/* Username Background, get colorful background behind username on chat, works best with Monospace addon. (Disabled by default) */

35/* @import url("https://dyzean.github.io/Tokyo-Night/addons/username-background.css"); */

37/* Mac Like Titlebar (windows only), get mac style titlebar on windows client (Enabled by default) */

38@import url("https://dyzean.github.io/Tokyo-Night/addons/mac-titlebar.css");

40/* Compact Mode, hide some UI part on specific windows size,

41 <;920px Channel sidebar and member list get hidden, <;600px Chat window only. (Disabled by default) */

42/* @import url("https://dyzean.github.io/Tokyo-Night/addons/compact-mode.css"); */

44/* Monospace, use monospaced font (JetBrains Mono) instead the default one (Disabled by default) */

45/* @import url("https://dyzean.github.io/Tokyo-Night/addons/monospace-fonts.css"); */

47/* Square Avatar, get square avatar on chat memberlist and user area (Disabled by default) */

48/* @import url("https://dyzean.github.io/Tokyo-Night/addons/square-avatar.css"); */

51/* ==== Discord Variables ==== */

52.theme-dark { /* Dark Mode */

54 /* Header Color */

55 --header-primary: var(--text-normal);

56 --header-secondary: var(--text-muted);

58 /* Text Color */

59 --text-normal: #b1bae6;

60 --text-muted: #565f89;

61 --interactive-normal: #5f647e;

62 --interactive-hover: #a2a6c2;

63 --interactive-active: #b5bad1;

64 --interactive-muted: #55576b;

66 /* Background Color */

67 --background-primary: #1a1b26;

68 --background-secondary: #171722;

69 --background-secondary-alt: #13131a;

70 --background-tertiary: #16161e;

71 --background-tertiary-alt: var(--background-secondary-alt);

72 --background-accent: #434461;

73 --background-floating: #161620;

74 --background-modifier-hover: #212331c0;

75 --background-modifier-active: #282a3680;

76 --background-modifier-selected: #24263171;

77 --background-modifier-accent: #1e1e29;

78 --background-mentioned: #252836;

79 --border-mentioned: #474c64;

80 --background-mentioned-hover: #2f3344;

81 --accent-color: #7aa2f7;

83 /* Folder Color */

84 --folder-color: #202332d0;

85 --folder-color-light: #2f3342d0;

87 /* Scrollbars Color */

88 --scrollbar-thin-thumb: transparent;

89 --scrollbar-thin-track: transparent;

90 --scrollbar-auto-thumb: #2b2b46af;

91 --scrollbar-auto-thumb-hover: #27273d85;

92 --scrollba-auto-track: transparent;

93 --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb);

94 --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track);

96 /* Chat Box Color */

97 --channeltextarea-background: var(--background-secondary);

98 --channeltextarea-background-hover: var(--background-tertiary);

100 /* Square avatar addons */

101 --avatar-roundess: 5px;

102

103 /* Mac Titlebar addons */

104 --close-button-color: #e92a2ade;

105 --maximize-button-color: #f7bc1bde;

106 --minimize-button-color: #12db33de;

107}

108

109.theme-light { /* Light Mode */

110

111 /* Header Color */

112 --header-primary: var(--text-normal);

113 --header-secondary: var(--text-muted);

114

115 /* Text Color */

116 --text-normal: #2e3338;

117 --text-muted: #747f8d;

118 --interactive-normal: #4c505e;

119 --interactive-hover: #404350;

120 --interactive-active: #373a44;

121 --interactive-muted: #77797c;

122

123 /* Background Color */

124 --background-primary: #d5d6db;

125 --background-secondary: #cecfd4;

126 --background-secondary-alt: #b6b7bd;

127 --background-tertiary: #c5c6cc;

128 --background-tertiary-alt: #bbbbc2;

129 --background-accent: #9ca3bb;

130 --background-floating: #c2c2c9;

131 --background-mentioned: #c4c7da;

132 --background-modifier-hover: #2c2a2a25;

133 --background-modifier-active: #5a525229;

134 --background-modifier-selected: #555e693d;

135 --background-modifier-accent: #06060714;

136 --border-mentioned: #a9afcf;

137 --background-mentioned-hover: #cfd2e9;

138 --accent-color: #365aaa;

139

140 /* Folder Color */

141 --folder-color: #a7a6a6d0;

142 --folder-color-light: #afafafd0;

143

144 /* Input Box Color */

145 --input-box-bg: #c2c2c7;

146 --input-box-border: #b3b4b8;

147 --input-box-border-focus: #959699;

148

149 /* Scrollbars Color */

150 --scrollbar-thin-thumb: transparent;

151 --scrollbar-thin-track: transparent;

152 --scrollbar-auto-thumb: #a0a0a0af;

153 --scrollbar-auto-thumb-hover: #77777785;

154 --scrollbar-auto-track: transparent;

155 --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb);

156 --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track);

157

158 /* Chat Box Color */

159 --channeltextarea-background: var(--background-secondary);

160 --channeltextarea-background-hover: var(--background-tertiary);

161

162 /* Square avatar addons */

163 --avatar-roundess: 5px;

164

165 /* Mac Titlebar addons */

166 --close-button-color: #e92a2ade;

167 --maximize-button-color: #f7bc1bde;

168 --minimize-button-color: #12db33de;

169 --button-position: row;

170

171}

172

/**
 * @name Tokyo Night
 * @description Discord Port of Visual Studio Code Theme
 * @author Ashtrath
 * @version 2.0.2
 * @authorId 2354831939099688962
 */

/* DONT TOUCH THIS!!! */
@import url("https://dyzean.github.io/Tokyo-Night/main.css");

/*  Read this before editing stuff!!!
*
*   > To comment or uncomment a line you need to put those "/" and "*" characters as you can see at the beginning and ending of my comments.
*      (You don't need to put a * at each line like I do, it's just for readability). See more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Comments
*
*   > You can play with the values and see how it goes, don't delete "px" after the value if you don't have knowledges in CSS.
*
*   > To change the colors, replace the HEX code with the one you picked here : https://htmlcolorcodes.com
*/

/* ====== Optional Addons ====== */
@import url("https://dyzean.github.io/Tokyo-Night/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");

/* Syntax Highlight, get hljs styling with Tokyo Night scheme (Enabled by default) */
@import url("https://dyzean.github.io/Tokyo-Night/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"); */

/* 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");

/* 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"); */

/* 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"); */

/* 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"); */


/* ==== Discord Variables ==== */
.theme-dark { /* Dark Mode */

  /*  Header Color  */
  --header-primary: var(--text-normal);
  --header-secondary: var(--text-muted);

  /*  Text Color  */
  --text-normal: #b1bae6;
  --text-muted: #565f89;
  --interactive-normal: #5f647e;
  --interactive-hover: #a2a6c2;
  --interactive-active: #b5bad1;
  --interactive-muted: #55576b;

  /* Background Color */
  --background-primary: #1a1b26;
  --background-secondary: #171722;
  --background-secondary-alt: #13131a;
  --background-tertiary: #16161e;
  --background-tertiary-alt: var(--background-secondary-alt);
  --background-accent: #434461;
  --background-floating: #161620;
  --background-modifier-hover: #212331c0;
  --background-modifier-active: #282a3680;
  --background-modifier-selected: #24263171;
  --background-modifier-accent: #1e1e29;
  --background-mentioned: #252836;
  --border-mentioned: #474c64;
  --background-mentioned-hover: #2f3344;
  --accent-color: #7aa2f7;

  /* Folder Color */
  --folder-color: #202332d0;
  --folder-color-light: #2f3342d0;

  /* Scrollbars Color */
  --scrollbar-thin-thumb: transparent;
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: #2b2b46af;
  --scrollbar-auto-thumb-hover: #27273d85;
  --scrollba-auto-track: transparent;
  --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb);
  --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track);

  /* Chat Box Color */
  --channeltextarea-background: var(--background-secondary);
  --channeltextarea-background-hover: var(--background-tertiary);

	/* Square avatar addons */
	--avatar-roundess: 5px;

  /* Mac Titlebar addons */
  --close-button-color: #e92a2ade;
  --maximize-button-color: #f7bc1bde;
  --minimize-button-color: #12db33de;
}

.theme-light { /* Light Mode */

  /*  Header Color  */
  --header-primary: var(--text-normal);
  --header-secondary: var(--text-muted);

  /* Text Color */
  --text-normal: #2e3338;
  --text-muted: #747f8d;
  --interactive-normal: #4c505e;
  --interactive-hover: #404350;
  --interactive-active: #373a44;
  --interactive-muted: #77797c;

  /* Background Color */
  --background-primary: #d5d6db;
  --background-secondary: #cecfd4;
  --background-secondary-alt: #b6b7bd;
  --background-tertiary: #c5c6cc;
  --background-tertiary-alt: #bbbbc2;
  --background-accent: #9ca3bb;
  --background-floating: #c2c2c9;
  --background-mentioned: #c4c7da;
  --background-modifier-hover: #2c2a2a25;
  --background-modifier-active: #5a525229;
  --background-modifier-selected: #555e693d;
  --background-modifier-accent: #06060714;
  --border-mentioned: #a9afcf;
  --background-mentioned-hover: #cfd2e9;
  --accent-color: #365aaa;

  /* Folder Color */
  --folder-color: #a7a6a6d0;
  --folder-color-light: #afafafd0;

  /* Input Box Color */
  --input-box-bg: #c2c2c7;
  --input-box-border: #b3b4b8;
  --input-box-border-focus: #959699;

  /* Scrollbars Color */
  --scrollbar-thin-thumb: transparent;
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: #a0a0a0af;
  --scrollbar-auto-thumb-hover: #77777785;
  --scrollbar-auto-track: transparent;
  --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb);
  --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track);

  /* Chat Box Color */
  --channeltextarea-background: var(--background-secondary);
  --channeltextarea-background-hover: var(--background-tertiary);

  /* Square avatar addons */
	--avatar-roundess: 5px;

  /* Mac Titlebar addons */
  --close-button-color: #e92a2ade;
  --maximize-button-color: #f7bc1bde;
  --minimize-button-color: #12db33de;
  --button-position: row;

}

Actions

Download Source

About

Version: 2.0.2
Downloads: 249,398
Added: 08/10/2021
Updated: 09/26/2022
Hash: 69455c2d-3fa0-7fa7-f20d-fc24409773ad
Source: https://github.com/Dyzean/Tokyo-Night

Author

Ashtrath GitHub

Live preview

Screenshot

Open source

FiveCord for Windows