-
-
Notifications
You must be signed in to change notification settings - Fork 381
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
85 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 */ | ||
} |