Merge pull request #58 from makimwah/patch-2

Create midnight-vencord.theme

flavors/midnight-vencord.theme

@@ -0,0 +1,101 @@
+/**
+ * @name midnight (Vencord)
+ * @description A darkened discord theme. Based on Vencord's colour palette. (https://vencord.dev/)
+ * @author refact0r, esme, anubis
+ * @version 1.6.2
+ * @source https://github.com/refact0r/midnight-discord
+ * @authorId 508863359777505290
+*/
+
+/* 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');
+
+@import url('https://fonts.googleapis.com/css?family=Inter');
+
+/* customize things here */
+:root {
+	/* font, change to 'gg sans' for default discord font*/
+	--font: 'Inter';
+
+	/* top left corner text */
+	--corner-text: 'Vencord';
+
+	/* color of online status dot, change to #23a55a for default green */
+	--online-indicator: #89b481;
+
+	/* accent colors */
+	--accent-1: #7caea3; /* links */
+	--accent-2: hsl(343.6,46.7%,67.6%); /* general unread/mention elements */
+	--accent-3: hsl(343.6,46.7%,67.6%); /* accent buttons */
+	--accent-4: hsl(343.6,46.7%,67.6%); /* accent buttons when hovered */
+	--accent-5: hsl(343.6,46.7%,61.6%); /* 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(37,40%,84%); /* headings and important text */
+	--text-3: hsl(37,40%,72%); /* normal text */
+	--text-4: hsl(37,40%,72%); /* icon buttons and channels */
+	--text-5: hsl(0,0%,42.7%); /* muted channels/chats and timestamps */
+
+	/* background and dark colors */
+	--bg-1: hsl(0,0%,24.7%); /* dark buttons when clicked */
+	--bg-2: hsl(0,0%,21.7%); /* dark buttons */
+	--bg-3: hsl(0,0%,18.7%); /* spacing, secondary elements */
+	--bg-4: hsl(0,0%,15.7%); /* main background color */
+	--hover: hsla(0,0%,53.7%, 0.1); /* channels and buttons when hovered */
+	--active: hsla(0,0%,53.7%, 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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27' width='24' height='24'%3E%3Cpath fill='currentColor' d='M0 0h7v1H6v1H5v1H4v1H3v1H2v1h5v1H0V6h1V5h1V4h1V3h1V2h1V1H0m13 2h5v1h-1v1h-1v1h-1v1h3v1h-5V7h1V6h1V5h1V4h-3m8 5h1v5h1v-1h1v1h-1v1h1v-1h1v1h-1v3h-1v1h-2v1h-1v1h1v-1h2v-1h1v2h-1v1h-2v1h-1v-1h-1v1h-6v-1h-1v-1h-1v-2h1v1h2v1h3v1h1v-1h-1v-1h-3v-1h-4v-4h1v-2h1v-1h1v-1h1v2h1v1h1v-1h1v1h-1v1h2v-2h1v-2h1v-1h1M8 14h2v1H9v4h1v2h1v1h1v1h1v1h4v1h-6v-1H5v-1H4v-5h1v-1h1v-2h2m17 3h1v3h-1v1h-1v1h-1v2h-2v-2h2v-1h1v-1h1m1 0h1v3h-1v1h-2v-1h1v-1h1'%3E%3C/path%3E%3C/svg%3E");
+	--moon-icon-size: cover;
+}
+	/* disable DM spin */
+.wrapper_d281dd:hover > .childWrapper__01b9c::before,
+.wrapper_d281dd.selected_f5ec8e > .childWrapper__01b9c::before {
+	background: var(--text-0);
+	transform: rotate(-0deg) scale(0.8);
+
+	/* 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 */
+}
+
+/* color of idle and dnd status dots, change first and last fill values to #d8a656 for default yellow and the inbetween fill values to #ea6962 for default red */
+rect[fill="#f0b232"],
+svg[fill="#f0b232"] {
+  fill: #d8a656;
+}
+rect[fill="#f23f43"],
+svg[fill="#f23f43"] {
+  fill: #ea6962;
+}
+[style="background-color: rgb(242, 63, 67);"] {
+  background-color: #ea6962	!important;
+}
+[style="background-color: rgb(240, 178, 50);"] {
+  background-color: #d8a656	!important;
+}