Discord Transparent theme

README.md

This sytlesheet is intended to be use in browser only. You may install css style override browser extension to apply the above style.

#Remember to change the URL for background image.

style.css

/**
* @name Better Font
* @author Reinforce II#9963
* @version 0.1.1
* @description Better Chinese font when using English language
*/

body,textarea{
	font-family: Whitney,Microsoft JhengHei,微軟正黑體,Microsoft JhengHei UI,Microsoft YaHei,微軟雅黑,宋体,SimSun,Helvetica Neue,Helvetica,Arial,sans-serif;
    
}
code {
    font-family: Consolas,Andale Mono WT,Andale Mono,Microsoft JhengHei,微軟正黑體,Microsoft JhengHei UI,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;
}

:root {
    --channels-default: #bbbbbb;
    --interactive-active: #ffffff;
}

body {
    background: url("https://cdn.discordapp.com/attachments/610778923713691659/717340229278892052/bg-21.jpg") !important;
    background-position: top!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    background-attachment: fixed!important;
}



/* global */
.categoryWrapper-UZ5YNj, .appMount-3lHmkl, .container-16j22k {
    background: #00000060 !important;
}

/* main body (no title and footer) */
.chat-3bRxxu, .container-1D34oG, .pageWrapper-1PgVDX, #app-mount .wrapper-21YSNc [role=group], .codeRedemptionRedirect-1wVR4b, .paymentPane-3bwJ6A, .paginator-166-09, .message-2qRu38, .footer-1kmXd4, .header-39GIC8, .scroller-2XE8rp, .footer-3rDWdC, .footer-3mqk7D, .scroller-1IIF0A, .nowPlayingColumn-2sl4cE, .folder-21wGz3, .selected-aXhQR6 .layout-2DM8Md, .standardSidebarView-3F1I7i, .ui-tab-bar-separator, .contentRegionScroller-26nc1e, .layer-3QrUeG, .container-1r6BKw.themed-ANHk51, .scroller-1JbKMe, .app-2rEoOp, .scroller-2TZvBN, .wrapper-1Rf91z, .bg-h5JY_x, .container-PNkimc, .messages-3amgkR, .members-1998pB, .channelTextArea-rNsIhG, .panels-j1Uci_, .sidebar-2K8pFh {
    background: transparent !important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    border: none;
}

/* server icon */
.wrapper-3NnKdC, .scroller-1Bvpku {
	background: #00000020 !important;
}

/* middle column */
.privateChannels-1nO12o {
    background: #00000000 !important;
}
/* middle column without search bar, server channel */
.scroller-1JbKMe, .container-PNkimc .scrollerWrap-2lJEkd .scroller-2FKFPG, .container-3w7J-x {
    background: #00000020 !important;
    color: white !important;
}
.containerDefault-1ZnADq {
    color: white !important;
}

/* chat input */
.scrollableContainer-2NUZem {
    background: #00000070 !important;
}

/* message */
.message-2qnXI6 {
    background: #00000050 !important;
    border-radius: 5px !important;
}

/* message - code */
.markup-2BOw-j code {
    background: #80808030 !important;
}

/* active now */
.wrapper-3D2qGf, .container-lRFx4q {
    background: #00000050 !important;
}

/* scrollbar */
.da-scroller::-webkit-scrollbar-track-piece {
    border-color: transparent !important;
    background: #00000000 !important;
}
.da-scroller::-webkit-scrollbar-thumb {
    background-color: #00000070 !important;
}

/* server folder */
.folderIconWrapper-226oVY, .expandedFolderBackground-2sPsd- {
    
}

.circleIconButton-jET_ig, .childWrapper-anI2G9 {
    background-color: #eaeaea20 !important;
}

/* line gradient. useless */
.children-19S4PO:after {
    background: unset !important;
}