diff --git a/midnight.theme.css b/midnight.theme.css index 61aa2ed3..f01fed8e 100644 --- a/midnight.theme.css +++ b/midnight.theme.css @@ -32,7 +32,8 @@ --mention-hover: hsla(190, 80%, 52%, 0.05); /* mentions & mention messages when hovered */ /* text colors */ - --text-1: hsl(220, 40%, 95%); /* bright text on colored elements */ + --text-0: white; /* text on colored elements */ + --text-1: var(--text-2); /* other normally white text */ --text-2: hsl(220, 25%, 70%); /* headings and important text */ --text-3: hsl(220, 15%, 60%); /* normal text */ --text-4: hsl(220, 15%, 40%); /* icon buttons and channels */ @@ -66,6 +67,7 @@ --discord-icon: none; /* discord icon */ --moon-icon: block; /* moon icon */ --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* custom icon url */ + --moon-icon-size: auto; /* filter uncolorable elements to fit theme */ /* (just set to none, they're too much work to configure) */ diff --git a/midnight.user.css b/midnight.user.css new file mode 100644 index 00000000..de8f2b78 --- /dev/null +++ b/midnight.user.css @@ -0,0 +1,82 @@ +/* ==UserStyle== +@name midnight +@namespace https://github.com/refact0r +@version 1.6.2 +@description A dark, rounded discord theme. +@author refact0r +@homepageURL https://github.com/refact0r/midnight-discord +@supportURL https://discord.gg/nz87hXyvcy +@license MIT +@var select flavor "flavor" ["midnight", "biscuit", "nord", "catppuccin", "lilypichu"] +@var text font "font" figtree +@var text corner-text "corner text" midnight +==/UserStyle== */ + +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ + +@import url('https://refact0r.github.io/midnight-discord/midnight.css'); + +/* customize things here */ +:root { + /* font, change to 'gg sans' for default discord font*/ + --font: @font; + + /* top left corner text */ + --corner-text: @corner-text; + + /* color of online status dot, change to #23a55a for default green */ + --online-indicator: var(--accent-2); + + /* accent colors */ + --accent-1: hsl(190, 80%, 60%); /* links */ + --accent-2: hsl(190, 80%, 48%); /* general unread/mention elements */ + --accent-3: hsl(190, 80%, 42%); /* accent buttons */ + --accent-4: hsl(190, 80%, 36%); /* accent buttons when hovered */ + --accent-5: hsl(190, 80%, 30%); /* accent buttons when clicked */ + --mention: hsla(190, 80%, 52%, 0.1); /* mentions & mention messages */ + --mention-hover: hsla(190, 80%, 52%, 0.05); /* mentions & mention messages when hovered */ + + /* text colors */ + --text-0: white; /* text on colored elements */ + --text-1: var(--text-2); /* other normally white text */ + --text-2: hsl(220, 25%, 70%); /* headings and important text */ + --text-3: hsl(220, 15%, 60%); /* normal text */ + --text-4: hsl(220, 15%, 40%); /* icon buttons and channels */ + --text-5: hsl(220, 15%, 25%); /* muted channels/chats and timestamps */ + + /* background and dark colors */ + --bg-1: hsl(220, 15%, 20%); /* dark buttons when clicked */ + --bg-2: hsl(220, 15%, 16%); /* dark buttons */ + --bg-3: hsl(220, 15%, 13%); /* spacing, secondary elements */ + --bg-4: hsl(220, 15%, 10%); /* main background color */ + --hover: hsla(230, 20%, 40%, 0.1); /* channels and buttons when hovered */ + --active: hsla(220, 20%, 40%, 0.2); /* channels and buttons when clicked or selected */ + --message-hover: hsla(220, 0%, 0%, 0.1); /* messages when hovered */ + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + --hover-push: 0.2s ease; /* channels/members when hovered */ + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; /* roundness of big panel outer corners */ + --roundness-l: 20px; /* popout panels */ + --roundness-m: 16px; /* smaller panels, images, embeds */ + --roundness-s: 12px; /* members, settings inputs */ + --roundness-xs: 10px; /* channels, buttons */ + --roundness-xxs: 8px; /* searchbar, small elements */ + + /* direct messages moon icon */ + /* change to block to show, none to hide */ + --discord-icon: none; /* discord icon */ + --moon-icon: block; /* moon icon */ + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* custom icon url */ + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + /* (just set to none, they're too much work to configure) */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); /* login background artwork */ + --green-to-accent-3-filter: hue-rotate(56deg) saturate(1.43); /* add friend page explore icon */ + --blurple-to-accent-3-filter: hue-rotate(304deg) saturate(0.84) brightness(1.2); /* add friend page school icon */ +}