0 p.

Theme «Solo Leveling (Rain)» for Discord

Theme Solo Leveling (Rain) for Discord
Solo Leveling theme for betterdiscord. Easily changeable.
Solo Leveling (Rain)Solo Leveling (Rain)
Solo Leveling (Rain)

How to install Discord design

  1. Download 48178-solo-leveling-discord-theme.theme.css.
  2. If this is your first time installing a theme: install BetterDiscord
  3. Launch Discord and go to the client settings.
  4. In the "Themes" section, click "Open Theme Folder". This will open an explorer window, where you will need to move the obtained file.
  5. Go back to the client settings and apply the added skin.

Alternatively, you can install by inserting code into the Custom CSS field.

Custom CSS

/**
 * @name Naruto
 * @author Lito_Monster
 * @version 6
 * @description Highly customizable theme for BetterDiscord.
 * @source https://github.com/ClearVision/ClearVision-v6
 * @website https://clearvision.gitlab.io
 * @invite 2fKpjAR
 */

/* Credits to Zerthox for making the original theme. */

/* IMPORT CSS */
@import url(https://clearvision.gitlab.io/v6/main.css);

/*  PLUGINS (optional)  */


/* 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] */
	
	/* Customization Patch */
	--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);]*/
	--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: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; /* main font for app (font must be installed) [default: Whitney, 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:  #696e75b6; /* 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] */
	--avatar-roundness: 50%; /* avatar roundness (0% for squares, 50% for circles) [default: 50%] */


	/* APP BACKGROUND */
	--background-shading: 0%; /* 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://images7.alphacoders.com/109/thumb-1920-1094164.png); /* app background image (link must be HTTPS) [default: url(https://clearvision.gitlab.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://recenthighlights.com/wp-content/uploads/2020/09/Solo-Leveling-Chapter-120.png); /* home button icon (link must be HTTPS) [default: url(https://clearvision.gitlab.io/icons/discord.svg)]*/
	--home-position: center; /* home button icon position [default: center] */
	--home-size: 80px; /* home button icon size [default: 80px] */
	
	/* MODAL BACKDROP */
	--backdrop-overlay: rgba(0, 0, 0, 0.8); /* modal backdrop overlay color/gradient [default: rgba(0, 0, 0, 0.8)] */
	--backdrop-image: url(https://images5.alphacoders.com/106/thumb-1920-1063595.png); /* 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 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)] */
}


.membersWrap-2h-GB4, .membersWrap-2h-GB4 .scroller-2FKFPG {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

/* GROUP HEADER */
.membersGroup-v9BXpm {
    opacity: 0;
    transition: all 500ms;
}

.membersWrap-2h-GB4:hover .membersGroup-v9BXpm {
    transition: all 500ms;
    opacity: 1;
}

/* PRE-HOVER DIV to fix spam-open bugs */

.membersWrap-2h-GB4:before {
    width: 0px;
    content: "";
}
/* PRE HOVER BORDER */
.membersWrap-2h-GB4:before{
    border-left: double #2780e6;
}

/* MOVE THE MEMBERLIST DIV TO THE RIGHT */

.membersWrap-2h-GB4 {
    -webkit-transform: translateX(220px);
    transform: translateX(180px);
    position: absolute;
}

/* MEMBERLIST CONTENT */

.members-1998pB {
    width: 265px;
    overflow: hidden;
    border-radius: .5em 0 0 .5em;
    transition: all 500ms;
    -webkit-transition: all 500ms;
}

/* MEMBERLIST AFTER HOVER */
.membersWrap-2h-GB4:hover .members-1998pB {
    -webkit-transform: translateX(-220px);
    transform: translateX(-220px);
    overflow: auto;
    width: 240px!important;
    transition: all 500ms;
    background: rgba(0,0,0) !important;
    opacity: 1 !important;
    border-left: double var(--main-color);
}


.chatContent-a9vAAp { margin-right: 80px;}

.membersWrap-2h-GB4 .members-1998pB{
  background: rgba(0,0,0,0.3) !important;
}

/*MESSAGE BORDER TOP*/
cozyMessage-3V1Y8y.groupStart-23k01U:not(.systemMessage-1I9LCe){
    border-top: double rgb(0,0,0);
}

/*MOUSE ON HOVER*/
.mouse-mode.full-motion .message-2qnXI6:hover{
  background-color: rgba(43, 38, 42, 0.164)!important; /*Can be a hex, or you can change the rgba*/
}

/*EMOTE AND GIF CONTAINER8/
.contentWrapper-SvZHNd, /*top bar and gif tab*/
.wrapper-1rqM3x .emojiPicker-3PwZFl /*everything else*/{
  background: rgba(39, 128, 230,.2) !important;
}

/*MESSAGE OPTIONS*/
.button-1ZiXG9:hover{
  background: rgba(0, 0, 0, 0) !important;
}

.mention {
    color: #2780e6!important; /* color of mention text, as in @user or #channel or any valid mention */
    background-color: rgb(0,0,0,.3)!important; /* background color of mention text */
}

/* MENTION ANIMATION */
.mentioned-xhSam7:before {visibility: hidden;}
.theme-dark .isMentioned-N-h9aa .mention, .theme-light .isMentioned-N-h9aa .mention:hover,.theme-dark .wrapper-3WhCwL:hover, .theme-dark .wrapper-3WhCwL {
  background: transparent !important;
}
.theme-dark .isMentioned-N-h9aa .mention, .theme-light .isMentioned-N-h9aa .mention,.theme-dark .wrapper-3WhCwL,.theme-dark .wrapper-3WhCwL:hover,.theme-dark .isMentioned-N-h9aa, .theme-dark .isMentioned-N-h9aa {
  color: #0099ff;
  animation: rainbow 3s infinite linear;
}

.theme-dark .mentioned-xhSam7,
.message-2qnXI6.mentioned-xhSam7.selected-2P5D_Z, 
.mouse-mode.full-motion .mentioned-xhSam7:hover {
  border: 2px solid rgba(128, 0, 187, 0);
  animation: fancy 3s infinite linear;
}
.mouse-mode.full-motion .mentioned-xhSam7:hover {
  border: 2px solid rgba(128, 0, 187, 0); 
  animation: fancy 3s infinite linear;
}
.scrollablecontainer-2NUZem {
  color: #00e5ff;
  animation: rainbow 3s infinite linear;
}

/*VIEW PROFILE MODAL*/
.inner-1ilYF7 {
    background-color: rgb(0,0,0,.6)  !important;
}

.userPopout-3XzG_A:before {
    background: url(https://i.imgur.com/tbSu3KH.png) !important;
    position: fixed;
    background-size:cover !important;
    background-repeat: no-repeat !important;

}
Download file

Comments

Cancel