Skip to content

Instantly share code, notes, and snippets.

@maicol07

maicol07/Fluent.theme.css

Last active September 20, 2024 12:15
Show Gist options
  • Save maicol07/3d0b8f0026e613c4cd02b267c33b62c3 to your computer and use it in GitHub Desktop.
Save maicol07/3d0b8f0026e613c4cd02b267c33b62c3 to your computer and use it in GitHub Desktop.
Download ZIP
Fluent Theme for Discord w/Mica (Dorion)
Raw
Fluent.theme.css
/**
* @name Fluent
* @author Gibbu
* @version 1.0.10
* @description Brings the look of Windows 11 to Discord.
* @source https://github.com/DiscordStyles/Fluent
* @invite ZHthyCw
* @authorId 174868361040232448
*/
@import url('https://discordstyles.github.io/Fluent/Fluent.css');
:root {
/*--accent: 88,101,242; /* The colour used throughout the app | R,G,B format | Default: 98, 205, 254 */
--accent: lch(from var(--os-accent-color) l c calc(h + 180)); /*var(--os-accent-color, rgb(88,101,242));*/
--accent-text: lch(from var(--os-accent-color) calc(l + 100) c h);
--channels-width: 300px; /* Size of the server channel/dms list | Default: 300px */
--members-width: 280px; /* Size of the members list | Default: 280px */
--server-size: 48px; /* Size of each server in the server list | Default: 48px */
--dark-background-hue: 0; /* The hue of the background colour. | Options: 0 to 360 | Default: 0 */
--dark-background-saturation: 0%; /* How much of the colour should be visible. | Must end in a % | Default: 0% */
}
/* Fluent fixes */
/* #app-mount .layer_d4b6c5 ~ .layer_d4b6c5 .sidebar__02e8d .header__71a82 {
display: block;
} */
/* nav.wrapper__216eb.guilds__2b93a + div:has(> nav) + .base_c0676e .content__76dcf {
width: calc(100vw - var(--server-container) - var(--server-container));
}
.content__76dcf {
transition: width 0.1s cubic-bezier(.44,1.04,1,1.01) !important;
} */
.charCounterAdded-zz9O4t {
width: -webkit-fill-available;
}
:root {
--rounded: 6px;
--rounded-high: 12px;
--bg-main: transparent;
--bg-alt: #fafafa6e;
--bg-interactive-high: #bfbfbf38;
--bg-interactive-high-hover: #e3e3e39c;
--chat-bubble-bg: #ffffff;
--background-tertiary: transparent;
--interactive-muted: #939393;
--btn-bg-hover: hsl(0 0% 0% / 0.045);
--btn-bg-active: hsl(0 0% 100% / 0.6);
--bg-overlay-3: var(--bg-content-alt);
--bg-overlay-4: var(--bg-high);
/*--bg-overlay-app-frame: transparent;*/
}
.theme-dark {
--bg-main: transparent;
--bg-alt: #2f31361c;
--bg-interactive-normal: #40444b1c;
--bg-interactive-normal-hover: #4a4d5429;
--bg-interactive-high: #4f545c5c;
--bg-interactive-high-hover: #72767d1a;
--chat-bubble-bg: #333437;
/*--bg-overlay-app-frame: #2f3136;*/
}
/* #app-mount .layer_f7d46a.baseLayer__2b890:has(+ .layer_f7d46a:not(.baseLayer__2b890)) {
display: none;
} */
/* MAIN PANEL */
#app-mount .chat_a7d72e {
border-left: 1px solid var(--border-mid);
border-top-left-radius: var(--rounded-high);
}
/* CHANNELS SIDEBAR */
#app-mount .sidebar_a4d4d9 {
border: none;
}
/*
#app-mount .menu__088f7 {
box-shadow: var(--elevation-medium);
}
*/
/* MESSAGE INPUT BOX */
#app-mount .scrollableContainer_d0696b {
background: var(--chat-bubble-bg);
}
/* Equicord channel typing indicator */
.vc-typing-indicator-dots svg {
background: none;
}
.icon__67ab4 {
mask-image: url("data:image/svg+xml; utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10.55 2.532a2.25 2.25 0 0 1 2.9 0l6.75 5.692c.507.428.8 1.057.8 1.72v9.803a1.75 1.75 0 0 1-1.75 1.75h-3.5a1.75 1.75 0 0 1-1.75-1.75v-5.5a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25v5.5a1.75 1.75 0 0 1-1.75 1.75h-3.5A1.75 1.75 0 0 1 3 19.747V9.944c0-.663.293-1.292.8-1.72l6.75-5.692Zm1.933 1.147a.75.75 0 0 0-.966 0L4.767 9.37a.75.75 0 0 0-.267.573v9.803c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-5.5c0-.967.784-1.75 1.75-1.75h3.5c.966 0 1.75.783 1.75 1.75v5.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25V9.944a.75.75 0 0 0-.267-.573l-6.75-5.692Z' /></svg>");
}
.link_ddbb36._hiddenChannel_1v3y7_1 .iconContainer__6a580:has(path[d^="M16 4h.5v-.5a2.5 2.5 0 0 1 5 0V4h.5a1"])::before, .link_ddbb36._hiddenChannel_1v3y7_1 .iconContainer__6a580:has(path[d^="M13 4C13 3.66767 13.0405"])::before, .link_ddbb36._hiddenChannel_1v3y7_1 .iconContainer__6a580:has(path[d^="M22.545 4.87988V5.87988H23.28C23.4126"])::before, .link_ddbb36._hiddenChannel_1v3y7_1 .iconContainer__6a580:has(path[d^="M15.44 6.99992C15.5725 6.99992"])::before {
background: var(--status-danger-background);
}
/* #app-mount .mentioned_fa6fd2 {
background: unset;
opacity: unset; /* Remove the opacity *//*
}
#app-mount .mentioned_fa6fd2:after {
content: '';
background: var(--chat-mention-colour);
opacity: 0.05;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
} */
#app-mount div:has(> #vc-friendcount) {
padding-bottom: 4px;
height: auto !important;
}
#app-mount .searchBar_e0840f {
border-radius: var(--rounded) !important;
background: var(--bg-overlay-4);
}
#app-mount .scrollableContainer_d0696b .button_dd4f85 path {
display: auto;
}
/* Better user area */
#app-mount .panels_a4d4d9 > .container_b2ca13 .nameTag_b2ca13 {
display: block;
padding-top: initial;
padding-bottom: initial;
}
/* Fix received messages panel */
#app-mount .container_f1c3d9 {
background: var(--bg-overlay-4);
}
/* Fix icons with black box */
.button_df39bd .lottieIcon_f73ef7 g {
display: inherit;
}
.button_df39bd .lottieIcon_f73ef7 svg {
background: transparent;
}
/* Fix quick switcher background */
#app-mount .quickswitcher_f4e139 {
background: var(--bg-overlay-4);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment