Discord Lantern Theme by kyleslanternthemes

Mirrored from https://raw.githubusercontent.com/Gitleptune/lantern-theme/main/src/discord/discord-lantern-theme.user.css

Discord Lantern Theme screenshot
Install Get Stylus Write a review

Details

Authorkyleslanternthemes

LicenseGNU General Public License

Created atApril 02, 2021 18:44

Updated atAugust 27, 2021 23:30

Applies todiscord

Statistics

Learn how we calculate statistics in the FAQ.

Total views569

Total installs3966

Weekly installs197

Weekly updates221

Description

Brown-orange themed Discord theme

Notes

Features:


- Completely hides blocked messages
- Minimal UI
- More responsive UI, auto hide channels list(Credit to \xynstr#0300)
- Better user pop out and status selection (Credit to https://github.com/spinfish/spinfish)
- Fully customisable colours with the variables in the beginning of the file
- Display code block language

If you want to change up anything, css file is documented well enough to do so, everything is based on the first few variables.
Credits to spinfish, LuckFire on github and multiple people from the Stylus discord.

History

Daily snapshots of style statistics.

2021-07-072021-07-212021-08-032021-08-172021-08-302021-09-122021-09-262021-10-092021-10-222021-11-052021-11-182021-12-01Date0.0024.0048.0072.0095.00119.00143.00167.00190.00Daily countDaily installsDaily updatesDaily views
2021-07-072021-07-222021-08-062021-08-212021-09-042021-09-192021-10-042021-10-182021-11-022021-11-172021-12-01Date0.00500.001000.001500.002000.002500.003000.003500.004000.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name           Discord Lantern Theme
@namespace      discord.com
@version        1.0.1
@description    Brown-orange themed Discord theme
@author         Kyle
@license        GNU
==/UserStyle== */
@-moz-document domain("discord.com") {
	:root {
		--background: #261b17;
		--header: #1b110e;  
		--background-alt: #291812;
		--hover: #532f28;
		--highlight: #f99666;
		--highlight-alt: #fad256;
		--ui: #e35b15;
		--ui-alt: #fabc2c;
		--onclick: #e86420;
		--visited: #e04220;
		--text: #e4cbb3;
		--green-light: #82a23a;
		--green-dark: #4d772d;
		--blue-light: #66a4a4;
		--blue-dark: #4395a3;
		--purple-light: #c888e8;
		--purple-dark: #b666e6;
		--pink-light: #fab2c2;
		--pink-dark: #fff;
		--orange-light: #e86420;
		--orange-dark: #e35b15;
		--red-light: #e04220;
		--red-dark: #e01d1d;
		--brown-light: #291812;
		--brown-dark: #1b110e;
		--yellow-light: #fad256;
		--yellow-dark: #fabc2c;
		/* 
  .
 (
 )\
((_)       _    _   _ _____ _____ ___   _   _
 | |      / \  | \ | |_   _| ____|  _ \| \ | |
 | |     / _ \ |  \| | | | |  _| | |_) |  \| |
 | |___ / ___ \| |\  | | | | |___|  _ <| |\  |
 |_____/_/   \_|_| \_| |_| |_____|_| \_|_| \_|
  _____ _   _ _____ __  __ _____
 |_   _| | | | ____|  \/  | ____|
   | | | |_| |  _| | |\/| |  _|
   | | |  _  | |___| |  | | |___
   |_| |_| |_|_____|_|  |_|_____|
}
*/
	}
	/* Main colour variables, If something is pink, I don't know what it affects*/
	.theme-dark,
	.theme-light,
	:root {
		--background-primary: var(--background) !important; /* Main body colour */
		--background-secondary: var(
			--header
		) !important; /* Channel list, embeds, side bar, message box, icons for sharing screen and etc*/
		--background-secondary-alt: var(
			--background-alt
		) !important; /* On hover colour for people and channels, and your avatar thingy at the bottoms */
		--background-tertiary: var(--header) !important; /* Side bar around servers*/
		--background-accent: var(--background-secondary) !important;
		--background-extra: var(
			--highlight
		) !important; /* Things like names, time of posting, and placeholders for different text boxes*/
		--background-extra-alt: var(--hover) !important; /* Unsure what it does so I'm just stealing it for now */
		--background-floating: var(--header) !important;
		--background-modifier-hover: var(--background-secondary-alt) !important;
		--background-modifier-active: var(
			--onclick
		) !important; /* Changes the colour of the channel when clicked */
		--background-modifier-selected: var(--background-alt) !important;
		--background-modifier-accent: var(
			--background
		) !important; /* Emote background colour, this too i think lines(https://imgur.com/mAb5EQG) */
		--channeltextarea-background: var(--header) !important;
		--focus-primary: var(--ui) !important; /* Tabbing colour */
		--deprecated-card-bg: var(
			--header
		) !important; /* Parts of things in settings might affect other things too */
		--deprecated-card-editable-bg: #ff00ed !important;
		--deprecated-text-input-border-disabled: var(--header) !important;
		--activity-card-background: var(--background) !important;
		--channels-default: var(--highlight) !important;
		--text-muted: var(--highlight) !important;
		--text-normal: var(--text) !important;
		--text-link: var(--ui); /* link */
		--interactive-normal: var(--ui) !important; /* UI icons */
		--interactive-hover: var(--highlight) !important;
		--interactive-active: var(--text) !important;
		--interactive-muted: var(--ui) !important; /* Quotes */
		--header-secondary: var(--text) !important;
		--toast-background: var(--background) !important;
		--toast-header: var(--header) !important;
		--toast-contents: var(--header) !important;
		--toast-box-shadow: #ff00ed !important;
		--toast-border: var(--header) !important;
		--background-mentioned-hover: rgba(227, 91, 21, 0.3) !important; /* Onhover */ /*CHANGECOLOUR!*/
		--background-mentioned: rgba(227, 91, 21, 0.1); /* Just pong */ /*CHANGECOLOUR!*/
		--header-primary: var(--highlight) !important;
		--border-radius: 18px;
		--deprecated-text-input-prefix: #ff00ed;
		--scrollbar-thin-thumb: var(--header); /* Channel and people sidebar baby scroll colour */
		--scrollbar-thin-track: transparent;
		--scrollbar-auto-thumb: var(--background); /* Message box baby scroll thingy */
		--scrollbar-auto-track: var(--background); /* Non scrolly part of the scroll */
		--scrollbar-auto-scrollbar-color-thumb: #ff00ed;
		--scrollbar-auto-scrollbar-color-track: #ff00ed;
		--elevation-low: transparent; /* imgur.com/a/PQuzp18 /line under channel description*/
		--elevation-high: 0 1px 5px var(--highlight); /* Glow around tooltips */
		--logo-primary: #ff00ed;
		--guild-header-text-shadow: 0 1px 1px #ff00ed;
		--deprecated-panel-background: #ff00ed;
		--deprecated-quickswitcher-input-background: var(--background-alt); /* CTRL+K background colour */
		--deprecated-quickswitcher-input-placeholder: var(--text); /* CTRL+K / channel search menu text colour */
		--deprecated-text-input-bg: var(--hover); /* Message box background person on profile card pop up*/
		--deprecated-text-input-border: var(--highlight); /* Profile cards message box border if not focus/hover*/
		--deprecated-text-input-border-hover: var(--highlight); /* Profile message box on hover border colour */
	}

	/*-----------------HIDE STUFF------------------*/
    
    /* LIVE label when in vc */
    .base-PmTxvP.textBadge-1iylP6.liveLarge-3zs2Zq.live-vBWnV6 {
        display: none !important;
    }
    /* Region thingy when in vc */
    .noWrap-3jynv6.alignStretch-DpGPf3.justifyEnd-2E6vba.directionRow-3v3tfG.horizontal-2EEEnY.horizontal-1ae9ci.flex-1O1GKY.flex-1xMQg5 {
        display: none;
    }
    /* Stream pop out pro tip*/
    .protip-3-1FNm {
        display: none !important;
    }
	/* Rounded corners on images */
	.imageWrapper-2p5ogY {
		border-radius: 0px !important;
	}
	/* Tutorial in inbox */
	.tutorial-3w5I9h {
		display: none !important;
	}
	/* Completely hide blocked messages */
	div[class*="groupStart-"] > [role="group"] {
		display: none !important;
	}
	/* Hide mute unmute icon on server header */
	.toolbar-1t6TWx > div.clickable-3rdHwn.iconWrapper-2OrFZ1:nth-of-type(1) > .icon-22AiRD {
		display: none !important;
	}
	/* Hide "Help" icon on server header */
	.toolbar-1t6TWx > .anchorUnderlineOnHover-2ESHQB.anchor-3Z-8Bb {
		display: none !important;
	}
	/* Hide edited message indicator */
	.edited-3sfAzf {
		display: none !important;
	}
	/* Hide Upload, Gift, Gif and Emote icons */
	.attachWrapper-2TRKBi {
		display: none !important;
	}
	.buttons-3JBrkn {
		display: none !important;
	}
	/* Hide Nitro Shop button in home screen */
	#private-channels [href="/store"] {
		display: none !important;
	}
	/* Hide notes on profile popup */
	div.size12-3R0845.marginBottom8-AtZOdT.bodyTitle-Y0qMQz:nth-of-type(3),
	.scrollbar-3dvm_9.scrollbarGhostHairline-1mSOM1.input-cIJ7To.inputDefault-_djjkz.textarea-2r0oV8 {
		display: none !important;
	}
	/* Hide "Invite to server" on different places */
	#user-context-invite-to-server {
		display: none !important;
	}
	.colorDefault-2K3EoJ.colorBrand-ROmMP1.labelContainer-1BLJti.item-1tOPte {
		display: none !important;
	}
	/* Hide Server Banners */
	.header-2V-4Sw {
		box-shadow: var(--elevation-low) !important;
	}
	.animatedContainer-1NSq4T {
		display: none !important;
	}
	#channels .content-3YMskv > div[style*="height:"]:first-child {
		margin-top: -15px !important;
	}
	/* Hide downloads icon */
	[class*="guilds-"] [class*="scroller-"] > [class*="listItem-"]:nth-last-child(-1n + 3) {
		display: none !important;
	}

	/*---------------MESSAGES STUFF-----------------*
	/* Disable background darken when hovering on a message */
	.message-2qnXI6:not(.mentioned-xhSam7):hover {
		background-color: var(--background) !important;
	}

	/*--------------CHANNELS LIST STUFF-------------*/

    /* User module */
    .container-3baos1, .container-3baos1 .avatar-SmRMf2 {
        background-color: var(--header) !important;
    }
    /* VC module */
    .container-1giJp5 {
        background-color: var(--header) !important;
    }
    /* Voice Connected text */
    .rtcConnectionStatusConnected-VRZDjy {
        color: var(--green-light) !important;
    }
	/* Change channel list variable so muted channels/categories are a different colour from quotes */
	[class*="sidebar-"] {
		--interactive-muted: var(--hover) !important;
		--background-secondary: var(--header) !important;
	}
    /* Auto Hide by \xynstr#0300 */
	/* Transition */
	.sidebar-2K8pFh:hover {
		width: 240px !important;
		transition: 0.1s ease !important;
		transition-delay: 0.3s !important;
	}
	/* Detects screen size to show channels if screen is big enough */
	@media screen and (max-width: 1100px) {
		.sidebar-2K8pFh {
			width: 0px !important;
			transition: 0.3s ease !important;
			position: fixed !important;
			height: calc(100% - 47.988px) !important;
			z-index: 1 !important;
			bottom: 0px !important;
		}
		.wrapper-3NnKdC:hover + .base-3dtUhz > .content-98HsJk > .sidebar-2K8pFh {
			width: 240px !important;
		}
		.sidebar-2K8pFh:hover {
			width: 240px !important;
		}
	}
    
    /*-------------VOICE CHAT VC STUFF--------------*/
	
    /* remove background 
    .background-ujHpbY {
        background-color: var(--background) !important;
    }
    */  
    /* Background */
    .fade-2kXiP2.scrollerBase-289Jih.thin-1ybCId.videoGrid-1khsrF.scroller-3gAZLs {
        background-color: var(--header) !important;
    }
    /* Buttons */
    .colorable-1bkp8v.white-3GPOIp, .colorable-1bkp8v.white-3GPOIp .centerIcon-2G6o-T,
    .colorable-1bkp8v.red-33-Lnk, .colorable-1bkp8v.red-33-Lnk .centerIcon-2G6o-T,
    .colorable-1bkp8v.primaryDark-3mSFDl, .colorable-1bkp8v.primaryDark-3mSFDl .centerIcon-2G6o-T {
        background-color: var(--background-alt) !important;
        color: var(--text) !important;
    }
    /* Muted mic */
    .slash-33-IMF {
        color: var(--ui) !important;
    }
    /* Icons */
    .controlIcon-35oS15 {
        color: var(--ui);
    }
    /* Watch stream label */
    .cta-3gK0Pu {
        background-color: var(--background) !important;
        color: var(--text) !important;
    }
    /* Loading vc stream */
    .spinner-2UBgbJ.spinner-2enMB9 {
        background-color: var(--hover) !important;
    }
    /* Spinny squares */
    .wanderingCubesItem-WPXqao {
        background-color: var(--ui) !important;
    }
    
    
    /*-------------MISCELLANEOUS STUFF--------------*/

    /* checkboxes */
    .checkbox-3s5GYZ {
        color: var(--ui) !important;
    }
    /* Logo */
    .wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9, .wrapper-1BJsBx:hover .childWrapper-anI2G9 {
        color: var(--text) !important;
        background-color: var(--background-alt) !important;
    }
	/* Friend list, block list, etc colours */
	.peopleColumn-29fq28 {
		background-color: var(--header) !important;
	}
    /* Make pfps be squarier */
    .avatar-1BDn8e.clickable-1bVtEA {
        border-radius: 15px !important;
    }
	/* Server Boost background */
	.perksModalContentWrapper-2HU6uL {
		background: var(--header) !important;
	}
	/* Selection colous */
	::selection {
		color: var(--header) !important;
		background: var(--highlight) !important;
	}
	/* Make pinned messages wider */
	.messagesPopoutWrap-1MQ1bW {
		width: 500px !important;
	}
	/* Make top bar shorter */
	.container-1r6BKw.themed-ANHk51 {
		height: 40px !important;
	}
	/* Better status selection by LuckFire */
	.status-1fhblQ,
	.description-2L932D {
		display: none !important;
	}
	.separator-2I32lJ {
		display: none !important;
	}
	.mask-1qbNWk.icon-1IxfJ2 {
		--status-icon-size: 75%;
		height: var(--status-icon-size) !important;
		width: var(--status-icon-size) !important;
		margin-left: 33% !important;
	}
	.animatorTop-2Y7x2r.scale-3iLZhb.didRender-33z1u8
		> .menu-3sdvDG.styleFixed-sX-yHV
		> .scroller-3BxosC.thin-1ybCId.scrollerBase-289Jih {
		display: grid !important;
		align-items: center !important;
		grid-template-columns: auto auto auto auto !important;
		visibility: visible !important;
	}
	.item-1tOPte.colorDefault-2K3EoJ:nth-of-type(7) {
		grid-column: 1/5 !important;
	}
	.animatorTop-2Y7x2r.scale-3iLZhb.didRender-33z1u8 {
		transition: opacity 0.15s linear 0s !important;
	}
	.customText-tY5LJn {
		font-size: 15px !important;
	}
	/* Text box focus in custom status selection*/
	.input-1GLP_D:focus {
		border: 1px solid var(--ui) !important;
	}
	/* Custom status on hover */
	.customStatusWithEmoji-8-XZ8I:hover {
		background-color: var(--background-alt) !important;
		color: var(--ui) !important;
	}
	/* Unread messages bar */
	.barBase-1c2Rfb.newMessagesBar-265mhP {
		background-color: var(--highlight) !important;
	}
    /* Ping */
    .interactive.wrapper-3WhCwL.mention {
        color: #fff !important;
        background-color: #e86420d9
    }
	/*----------------SETTINGS STUFF----------------*/

	/* Most buttons */
	.lookFilled-1Gx00P.colorBrand-3pXr91 {
		background-color: var(--ui) !important;
	}
	.lookFilled-1Gx00P.colorBrand-3pXr91:hover {
		background-color: var(--onclick) !important;
	}

	/* Edit profile buttons */
	button.fieldButton-27bJrp.button-38aScr.lookFilled-1Gx00P.colorGrey-2DXtkV.sizeSmall-2cSMqn.grow-q77ONN {
		background-color: var(--header) !important;
	}
	button.fieldButton-27bJrp.button-38aScr.lookFilled-1Gx00P.colorGrey-2DXtkV.sizeSmall-2cSMqn.grow-q77ONN:hover {
		background-color: var(--hover) !important;
	}

	/*-----------POPUPS AND PROFILE STUFF-----------*/
    
    /* User volume slider */
    .barFill-23-gu- {
        background-color: var(--ui) !important;
    }
    .bar-2Qqk5Z {
        background-color: var(--hover) !important;
    }
    /* Stream popup */
    .body-Ogsp8i {
        background-color: var(--background-alt) !important;
        padding: 20px !important;
    }
    /* Stream popup load */
    .theme-dark .previewHover-1tGzfF {
        background-color: var(--header) !important;
    }
    
	/* Colour of boxes of any popup e.g. delete/pin message*/
	.message-2qRu38 {
		background-color: var(--background) !important; /* Embedded message */
	}
	.root-1gCeng {
		background-color: var(--background) !important; /* Embedded part */
	}
	.footer-2gL1pp {
		background-color: var(--background-alt) !important; /* Footer */
	}
	/* Upload popup */
	.uploadModal-2ifh8j {
		background-color: var(--background) !important; /* Header */
	}
	.footer-3mqk7D {
		background-color: var(--background-alt) !important; /* Footer */
	}
	/* Profile popup streaming colours */
	.headerPlaying-j0WQBV,
	.topSectionPlaying-1J5E4n {
		background-color: var(--header); /* Default */
	}
	.headerSpotify-zpWxgT,
	.topSectionSpotify-1lI0-P {
		background-color: var(--green-light) !important; /* Spotify */
	}
	.headerStreaming-2FjmGz,
	.topSectionStreaming-1Tpf5X {
		background-color: var(--header); /* Streaming */
	}
	/* Profile when clicked in member list */

	.flex-1xMQg5.flex-1O1GKY.vertical-V37hAW.flex-1O1GKY.directionColumn-35P_nr.justifyCenter-3D2jYp.alignCenter-1dQNNs.noWrap-3jynv6.headerTop-3C2Zn0 {
		background-color: var(--header); /* Footer */
	}

	.body-3iLsc4 {
		background-color: var(--background-alt) !important; /* Role box */
	}
	.footer-1fjuF6 {
		background-color: var(--background-alt) !important;
	} /* Footer */

	.quickMessage-2XpSaN.quickMessage-1yeL4E {
		background-color: var(--header) !important;
	} /* Message user box */
	/* Profile right click popup onhover */
	[class*="menu-"] > [class*="scroller-"] [class*="item"][class*="focused"] {
		background-color: var(--hover) !important;
	}
	/* Profile pop out input box */
	.input-cIJ7To:focus {
		border: 1px solid var(--ui) !important;
	}
	/*-----------------EMOTE STUFF------------------*/

	/* Mention suggestions when typing @something or emotes */
	.autocompleteInner-zh20B_ {
		background-color: var(--header) !important;
	}
	.selectorSelected-1_M1WV {
		background-color: var(--header) !important;
	}
	/* Reaction boxes */
	.reactors-Blmlhw.thin-1ybCId.scrollerBase-289Jih.fade-2kXiP2 {
		background-color: var(--background) !important;
	} /* Main box */
	.scroller-1-nKid.thin-1ybCId.scrollerBase-289Jih.fade-2kXiP2 {
		background-color: var(--background) !important;
	} /* Colour of scroller */
	/* Emote box selected emote row */
	.selected-1Tbx07.selectable-3dP3y-.base-1pYU8j {
		background-color: var(--background-alt);
	}
	/* Change size of emotes */
	[class*="reactions-"] .emoji {
		height: 1.3rem !important;
		width: 1.3rem !important;
	}
	/* Colour for when you've reacted */
	[class*="chat-"] [class*="reactionMe-"] {
		background-color: var(--hover) !important;
        border: 0px;
	}
	/* Colour for number when you've reacted */
	.reactionMe-wv5HKu .reactionCount-2mvXRV,
	.reactionMe-wv5HKu:hover .reactionCount-2mvXRV {
		color: var(--highlight) !important;
	}
	/* Remove grey filter on disabled emotes */
	.emojiItemDisabled-1FvFuF {
		filter: grayscale(0%) !important;
	}
	/*-----------------SEARCH STUFF-----------------*/

	/* Message search menu and quickswitcher; code yoinked from the amazing LuckFire! */
	.searchFilter-2ESiM3,
	.searchAnswer-3Dz2-q {
		background-color: var(--background-alt) !important;
	}

	#search-results > .focused-2bY0OD {
		background-color: var(--header) !important;
	}
	#search-results {
		background-color: var(--header) !important;
		box-shadow: 0 0 0 1px var(--header) !important;
	}

	.option-96V44q.selected-rZcOL- {
		background-color: var(--background-alt) !important;
	}
	.option-96V44q::after {
		background: transparent !important;
	}
	.option-96V44q.selected-rZcOL-::before {
		background: var(--background-alt) !important;
		padding-left: 10px !important;
	}

	.react-datepicker,
	.react-datepicker__header {
		background-color: var(--header) !important;
	}

	.react-datepicker__day:not(:hover):not(.react-datepicker__day--disabled):not(.react-datepicker__day--outside-month) {
		background-color: var(--background-alt) !important;
	}
	.react-datepicker__day {
		border-color: var(--header) !important;
	}
	.react-datepicker__day--disabled,
	.react-datepicker__day--outside-month {
		background-color: var(--background-primary) !important;
	}
    
    .interactive-3B9GmY.padded-302COx.outer-1AjyKL.wrapper-3D2qGf.itemCard-v9viV7 {
	background-color: var(--header);
}
    .interactive-3B9GmY.padded-302COx.outer-1AjyKL.wrapper-3D2qGf.itemCard-v9viV7:hover     {
    	background-color: var(--header);
    }
    .section-2gLsgF {
	    background-color: var(--background);
        border-top: none;
    	}
    .section-2gLsgF:hover {
	    background-color: var(--hover);
    }
    /* Annoying line in home screen active now */
    .body-1ld4H7 .separator-XqIyoz {
        display: none !important;
    }   

    /* display info about code blocks */
    code.hljs:not(.inline)::before {
        content: attr(class) !important;
        float: right;
        display: block;
        width: auto;
        max-width:  5.3rem !important;
        min-width:  auto;
        margin-top: -8.6rem !important;
        line-height: 1.6rem !important;
        overflow-x: hidden;
        text-align: right;
        font-size: 0.8rem;
        opacity: 0.6;
    } 
}

Reviews

kyleslanternthemes reviewed and gave 5/5 ⭐ on August 04, 2021 at 00:09
I like it a lot, very good! Note: I'm the author.