config-backup/ion-theme.css

/*  a modified clearvision theme  */

/**
 * @name ClearVision
 * @author ClearVision Team
 * @version 6.9.0
 * @description Highly customizable theme for BetterDiscord.
 * @source https://github.com/ClearVision/ClearVision-v6
 * @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://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+NZ:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&family=Kablammo&display=swap');

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

  /* 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] */

  /* GENERAL */
  --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, Liberation Mono, Menlo, Courier, monospace; /* font for codeblocks (font must be installed) [default: Consolas, Liberation Mono, Menlo, Courier, monospace] */
  --text-normal: rgb(220, 221, 222); /* color of default discord text */
  --text-muted: rgb(114, 118, 125); /* 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] */

  /* APP BACKGROUND */
  --background-shading: 100%; /* app background shading (0 for complete smoothness) [default: 100%] */
  --background-overlay: rgba(0, 0, 0, 0.6); /* app background overlay color/gradient [default: rgba(0, 0, 0, 0.6)] */
  /* --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-image: url(https://images8.alphacoders.com/113/1139547.png); /* 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] */

  /* HOME BUTTON 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-position: center; /* home button icon position [default: center] */
  --home-size: 40px; /* home button icon size [default: 40px] */

  /* 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.3); /*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.1); /*Muted channel color  [default: rgba(255,255,255,0.1);]*/

  /* MODAL BACKDROP */
  --backdrop-overlay: rgba(0, 0, 0, 0.8); /* 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.6); /* 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)] */
}


/**
 * @name ION_dark_01
 * @description BWAH!
 * @author ION606
 * @authorId 582170007505731594
 * @version 6.0.0
 * @updateUrl nauruwu
 * @source nauruwu
 * @invite s3Xc2Dy8Y2
 */

/* [role="group"] [class*="username"] {
    color: blue !important;
} */

[class*="messageListItem_d5deea"] span, [class*="textArea"] {
    /* font-family: 'Playwrite NZ' !important; */
    /* size: 10px !important; */
    /* font-size: 13px !important; */
    /* line-height: 10px !important; */
}

[id*="message-username"] [class*="username"] {
    font-family: 'Playwrite NZ' !important;
    font-size: 13px !important;
}

[data-list-item-id*="private-channels-uid"] [class*="name"] {
  font-family: Fantasy;
  font-size: medium;
  color: white !important;
}

[data-list-item-id*="private-channels-uid"] .subText_f9647d {
  font-family: 'Playwrite NZ' !important;
    font-size: 13px !important;
    color: wheat;
}

/* remove the annoying "..." at the end of the "about me" section */
.markup_d6076c .defaultColor_a595eb {
    display: inherit;
}

[class*="channel_c91bad"] {
    font-family: 'Quicksand';
}


[class*="chatContent"] [class*="username"] {
    color: rgb(0, 153, 255); /* removed `!important` because it overwrites colors in servers */
}


.section_ba4d80 .markup_d6076c {
    font-family: "Henny_Penny variant0", Tofu !important;
}


[role="textbox"] {
    /* font-size: 13px; */
}


/* read-all button */
.vc-ranb-button {
    padding: 2px;
    margin: 1px;
    background-color: rgb(0, 90, 194);
}

/* space the sticker menu */
[id="sticker-picker-grid"] [role="row"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
}

[data-id="937079880473014362"] {
    /* PINK NODDERS! */
}

[aria-label="Channels"] li * {
    color: rgba(255, 255, 255, 0.75) !important;
}

[aria-label*="unread"] {
    color: white !important;
}

/* spoiler stuff */
[class*="spoilerMarkdownContent"] {
    background-color: rgba(37, 0, 85, 0.85);
}

[class*="spoilerMarkdownContent"]:hover {
    background-color: rgba(37, 0, 85, 1);
}

/* sidebar */
.custom-theme-background .scroller_fea3ef {
    background: transparent !important;
}

[aria-label="Vencord Toolbox"]:hover {
    color: red;
}

[aria-label*="unread"] {
    color: blue !important;
}

[role="dialog"] {
    /* background: linear-gradient(135deg, #7e5bef, #c084fc); */
    background: linear-gradient(135deg, #4c2889, #7a3fc3);
}

[role="dialog"] [data-text-variant="text-xs/normal"] {
    color: rgb(255, 185, 54);
    text-decoration: underline;
}

[aria-label="Expression Picker"][role="dialog"] {
    background: transparent;
}

[class*="channelTextArea__"] [class*="scrollableContainer__"] {
    background-color: #02573b8c;
}

[aria-label="User area"] {
    background-color: rgba(66, 34, 107, 0.514) !important;
}

[class*="theme-light images-light user-profile-popout"]
[aria-label="Roles"] [class*="role_"] {
    background: linear-gradient(135deg, #0f3d2e, #14532d);
    color: rgb(137, 255, 137) !important;
}

[class*="theme-light images-light user-profile-popout"]
[aria-label="Roles"] [class*="role_"] [data-text-variant] {
    color: white;
}

[aria-label="View Permissions"] {
    background-color: orange;
}

[aria-label="View Permissions"] button {
    color: rgb(159, 249, 252);
}

[aria-label="View Permissions"]:hover {
    background-color: rgb(159, 249, 252);
}

[aria-label="View Permissions"] button:hover {
    color: orange;
}

[aria-label="Add Role"] {
    background-color: green;
    color: white;
}

[aria-label="Add Role"]:hover {
    background-color: rgb(37, 216, 37);
    color: rgb(0, 0, 0);
}

[class*="roleRemoveIcon_"] path {
    fill: rgb(255, 0, 0) !important;
}

[class*="theme-light images-light user-profile-popout"]
[class*="channelTextArea__"] {
    color: black !important;
}

[class*="theme-light images-light user-profile-popout"]
[class*="placeholder__"],
[aria-label="Note"]::placeholder {
    color: rgb(48, 48, 48);
}

[class*="memberSince_"] [aria-label="Discord"] {
    color: rgb(4, 0, 255);
}

[class*="memberSince_"] svg:not([aria-label]) {
    fill: green;
}

[class*="connectedAccountVerifiedIcon"]  {
    fill: red !important;
}

[class*="connectedAccountVerifiedIcon_"] {
    cursor: pointer;
    background: url("data:image/svg+xml;utf8, \
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='gold' fill-rule='evenodd' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/>\
</svg>") center/18px no-repeat;
}

[class*="stackedBars__"] {
    background: linear-gradient(180deg, rgb(0, 83, 104), #02573b8c) !important;
}

[aria-checked="false"] [class*="mentionButton__"][class*="mentionButton__"]:hover *:not(svg) {
    background-color: orange;
}

[aria-checked="false"] [class*="mentionButton__"]:hover {
    color: orange !important;
}

[aria-checked="true"] [class*="mentionButton__"][class*="mentionButton__"]:hover *:not(svg) {
    background-color: rgb(0, 255, 128);
}

[aria-checked="true"] [class*="mentionButton__"]:hover {
    color: rgb(0, 255, 128) !important;
}

/* .custom-theme-background .scroller_fea3ef {
    background: transparent !important;
} */

/* [class*="spoilerContent"] {
    background-color: rgb(23, 3, 112);
    outline: 0.2px darkgray dashed;
} */