Advertisement
Guest User

BetterDiscord Custom CSS Template

a guest
Mar 21st, 2021
3,458
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.50 KB | None | 0 0
  1. /**
  2. * @name ClearVision
  3. * @author ClearVision Team
  4. * @version 6
  5. * @description Highly customizable theme for BetterDiscord.
  6. * @source https://github.com/ClearVision/ClearVision-v6
  7. * @website https://clearvision.gitlab.io
  8. * @invite 2fKpjAR
  9. */
  10.  
  11. /* Credits to Zerthox for making the original theme. */
  12.  
  13. /* IMPORT CSS */
  14. @import url(https://clearvision.gitlab.io/v6/main.css);
  15.  
  16. /* SETTINGS */
  17. :root {
  18.  
  19. /* ACCENT COLORS */
  20. --main-color: #2780e6; /* main accent color (hex, rgb or hsl) [default: #2780e6] */
  21. --hover-color: #1e63b3; /* hover accent color (hex, rgb or hsl) [default: #1e63b3] */
  22. --success-color: #43b581; /* success accent color (hex, rgb or hsl) [default: #43b581] */
  23. --danger-color: #982929; /* danger accent color (hex, rgb or hsl) [default: #982929] */
  24.  
  25. /* Customization Patch */
  26. --channel-unread: var(--main-color); /* Unread Server channel color. [default: var(--main-color)] THIS OVERRIDES YOUR MAIN COLOR*/
  27. --channel-color: rgba(255,255,255,0.3); /*Read Server channel color [default: rgba(255,255,255,0.3);]*/
  28. --channel-text-selected: #fff; /* Selected channel text color, CV default is #fff */
  29. --muted-color: rgba(255,255,255,0.1); /*Muted channel color [default: rgba(255,255,255,0.1);]*/
  30. --url-color: var(--main-color); /*The color of url links [default: var(--main-color)]*/
  31.  
  32. /* STATUS COLORS */
  33. --online-color: #43b581; /* online status color (hex, rgb or hsl) [default: #43b581] */
  34. --idle-color: #faa61a; /* idle status color (hex, rgb or hsl) [default: #faa61a] */
  35. --dnd-color: #982929; /* dnd status color (hex, rgb or hsl) [default: #982929] */
  36. --streaming-color: #593695; /* streaming status color (hex, rgb or hsl) [default: #593695] */
  37. --offline-color: #808080; /* offline/invisible status color (hex, rgb or hsl) [default: #808080] */
  38.  
  39. /* GENERAL */
  40. --main-font: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; /* main font for app (font must be installed) [default: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif] */
  41. --code-font: Consolas, Liberation Mono, Menlo, Courier, monospace; /* font for codeblocks (font must be installed) [default: Consolas, Liberation Mono, Menlo, Courier, monospace] */
  42. --text-normal: rgb(220, 221, 222); /* color of default discord text */
  43. --text-muted: rgb(114, 118, 125); /* color of default discord muted text (e.g.text found in input fields before typing).*/
  44. --channels-width: 220px; /* channel list width (240px for Discord default) [default: 220px] */
  45. --members-width: 240px; /* member list width [default: 240px] */
  46. --avatar-roundness: 50%; /* avatar roundness (0% for squares, 50% for circles) [default: 50%] */
  47.  
  48. /* APP BACKGROUND */
  49. --background-shading: 100%; /* app background shading (0 for complete smoothness) [default: 100%] */
  50. --background-overlay: rgba(0, 0, 0, 0.6); /* app background overlay color/gradient [default: rgba(0, 0, 0, 0.6)] */
  51. --background-image: url(https://external-preview.redd.it/uyvGSWCp3aYFgVeg8XXncB6wR4_ZumVLetma5MoVupA.png?s=f169e8fe035ed66d1a5f27e9a003b9e39a17b6e7); /* app background image (link must be HTTPS) [default: url(https://clearvision.gitlab.io/images/sapphire.jpg)]*/
  52. --background-position: center; /* app background position [default: center] */
  53. --background-size: cover; /* app background size [default: cover] */
  54. --background-repeat: no-repeat; /* app background repeat [default: no-repeat] */
  55. --background-attachment: fixed; /* app background attachment [default: fixed] */
  56. --background-brightness: 100%; /* app background brightness (< 100% for darken, > 100% for lighten) [default: 100%] */
  57. --background-contrast: 100%; /* app background contrast [default: 100%] */
  58. --background-saturation: 100%; /* app background saturation [default: 100%] */
  59. --background-invert: 0%; /* app background invert (0 - 100%) [default: 0%] */
  60. --background-grayscale: 0%; /* app background grayscale ( 0 - 100%) [default: 0%] */
  61. --background-sepia: 0%; /* app background sepia (0 - 100%) [default: 0%] */
  62. --background-blur: 0px; /* app background blur [default: 0px] */
  63.  
  64. /* HOME BUTTON ICON */
  65. --home-icon: url(https://clearvision.gitlab.io/icons/discord.svg); /* home button icon (link must be HTTPS) [default: url(https://clearvision.gitlab.io/icons/discord.svg)]*/
  66. --home-position: center; /* home button icon position [default: center] */
  67. --home-size: 40px; /* home button icon size [default: 40px] */
  68.  
  69. /* MODAL BACKDROP */
  70. --backdrop-overlay: rgba(0, 0, 0, 0.8); /* modal backdrop overlay color/gradient [default: rgba(0, 0, 0, 0.8)] */
  71. --backdrop-image: var(--background-image); /* modal backdrop image (link must be HTTPS) [default: var(---background-image)] */
  72. --backdrop-position: var(--background-position); /* modal backdrop position [default: var(---background-position)] */
  73. --backdrop-size: var(--background-size); /* modal backdrop size [default: var(---background-size)] */
  74. --backdrop-repeat: var(--background-repeat); /* modal backdrop repeat [default: var(---background-repeat)] */
  75. --backdrop-attachment: var(--background-attachment); /* modal backdrop attachment [default: var(--background-attachment)] */
  76. --backdrop-brightness: var(--background-brightness); /* modal backdrop brightness (< 100% for darken, > 100% for lighten) [default: var(---background-brightness)] */
  77. --backdrop-contrast: var(--background-contrast); /* modal backdrop contrast [default: var(---background-contrast)] */
  78. --backdrop-saturation: var(--background-saturation); /* modal backdrop saturation [default: var(---background-saturation)] */
  79. --backdrop-invert: var(--background-invert); /* modal backdrop invert (0 - 100%) [default: var(---background-invert)] */
  80. --backdrop-grayscale: var(--background-grayscale); /* modal backdrop grayscale ( 0 - 100%) [default: var(---background-grayscale)] */
  81. --backdrop-sepia: var(--background-sepia); /* modal backdrop sepia (0 - 100%) [default: var(---background-sepia)] */
  82. --backdrop-blur: var(--background-blur); /* modal backdrop blur [default: var(--background-blur)] */
  83.  
  84. /* USER POPOUT BACKGROUND */
  85. --user-popout-image: var(--background-image); /* app background image (link must be HTTPS) [default: var(---background-image)] */
  86. --user-popout-position: var(--background-position); /* user popout background position [default: var(---background-position)] */
  87. --user-popout-size: var(--background-size); /* user popout background size [default: var(---background-size)] */
  88. --user-popout-repeat: var(--background-repeat); /* user popout background repeat [default: var(---background-repeat)] */
  89. --user-popout-attachment: var(--background-attachment); /* user popout background attachment [default: var(--background-attachment)] */
  90. --user-popout-brightness: var(--background-brightness); /* user popout background brightness (< 100% for darken, > 100% for lighten) [default: var(---background-brightness)] */
  91. --user-popout-contrast: var(--background-contrast); /* user popout background contrast [default: var(---background-contrast)] */
  92. --user-popout-saturation: var(--background-saturation); /* user popout background saturation [default: var(---background-saturation)] */
  93. --user-popout-invert: var(--background-invert); /* user popout background invert (0 - 100%) [default: var(---background-invert)] */
  94. --user-popout-grayscale: var(--background-grayscale); /* user popout background grayscale (0 - 100%) [default: var(---background-grayscale)] */
  95. --user-popout-sepia: var(--background-sepia); /* user popout background sepia (0 - 100%) [default: var(---background-sepia)] */
  96. --user-popout-blur: calc(var(--background-blur) + 3px); /* user popout background blur [default: calc(var(--background-blur) + 3px)] */
  97.  
  98. /* USER MODAL BACKGROUND */
  99. --user-modal-image: var(--background-image); /* app background image (link must be HTTPS) [default: var(---background-image)] */
  100. --user-modal-position: var(--background-position); /* user modal background position [default: var(---background-position)] */
  101. --user-modal-size: var(--background-size); /* user modal background size [default: var(---background-size)] */
  102. --user-modal-repeat: var(--background-repeat); /* user modal background repeat [default: var(---background-repeat)] */
  103. --user-modal-attachment: var(--background-attachment); /* user modal background attachment [default: var(--background-attachment)] */
  104. --user-modal-brightness: var(--background-brightness); /* user modal background brightness (< 100% for darken, > 100% for lighten) [default: var(---background-brightness)] */
  105. --user-modal-contrast: var(--background-contrast); /* user modal background contrast [default: var(---background-contrast)] */
  106. --user-modal-saturation: var(--background-saturation); /* user modal background saturation [default: var(---background-saturation)] */
  107. --user-modal-invert: var(--background-invert); /* user modal background invert (0 - 100%) [default: var(---background-invert)] */
  108. --user-modal-grayscale: var(--background-grayscale); /* user modal background grayscale (0 - 100%) [default: var(---background-grayscale)] */
  109. --user-modal-sepia: var(--background-sepia); /* user modal background sepia (0 - 100%) [default: var(---background-sepia)] */
  110. --user-modal-blur: calc(var(--background-blur) + 3px); /* user modal background blur [default: calc(var(--background-blur) + 3px)] */
  111.  
  112. /* THEME BD COLORS */
  113. --bd-blue: var(--main-color); /* betterdiscord main color [default: var(--main-color)] */
  114. --bd-blue-hover: var(--hover-color); /* betterdiscord hover color [default: var(--hover-color)] */
  115. --bd-blue-active: var(--hover-color); /* betterdiscord active color [default: var(--hover-color)] */
  116. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement