ClearVision

By NyxIsBad Version 7.0.1 Updated 12/11/2025 2.7M downloads

Highly customizable theme for BetterDiscord (and Powercord).

transparent customizable dark blue

1.8K

Live preview

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

Screenshot

ClearVision-v7-BetterDiscord.theme.css

GitHub

Open source

https://raw.githubusercontent.com/ClearVision/ClearVision-v7/81822515a91db4b821e2573f635e80fec3e763a0/ClearVision-v7-BetterDiscord.theme.css

1/**

2 * @name ClearVision V7 for BetterDiscord

3 * @author ClearVision Team

4 * @version 7.0.1

5 * @description Highly customizable theme for BetterDiscord.

6 * @source https://github.com/ClearVision/ClearVision-v7

7 * @website https://clearvision.github.io

8 * @invite dHaSxn3

9 */

10/* IMPORT CSS */

11@import url("https://clearvision.github.io/ClearVision-v7/main.css");

12@import url("https://clearvision.github.io/ClearVision-v7/betterdiscord.css");

13/* SETTINGS */

14:root {

15 /* ACCENT COLORS */

16 --main-color: #2780e6; /* main accent color (hex, rgb or hsl) [default: #2780e6] */

17 --hover-color: #1e63b3; /* hover accent color (hex, rgb or hsl) [default: #1e63b3] */

18 --success-color: #43b581; /* positive accent color (hex, rgb or hsl) [default: #43b581] */

19 --danger-color: #982929; /* danger accent color (hex, rgb or hsl) [default: #982929] */

20 /* STATUS COLORS */

21 --online-color: #43b581; /* online status color (hex, rgb or hsl) [default: #43b581] */

22 --idle-color: #faa61a; /* idle status color (hex, rgb or hsl) [default: #faa61a] */

23 --dnd-color: #982929; /* dnd status color (hex, rgb or hsl) [default: #982929] */

24 --streaming-color: #593695; /* streaming status color (hex, rgb or hsl) [default: #593695] */

25 --offline-color: #808080; /* offline/invisible status color (hex, rgb or hsl) [default: #808080] */

26 /* APP BACKGROUND */

27 --background-shading-percent: 100%; /* app background shading amount (0 for complete smoothness) [default: 100%] */

  --background-image: url(https://clearvision.github.io/images/sapphire.jpg); /* app background image (link must be HTTPS) [default: url(https://clearvision.github.io/images/sapphire.jpg)]*/

29 --background-position: center; /* app background position [default: center] */

30 --background-size: cover; /* app background size (px) [default: cover] */

31 --background-attachment: fixed; /* app background attachment [default: fixed] */

  --background-filter: saturate(calc(var(--saturation-factor, 1) * 1)); /* app background adjustments (ex: blur, saturation, brightness) (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter) [default: saturate(calc(var(--saturation-factor, 1) * 1))] */

33 /* USER POPOUT BACKGROUND */

  --user-popout-image: var(--background-image); /* user popout background image (link must be HTTPS) (not applied to nitro users) [default: var(--background-image)] */

35 --user-popout-position: var(--background-position); /* user popout position [default: var(--background-position)] */

36 --user-popout-size: var(--background-size); /* user popout size (px) [default: var(--background-size)] */

  --user-popout-attachment: var(--background-attachment); /* user popout background attachment [default: var(--background-attachment)] */

  --user-popout-filter: var(--background-filter); /* user popout background adjustments (ex: blur, saturation, brightness) (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter) [default: var(--background-filter);] */

39 /* USER MODAL BACKGROUND */

  --user-modal-image: var(--background-image); /* user modal background image (link must be HTTPS) (not applied to nitro users) [default: var(--background-image)] */

41 --user-modal-position: var(--background-position); /* user modal position [default: var(--background-position)] */

42 --user-modal-size: var(--background-size); /* user modal size (px) [default: var(--background-size)] */

  --user-modal-attachment: var(--background-attachment); /* user modal background attachment [default: var(--background-attachment)] */

  --user-modal-filter: var(--background-filter); /* user modal background adjustments (ex: blur, saturation, brightness) (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter) [default: var(--background-filter);] */

45 /* HOME ICON */

  --home-icon: url(https://clearvision.github.io/icons/discord.svg); /* home button icon (link must be HTTPS) [default: url(https://clearvision.github.io/icons/discord.svg)]*/

47 --home-size: cover; /* home button icon size (px) [default:cover] */

48 /* FONTS */

  --main-font: ";gg sans";, ";Helvetica Neue";, Helvetica, Arial, sans-serif; /* main font for app (font must be installed) [default: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif] */

  --code-font: Consolas, ";gg mono";, ";Liberation Mono";, Menlo, Courier, monospace; /* font for codeblocks (font must be installed) [default: Consolas, Liberation Mono, Menlo, Courier, monospace] */

51 /* CHANNEL COLORS */

52 --channel-normal: var(--interactive-text-default); /* channel text color [default: var(--interactive-text-default)] */

53 --channel-muted: var(--interactive-muted); /* muted channel text color [default: var(--interactive-muted)] */

  --channel-hover: var(--interactive-text-hover); /* hovered channel text color [default: var(--interactive-text-hover)] */

  --channel-selected: var(--interactive-text-active); /* selected channel text color [default: var(--interactive-text-active)] */

56 --channel-selected-bg: var(--main-color); /* selected channel background [default: var(--main-color)] */

57 --channel-unread: var(--main-color); /* unread channel text color [default: var(--main-color)] */

58 --channel-unread-hover: var(--hover-color); /* unread channel hover color [default: var(--hover-color)] */

59 /* ACCESSIBILITY */

60 --focus-color: var(--main-color); /* outline when pressing TAB key [default: var(--main-color)] */

61}

63/* THEME SPECIFIC SHADING */

64/* LIGHT THEME */

65:is(.theme-light, .theme-dark .theme-light) {

66 --background-shading: rgba(252, 252, 252, 0.3); /* app background shading color [default: rgba(252, 252, 252, 0.3)] */

67 --card-shading: rgba(252, 252, 252, 0.3); /* cards background shading color [default: rgba(252, 252, 252, 0.3)] */

68 --popout-shading: rgba(252, 252, 252, 0.7); /* popouts background shading color [default: rgba(252, 252, 252, 0.7)] */

69 --modal-shading: rgba(252, 252, 252, 0.5); /* modals background shading color [default: rgba(0, 0, 0, 0.6)] */

70 --input-shading: rgba(0, 0, 0, 0.3); /* inputs background shading color [default: rgba(0, 0, 0, 0.6)] */

71 --normal-text: #36363c; /* text color [default: #36363c] */

72 --muted-text: #75757e; /* muted text color [default: #75757e] */

73}

75/* ASH THEME */

76:is(.theme-dark, .theme-light .theme-dark) {

77 --background-shading: rgba(0, 0, 0, 0.4); /* app background shading color [default: rgba(0, 0, 0, 0.4)] */

78 --card-shading: rgba(0, 0, 0, 0.2); /* cards background shading color [default: rgba(0, 0, 0, 0.2)] */

79 --popout-shading: rgba(0, 0, 0, 0.6); /* popouts background shading color [default: rgba(0, 0, 0, 0.6)] */

80 --modal-shading: rgba(0, 0, 0, 0.4); /* modals background shading color [default: rgba(0, 0, 0, 0.4)] */

81 --input-shading: rgba(255, 255, 255, 0.05); /* inputs background shading color [default: rgba(255, 255, 255, 0.05)] */

82 --normal-text: #d8d8db; /* text color [default: #d8d8db] */

83 --muted-text: #aeaeb4; /* muted text color [default: #aeaeb4] */

84}

86/* DARK THEME */

87:is(.theme-darker, .theme-light .theme-darker) {

88 --background-shading: rgba(0, 0, 0, 0.6); /* app background shading color [default: rgba(0, 0, 0, 0.6)] */

89 --card-shading: rgba(0, 0, 0, 0.3); /* cards background shading color [default: rgba(0, 0, 0, 0.3)] */

90 --popout-shading: rgba(0, 0, 0, 0.7); /* popouts background shading color [default: rgba(0, 0, 0, 0.7)] */

91 --modal-shading: rgba(0, 0, 0, 0.5); /* modals background shading color [default: rgba(0, 0, 0, 0.6)] */

92 --input-shading: rgba(255, 255, 255, 0.05); /* inputs background shading color [default: rgba(255, 255, 255, 0.05)] */

93 --normal-text: #fbfbfb; /* text color [default: #fbfbfb] */

94 --muted-text: #94949c; /* muted text color [default: #94949c] */

95}

97/* ONYX THEME */

98:is(.theme-midnight, .theme-light .theme-midnight) {

99 --background-shading: rgba(0, 0, 0, 0.8); /* app background shading color [default: rgba(0, 0, 0, 0.8)] */

100 --card-shading: rgba(0, 0, 0, 0.4); /* cards background shading color [default: rgba(0, 0, 0, 0.4)] */

101 --popout-shading: rgba(0, 0, 0, 0.8); /* popouts background shading color [default: rgba(0, 0, 0, 0.8)] */

102 --modal-shading: rgba(0, 0, 0, 0.6); /* modals background shading color [default: rgba(0, 0, 0, 0.6)] */

103 --input-shading: rgba(255, 255, 255, 0.05); /* inputs background shading color [default: rgba(255, 255, 255, 0.05)] */

104 --normal-text: #dcdcde; /* text color [default: #dcdcde] */

105 --muted-text: #86868e; /* muted text color [default: #86868e] */

106}

107

108/* ADD ADDITIONAL CSS BELOW HERE */

109

/**
 * @name ClearVision V7 for BetterDiscord
 * @author ClearVision Team
 * @version 7.0.1
 * @description Highly customizable theme for BetterDiscord.
 * @source https://github.com/ClearVision/ClearVision-v7
 * @website https://clearvision.github.io
 * @invite dHaSxn3
 */
/* IMPORT CSS */
@import url("https://clearvision.github.io/ClearVision-v7/main.css");
@import url("https://clearvision.github.io/ClearVision-v7/betterdiscord.css");
/* SETTINGS */
:root {
  /* ACCENT COLORS */
  --main-color: #2780e6; /* main accent color (hex, rgb or hsl) [default: #2780e6] */
  --hover-color: #1e63b3; /* hover accent color (hex, rgb or hsl) [default: #1e63b3] */
  --success-color: #43b581; /* positive accent color (hex, rgb or hsl) [default: #43b581] */
  --danger-color: #982929; /* danger accent color (hex, rgb or hsl) [default: #982929] */
  /* STATUS COLORS */
  --online-color: #43b581; /* online status color (hex, rgb or hsl) [default: #43b581] */
  --idle-color: #faa61a; /* idle status color (hex, rgb or hsl) [default: #faa61a] */
  --dnd-color: #982929; /* dnd status color (hex, rgb or hsl) [default: #982929] */
  --streaming-color: #593695; /* streaming status color (hex, rgb or hsl) [default: #593695] */
  --offline-color: #808080; /* offline/invisible status color (hex, rgb or hsl) [default: #808080] */
  /* APP BACKGROUND */
  --background-shading-percent: 100%; /* app background shading amount (0 for complete smoothness) [default: 100%] */
  --background-image: url(https://clearvision.github.io/images/sapphire.jpg); /* app background image (link must be HTTPS) [default: url(https://clearvision.github.io/images/sapphire.jpg)]*/
  --background-position: center; /* app background position [default: center] */
  --background-size: cover; /* app background size (px) [default: cover] */
  --background-attachment: fixed; /* app background attachment [default: fixed] */
  --background-filter: saturate(calc(var(--saturation-factor, 1) * 1)); /* app background adjustments (ex: blur, saturation, brightness) (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter) [default: saturate(calc(var(--saturation-factor, 1) * 1))] */
  /* USER POPOUT BACKGROUND */
  --user-popout-image: var(--background-image); /* user popout background image (link must be HTTPS) (not applied to nitro users) [default: var(--background-image)] */
  --user-popout-position: var(--background-position); /* user popout position [default: var(--background-position)] */
  --user-popout-size: var(--background-size); /* user popout size (px) [default: var(--background-size)] */
  --user-popout-attachment: var(--background-attachment); /* user popout background attachment [default: var(--background-attachment)] */
  --user-popout-filter: var(--background-filter); /* user popout background adjustments (ex: blur, saturation, brightness) (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter) [default: var(--background-filter);] */
  /* USER MODAL BACKGROUND */
  --user-modal-image: var(--background-image); /* user modal background image (link must be HTTPS) (not applied to nitro users) [default: var(--background-image)] */
  --user-modal-position: var(--background-position); /* user modal position [default: var(--background-position)] */
  --user-modal-size: var(--background-size); /* user modal size (px) [default: var(--background-size)] */
  --user-modal-attachment: var(--background-attachment); /* user modal background attachment [default: var(--background-attachment)] */
  --user-modal-filter: var(--background-filter); /* user modal background adjustments (ex: blur, saturation, brightness) (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter) [default: var(--background-filter);] */
  /* HOME ICON */
  --home-icon: url(https://clearvision.github.io/icons/discord.svg); /* home button icon (link must be HTTPS) [default: url(https://clearvision.github.io/icons/discord.svg)]*/
  --home-size: cover; /* home button icon size (px) [default:cover] */
  /* FONTS */
  --main-font: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* main font for app (font must be installed) [default: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif] */
  --code-font: Consolas, "gg mono", "Liberation Mono", Menlo, Courier, monospace; /* font for codeblocks (font must be installed) [default: Consolas, Liberation Mono, Menlo, Courier, monospace] */
  /* CHANNEL COLORS */
  --channel-normal: var(--interactive-text-default); /* channel text color [default: var(--interactive-text-default)] */
  --channel-muted: var(--interactive-muted); /* muted channel text color [default: var(--interactive-muted)] */
  --channel-hover: var(--interactive-text-hover); /* hovered channel text color [default: var(--interactive-text-hover)] */
  --channel-selected: var(--interactive-text-active); /* selected channel text color [default: var(--interactive-text-active)] */
  --channel-selected-bg: var(--main-color); /* selected channel background [default: var(--main-color)] */
  --channel-unread: var(--main-color); /* unread channel text color [default: var(--main-color)] */
  --channel-unread-hover: var(--hover-color); /* unread channel hover color [default: var(--hover-color)] */
  /* ACCESSIBILITY */
  --focus-color: var(--main-color); /* outline when pressing TAB key [default: var(--main-color)] */
}

/* THEME SPECIFIC SHADING */
/* LIGHT THEME */
:is(.theme-light, .theme-dark .theme-light) {
  --background-shading: rgba(252, 252, 252, 0.3); /* app background shading color [default: rgba(252, 252, 252, 0.3)] */
  --card-shading: rgba(252, 252, 252, 0.3); /* cards background shading color [default: rgba(252, 252, 252, 0.3)] */
  --popout-shading: rgba(252, 252, 252, 0.7); /* popouts background shading color [default: rgba(252, 252, 252, 0.7)] */
  --modal-shading: rgba(252, 252, 252, 0.5); /* modals background shading color [default: rgba(0, 0, 0, 0.6)] */
  --input-shading: rgba(0, 0, 0, 0.3); /* inputs background shading color [default: rgba(0, 0, 0, 0.6)] */
  --normal-text: #36363c; /* text color [default: #36363c] */
  --muted-text: #75757e; /* muted text color [default: #75757e] */
}

/* ASH THEME */
:is(.theme-dark, .theme-light .theme-dark) {
  --background-shading: rgba(0, 0, 0, 0.4); /* app background shading color [default: rgba(0, 0, 0, 0.4)] */
  --card-shading: rgba(0, 0, 0, 0.2); /* cards background shading color [default: rgba(0, 0, 0, 0.2)] */
  --popout-shading: rgba(0, 0, 0, 0.6); /* popouts background shading color [default: rgba(0, 0, 0, 0.6)] */
  --modal-shading: rgba(0, 0, 0, 0.4); /* modals background shading color [default: rgba(0, 0, 0, 0.4)] */
  --input-shading: rgba(255, 255, 255, 0.05); /* inputs background shading color [default: rgba(255, 255, 255, 0.05)] */
  --normal-text: #d8d8db; /* text color [default: #d8d8db] */
  --muted-text: #aeaeb4; /* muted text color [default: #aeaeb4] */
}

/* DARK THEME */
:is(.theme-darker, .theme-light .theme-darker) {
  --background-shading: rgba(0, 0, 0, 0.6); /* app background shading color [default: rgba(0, 0, 0, 0.6)] */
  --card-shading: rgba(0, 0, 0, 0.3); /* cards background shading color [default: rgba(0, 0, 0, 0.3)] */
  --popout-shading: rgba(0, 0, 0, 0.7); /* popouts background shading color [default: rgba(0, 0, 0, 0.7)] */
  --modal-shading: rgba(0, 0, 0, 0.5); /* modals background shading color [default: rgba(0, 0, 0, 0.6)] */
  --input-shading: rgba(255, 255, 255, 0.05); /* inputs background shading color [default: rgba(255, 255, 255, 0.05)] */
  --normal-text: #fbfbfb; /* text color [default: #fbfbfb] */
  --muted-text: #94949c; /* muted text color [default: #94949c] */
}

/* ONYX THEME */
:is(.theme-midnight, .theme-light .theme-midnight) {
  --background-shading: rgba(0, 0, 0, 0.8); /* app background shading color [default: rgba(0, 0, 0, 0.8)] */
  --card-shading: rgba(0, 0, 0, 0.4); /* cards background shading color [default: rgba(0, 0, 0, 0.4)] */
  --popout-shading: rgba(0, 0, 0, 0.8); /* popouts background shading color [default: rgba(0, 0, 0, 0.8)] */
  --modal-shading: rgba(0, 0, 0, 0.6); /* modals background shading color [default: rgba(0, 0, 0, 0.6)] */
  --input-shading: rgba(255, 255, 255, 0.05); /* inputs background shading color [default: rgba(255, 255, 255, 0.05)] */
  --normal-text: #dcdcde; /* text color [default: #dcdcde] */
  --muted-text: #86868e; /* muted text color [default: #86868e] */
}

/* ADD ADDITIONAL CSS BELOW HERE */

Actions

Download Source

About

Version: 7.0.1
Downloads: 2,713,041
Added: 02/22/2021
Updated: 12/11/2025
Hash: 6dc847bb-7a59-1206-e7a1-6bb0d876f39e
Source: https://github.com/ClearVision/ClearVision-v7

Author

NyxIsBad GitHub

Live preview

Screenshot

Open source

FiveCord for Windows