Greasy Fork is available in English.

Boreal - Discord theme

Enjoy Discord over a calm peaceful lake under the northern lights.

/* ==UserStyle==
@name Boreal - Discord theme
@author https://github.com/rmkx
@source       https://github.com/rmkx/rmkx.github.io/blob/main/Boreal/src/boreal.css
@description Enjoy Discord over a calm peaceful lake under the northern lights.
@version      1.0.1
@invite       HnGWVQbQBv
@namespace BetterDiscordTheme
@include https://discord.com/*
@donate       https://bit.ly/3fnzq1Z
==/UserStyle== */



@import url('https://rmkx.github.io/src/hideGuilds.css'); /*Comment line if you don't want servers list to hide | This moves it to the default position (you need to set its bg to transparent*/
@import url('https://rmkx.github.io/src/hideMembers.css'); /*Comment line if you don't want servers' members to hide*/
@import url('https://rmkx.github.io/src/hideChannels.css'); /*Comment line if you don't want servers' channels to hide*/
@import url('https://rmkx.github.io/Boreal/src/boreal.css'); /*Main CSS sheet*/
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); /*Put your font url here*/

::-webkit-input-placeholder, body, button, input, select, textarea {
    font-family: "Lato"; /*Change the font name you imported here*/
}

:root {
    --server-hiding-width: 2.5%; /*Amount that will be shown when the channels panel hides | Default 50px*/
    --members-hiding-width: 2.9%; /*Amount that will be shown when the server's members panel hides | Default 2.9%*/
    --showing-width: 13.5%; /*Amount that will be shown when the panels show | Default 13.5%*/
    --transition-speed: 0.35s; /*Changes the transition speed*/
    --hidden-background: transparent; /*Background of the elements when hidden*/
    /*Background of the elements when showing*/
    --showing-background: linear-gradient(195deg, rgba(0,182,122,0.39537821964723385) 14%, rgba(0,241,255,0.3785714969581583) 35%, rgba(23,114,246,0.22170875186011907) 59%, rgba(15,8,74,0.2049020291710434) 87%, rgba(6,1,42,0.0536415249693627) 96%);

    --background-image: url(https://i.imgur.com/YiHlt7b.jpg); /*Changes the background image*/
    --bg-blur: 0px; /*changes the blur of the background image*/
    --main-accent: rgb(35, 77, 117); /*Main accent of the theme for little elements*/
    --main-accent-rgb: 35, 77, 117; /*RGB code of main accent for some elements, change this if you change main accent*/
    --popout-blur: 2px; /*Changes the blur of elements that appear on screen*/
    --bg-opacity: 1; /*Changes the opacity of the background*/
    --links: rgb(97, 195, 224); /*Color for links*/

    --panel-boxes: rgba(0, 0, 0, 0.55); /*Changes the background of the surrounded panels*/
    --second-panel-bg: rgba(0, 0, 0, 0.8); /*changes the bg of panels that come out, like right clicking on a user*/
    --panel-border: 0px solid rgb(70, 69, 69); /*Changes the borders of the surrounded panels*/
    --panel-border-radius: 8px; /*Changes the radius of the surrounded panels*/

    --chat-hover: rgb(0, 0, 0, 0.2); /*Message background when hovering*/
    --embed-border: 0px; /*Makes it so some embeds in chat have their corresponding border | 0px = no borders*/

    --buttons-background: rgba(0, 0, 0, 0.3); /*Changes the color of the buttons*/
    --buttons-border: 0px solid rgb(70, 69, 69); /*Changes the color of the buttons*/
    --buttons-radius: 8px; /*Changes the radius of the buttons*/
    --buttons-color: white; /*Changes the color of the button text*/

    /*Changes the color of the background when hovering*/
    --element-hovered: linear-gradient(195deg, rgba(0,182,122,0.39537821964723385) 14%, rgba(0,241,255,0.3785714969581583) 35%, rgba(23,114,246,0.22170875186011907) 59%, rgba(15,8,74,0.2049020291710434) 87%, rgba(6,1,42,0.0536415249693627) 96%);
    /*Code for the gradient*/
    --underline-gradient: linear-gradient(195deg, rgba(0,182,122,0.39537821964723385) 14%, rgba(0,241,255,0.3785714969581583) 35%, rgba(23,114,246,0.22170875186011907) 59%, rgba(15, 8, 74, 0.473) 87%);

    --settings-width: 60%; /*Width for the settings window*/
    --settings-heigth: 85%; /*Width for the settings window*/
    --icon-padding: 35px; /*Changes the padding between the icon and the text | Default 35px*/
}