Discord css

lightmode
E. Almqvist 2 years ago
parent f9573f9a99
commit af1c09c527
  1. 138
      discocss/.config/discocss/custom.css
  2. 32
      discocss/.config/discocss/preload.js

@ -0,0 +1,138 @@
:root {
--gruv-font-family: "Fira Code";
--gruv-font-size: 14px;
--gruv-bg-dark: #1d2021;
--gruv-bg-darkisher: #202020;
--gruv-bg-darkish: #222222;
--gruv-bg-normal: #282828;
--gruv-bg-brighter: #504945;
--gruv-border: #353331;
--gruv-fg-brighter: #fbf1c7;
--gruv-fg-normal: #ebdbb2;
--gruv-fg-darker: #d5c4a1;
--gruv-fg-dark: #a89984;
--gruv-fg-inactive: #696969;
--gruv-red: #fb4934;
--gruv-purple: #b16286;
--gruv-blue: #458588;
--gruv-green: #b8bb26;
--gruv-aqua: #83c07c;
--gruv-yellow: #fabd2f;
--gruv-orange: #fe8019;
--gruv-accent: var(--gruv-aqua);
--button: #daddee1a;
}
.theme-dark {
--header-primary: var(--gruv-fg-brighter);
--header-secondary: var(--gruv-fg-darker);
--text-normal: var(--gruv-fg-brighter);
--text-muted: var(--gruv-fg-darker);
--text-link: var(--gruv-accent);
--channels-default: var(--gruv-fg-darker);
--interactive-normal: var(--gruv-fg-darker);
--interactive-hover: var(--gruv-fg-brighter);
--interactive-active: var(--gruv-fg-brighter);
--interactive-muted: var(--gruv-fg-darker);
--background-primary: var(--gruv-bg-normal);
--background-secondary: var(--gruv-bg-darkish);
--background-secondary-alt: var(--gruv-bg-normal);
--background-tertiary: var(--gruv-bg-normal);
--background-accent: var(--gruv-accent);
--background-floating: var(--gruv-bg-normal);
--background-modifier-hover: rgba(79, 84, 92, 0.16);
--background-modifier-active: rgba(79, 84, 92, 0.24);
/*--background-modifier-accent: hsla(0, 0%, 100%, 0.06);*/
--background-modifier-accent: rgba(0, 0, 0, 0);
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
--guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
--channeltextarea-background: var(--gruv-bg-normal);
--activity-card-background: var(--gruv-bg-darkish);
--deprecated-panel-background: var(--gruv-bg-dark);
--background-modifier-selected: var(--gruv-bg-normal);
--elevation-low: none !important;
--background-message-hover: var(--gruv-bg-darkish) !important;
}
* {
font-family: var(--gruv-font-family) !important;
font-weight: normal;
font-size: var(--gruv-font-size) !important;
}
/* Make channel list more compact */
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] {
height: 25px !important;
}
/* Chat content */
[class*="chatContent"] [class*="form"] {
padding-top: 0.5rem;
background-color: var(--gruv-bg-normal);
box-shadow: 0 -20px 40px -20px #0000006e;
}
/* Chat profiles */
img[class*="avatar"] {
border-radius: 20%;
overflow: hidden;
transition: filter 0.1s, transform 0.1s ease-in-out;
}
img[class*="avatar"]:hover {
transform: scale(1.1);
}
/* Live tag when streaming */
[class*="live"][class*="textBadge"] {
background-color: var(--gruv-red) !important;
color: var(--gruv-fg-normal);
}
code.hljs:not(.inline)::before {
content: attr(class) !important;
float: right;
display: block;
width: auto;
max-width: 100px;
text-align: right;
min-width: auto;
margin-top: -105px;
line-height: 20px;
overflow-x: hidden;
scrollbar-width: none;
color: var(--gruv-fg-darker);
opacity: 0.6;
}
/* Icons etc, sidebar stuff */
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] {
height: 25px !important;
}
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] > * {
font-size: 15px !important;
}
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] div[class*="iconContainer-"] svg {
color: var(--gruv-fg-darker) !important;
}
[class*="sidebar"] [class*="containerDefault"] [class*="iconVisibility-"] [class*="children-"]{
height: 25px;
}
/* Scrollbar */
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-handle,
::-webkit-scrollbar-track-piece {
border-color: rgba(0, 0, 0, 0) !important;
background-color: rgba(0, 0, 0, 0) !important;
}

@ -0,0 +1,32 @@
module.exports = () => {
const fs = require("fs");
const confDir = "/home/elal/.config/discocss";
const cssFile = "/home/elal/.config/discocss/custom.css";
function reload(style) {
style.innerHTML = fs.readFileSync(cssFile);
}
function inject({ document, window }) {
window.addEventListener("load", () => {
const style = document.createElement("style");
reload(style);
document.head.appendChild(style);
fs.watch(confDir, {}, () => reload(style));
});
}
inject(require("electron").webFrame.context);
};
module.exports.mw = (mainWindow) => {
mainWindow.setBackgroundColor("#00000000");
};
module.exports.mo = (options) => {
options.transparent = true;
if (process.platform === "linux") {
options.frame = true;
}
};
Loading…
Cancel
Save