From 130712749198b3c4a3a62fe896f08e24ed63d09b Mon Sep 17 00:00:00 2001 From: DooSkagg Date: Thu, 10 Apr 2025 16:22:29 -0400 Subject: [PATCH] Updated to v7 --- ClearVision_v6.theme.css | 187 +++++++++++++++++---------------------- 1 file changed, 79 insertions(+), 108 deletions(-) diff --git a/ClearVision_v6.theme.css b/ClearVision_v6.theme.css index 5bf8670..a54df80 100644 --- a/ClearVision_v6.theme.css +++ b/ClearVision_v6.theme.css @@ -1,121 +1,92 @@ /** - * @name ClearVision + * @name ClearVision V7 for Vencord * @author ClearVision Team - * @version 6.9.0 - * @description Highly customizable theme for BetterDiscord. - * @source https://github.com/ClearVision/ClearVision-v6 + * @version 7.0.0 + * @description Highly customizable theme for Vencord. + * @source https://github.com/ClearVision/ClearVision-v7 * @website https://clearvision.github.io * @invite dHaSxn3 */ - -/* Credits to Zerthox for making the original theme. */ - /* IMPORT CSS */ -@import url(https://clearvision.github.io/ClearVision-v6/main.css); -/* @import url(https://clearvision.github.io/Addons/speech-bubbles.css); */ -@import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/base/Apple.css); - +@import url("https://clearvision.github.io/ClearVision-v7/main.css"); +@import url("https://clearvision.github.io/ClearVision-v7/vencord.css"); +@import url("https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/base/Apple.css"); /* SETTINGS */ :root { - /* ACCENT COLORS */ - --main-color: #8040ff; /* main accent color (hex, rgb or hsl) [default: #2780e6] */ - --hover-color: #40007f; /* hover accent color (hex, rgb or hsl) [default: #1e63b3] */ - --success-color: #43b581; /* success accent color (hex, rgb or hsl) [default: #43b581] */ - --danger-color: #982929; /* danger accent color (hex, rgb or hsl) [default: #982929] */ - --url-color: var(--main-color); /*The color of url links [default: var(--main-color)]*/ + /* ACCENT COLORS */ + --main-color: #8040ff; + --hover-color: #40007f; + --success-color: #43b581; + --danger-color: #982929; + /* STATUS COLORS */ + --online-color: #8040ff; + --idle-color: #8040ff; + --dnd-color: #8040ff; + --streaming-color: #8040ff; + --offline-color: #808080; + /* APP BACKGROUND */ + --background-shading-percent: 0%; + --background-image: rgba(0, 0, 0, 0.4); + --background-attachment: fixed; + --background-filter: saturate(calc(var(--saturation-factor, 1) * 1)); + /* USER POPOUT BACKGROUND */ + --user-popout-image: var(--background-image); + --user-popout-attachment: var(--background-attachment); + --user-popout-filter: var(--background-filter); + /* USER MODAL BACKGROUND */ + --user-modal-image: var(--background-image); + --user-modal-attachment: var(--background-attachment); + --user-modal-filter: var(--background-filter); + /* HOME ICON */ + --home-icon: url(https://i.imgur.com/233d55Y.gif); + /* FONTS */ + --main-font: "JetBrainsMono Nerd Font"; + --code-font: "JetBrainsMono Nerd Font"; +} - /* STATUS COLORS */ - --online-color: #8040ff; /* online status color (hex, rgb or hsl) [default: #43b581] */ - --idle-color: #8040ff; /* idle status color (hex, rgb or hsl) [default: #faa61a] */ - --dnd-color: #8040ff; /* dnd status color (hex, rgb or hsl) [default: #982929] */ - --streaming-color: #8040ff; /* streaming status color (hex, rgb or hsl) [default: #593695] */ - --offline-color: #808080; /* offline/invisible status color (hex, rgb or hsl) [default: #808080] */ +/* THEME SPECIFIC SHADING */ +/* LIGHT THEME */ +:is(.theme-light, .theme-dark .theme-light) { + --background-shading: rgba(252, 252, 252, 0); + --card-shading: rgba(252, 252, 252, 0); + --popout-shading: rgba(252, 252, 252, 0); + --modal-shading: rgba(252, 252, 252, 0); + --input-shading: rgba(0, 0, 0, 0); + --normal-text: #36363c; + --muted-text: #75757e; +} - /* GENERAL */ - --main-font: Arial Black; /* main font for app (font must be installed) [default: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif] */ - --code-font: Consolas, Liberation Mono, Menlo, Courier, monospace; /* font for codeblocks (font must be installed) [default: Consolas, Liberation Mono, Menlo, Courier, monospace] */ - --text-normal: rgb(255, 255, 255); /* color of default discord text */ - --text-muted: rgb(158, 158, 158); /* color of default discord muted text (e.g.text found in input fields before typing).*/ - --channels-width: 220px; /* channel list width (240px for Discord default) [default: 220px] */ - --members-width: 240px; /* member list width [default: 240px] */ +/* ASH THEME */ +:is(.theme-dark, .theme-light .theme-dark) { + --background-shading: rgba(0, 0, 0, 0); + --card-shading: rgba(0, 0, 0, 0); + --popout-shading: rgba(0, 0, 0, 0); + --modal-shading: rgba(0, 0, 0, 0); + --input-shading: rgba(255, 255, 255, 0); + --normal-text: #d8d8db; + --muted-text: #aeaeb4; +} - /* APP BACKGROUND */ - --background-shading: 0%; /* app background shading (0 for complete smoothness) [default: 100%] */ - --background-overlay: rgba(0, 0, 0, 0.7); /* app background overlay color/gradient [default: rgba(0, 0, 0, 0.6)] */ - --background-image: none; /* 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 [default: cover] */ - --background-repeat: no-repeat; /* app background repeat [default: no-repeat] */ - --background-attachment: fixed; /* app background attachment [default: fixed] */ - --background-brightness: 100%; /* app background brightness (< 100% for darken, > 100% for lighten) [default: 100%] */ - --background-contrast: 100%; /* app background contrast [default: 100%] */ - --background-saturation: 100%; /* app background saturation [default: 100%] */ - --background-invert: 0%; /* app background invert (0 - 100%) [default: 0%] */ - --background-grayscale: 0%; /* app background grayscale ( 0 - 100%) [default: 0%] */ - --background-sepia: 0%; /* app background sepia (0 - 100%) [default: 0%] */ - --background-blur: 0px; /* app background blur [default: 0px] */ +/* DARK THEME */ +:is(.theme-darker, .theme-light .theme-darker) { + --background-shading: rgba(0, 0, 0, 0); + --card-shading: rgba(0, 0, 0, 0); + --popout-shading: rgba(0, 0, 0, 0); + --modal-shading: rgba(0, 0, 0, 0); + --input-shading: rgba(255, 255, 255, 0.05); + --normal-text: #fbfbfb; + --muted-text: #94949c; +} - /* HOME BUTTON ICON */ - --home-icon: url(https://i.imgur.com/233d55Y.gif); /* home button icon (link must be HTTPS) [default: url(https://clearvision.github.io/icons/discord.svg)]*/ - --home-position: center; /* home button icon position [default: center] */ - --home-size: 48px; /* home button icon size [default: 40px] */ +/* ONYX THEME */ +:is(.theme-midnight, .theme-light .theme-midnight) { + --background-shading: rgba(0, 0, 0, 0); + --card-shading: rgba(0, 0, 0, 0); + --popout-shading: rgba(0, 0, 0, 0); + --modal-shading: rgba(0, 0, 0, 0); + --input-shading: rgba(255, 255, 255, 0); + --normal-text: #dcdcde; + --muted-text: #86868e; +} - /* CHANNEL COLORS */ - --channel-unread: var(--main-color); /* Unread Server channel color. [default: var(--main-color)] THIS OVERRIDES YOUR MAIN COLOR*/ - --channel-color: rgba(255, 255, 255, 0.75); /*Read Server channel color [default: rgba(255,255,255,0.3);]*/ - --channel-text-selected: #fff; /* Selected channel text color, CV default is #fff */ - --muted-color: rgba(255, 255, 255, 0.3); /*Muted channel color [default: rgba(255,255,255,0.1);]*/ - - /* MODAL BACKDROP */ - --backdrop-overlay: rgba(0, 0, 0, 0.85); /* modal backdrop overlay color/gradient [default: rgba(0, 0, 0, 0.8)] */ - --backdrop-image: var(--background-image); /* modal backdrop image (link must be HTTPS) [default: var(--background-image)] */ - --backdrop-position: var(--background-position); /* modal backdrop position [default: var(--background-position)] */ - --backdrop-size: var(--background-size); /* modal backdrop size [default: var(--background-size)] */ - --backdrop-repeat: var(--background-repeat); /* modal backdrop repeat [default: var(--background-repeat)] */ - --backdrop-attachment: var(--background-attachment); /* modal backdrop attachment [default: var(--background-attachment)] */ - --backdrop-brightness: var(--background-brightness); /* modal backdrop brightness (< 100% for darken, > 100% for lighten) [default: var(--background-brightness)] */ - --backdrop-contrast: var(--background-contrast); /* modal backdrop contrast [default: var(--background-contrast)] */ - --backdrop-saturation: var(--background-saturation); /* modal backdrop saturation [default: var(--background-saturation)] */ - --backdrop-invert: var(--background-invert); /* modal backdrop invert (0 - 100%) [default: var(--background-invert)] */ - --backdrop-grayscale: var(--background-grayscale); /* modal backdrop grayscale ( 0 - 100%) [default: var(--background-grayscale)] */ - --backdrop-sepia: var(--background-sepia); /* modal backdrop sepia (0 - 100%) [default: var(--background-sepia)] */ - --backdrop-blur: var(--background-blur); /* modal backdrop blur [default: var(--background-blur)] */ - - /* USER POPOUT BACKGROUND */ - --user-popout-image: var(--background-image); /* app background image (link must be HTTPS) [default: var(--background-image)] */ - --user-popout-position: var(--background-position); /* user popout background position [default: var(--background-position)] */ - --user-popout-size: var(--background-size); /* user popout background size [default: var(--background-size)] */ - --user-popout-repeat: var(--background-repeat); /* user popout background repeat [default: var(--background-repeat)] */ - --user-popout-attachment: var(--background-attachment); /* user popout background attachment [default: var(--background-attachment)] */ - --user-popout-brightness: var(--background-brightness); /* user popout background brightness (< 100% for darken, > 100% for lighten) [default: var(--background-brightness)] */ - --user-popout-contrast: var(--background-contrast); /* user popout background contrast [default: var(--background-contrast)] */ - --user-popout-saturation: var(--background-saturation); /* user popout background saturation [default: var(--background-saturation)] */ - --user-popout-invert: var(--background-invert); /* user popout background invert (0 - 100%) [default: var(--background-invert)] */ - --user-popout-grayscale: var(--background-grayscale); /* user popout background grayscale (0 - 100%) [default: var(--background-grayscale)] */ - --user-popout-sepia: var(--background-sepia); /* user popout background sepia (0 - 100%) [default: var(--background-sepia)] */ - --user-popout-blur: calc(var(--background-blur) + 3px); /* user popout background blur [default: calc(var(--background-blur) + 3px)] */ - --user-popout-overlay: rgba(0, 0, 0, 0.85); /* user popout overlay color [default: rgba(0, 0, 0, .6)] */ - - /* USER MODAL BACKGROUND */ - --user-modal-image: var(--background-image); /* app background image (link must be HTTPS) [default: var(--background-image)] */ - --user-modal-position: var(--background-position); /* user modal background position [default: var(--background-position)] */ - --user-modal-size: var(--background-size); /* user modal background size [default: var(--background-size)] */ - --user-modal-repeat: var(--background-repeat); /* user modal background repeat [default: var(--background-repeat)] */ - --user-modal-attachment: var(--background-attachment); /* user modal background attachment [default: var(--background-attachment)] */ - --user-modal-brightness: var(--background-brightness); /* user modal background brightness (< 100% for darken, > 100% for lighten) [default: var(--background-brightness)] */ - --user-modal-contrast: var(--background-contrast); /* user modal background contrast [default: var(--background-contrast)] */ - --user-modal-saturation: var(--background-saturation); /* user modal background saturation [default: var(--background-saturation)] */ - --user-modal-invert: var(--background-invert); /* user modal background invert (0 - 100%) [default: var(--background-invert)] */ - --user-modal-grayscale: var(--background-grayscale); /* user modal background grayscale (0 - 100%) [default: var(--background-grayscale)] */ - --user-modal-sepia: var(--background-sepia); /* user modal background sepia (0 - 100%) [default: var(--background-sepia)] */ - --user-modal-blur: calc(var(--background-blur) + 3px); /* user modal background blur [default: calc(var(--background-blur) + 3px)] */ - - /* THEME BD COLORS */ - --bd-blue: var(--main-color); /* betterdiscord main color [default: var(--main-color)] */ - --bd-blue-hover: var(--hover-color); /* betterdiscord hover color [default: var(--hover-color)] */ - --bd-blue-active: var(--hover-color); /* betterdiscord active color [default: var(--hover-color)] */ - - /* Speech Bubbbles */ - /* --bubble-color: #fff; - --bubble-hover-color: #fff: */ -} \ No newline at end of file +/* ADD ADDITIONAL CSS BELOW HERE */