themes.css

:root {
    --dark-accent: #15141f;
    --primary: #765dee;
    --secondary: #503f98;
    --tertiary: #372b63;
    --background: #000000;
    --color: #e5e1ff;
    --accent-color: #151519;
    --accent-down: #100f16;
    --accent-tint: #141318;
    --hov-accent-color: #232128;
    --hov-color: #211f2b;
    --link-color: #9a86ff;
    --attachment-background-color: #4d3d94;
    --attachment-color: #c5b9ff;
    --attachment-background-color-hover: #765dee;
    --attachment-color-hover: #e9dff0;
    --button-color: #a39cc8;
    --hov-button-color: #e0d6ea;
    --modal-color: #0c0b0f;
    --modal-button-color: #15141b;
    --hov-modal-button-color: #252330;
    --hov-tint-color: #25222f;

    --animation: none;

    --blue: #00abd2;
    --hov-blue: #19cbf3;
    --green: #248046;
    --hov-green: #35a95f;
    --orange: #f9a636;
    --hov-orange: #fdae47;
    --red: #cc2936;
    --hov-red: #f23040;
    --magenta: #ee3c8c;
    --hov-magenta: #f74796;

    --color-on: #fefefe;

    --transition: all 0.05s ease;
    --border: none;
    --border-radius: 6px;
    --button-radius: 6px;
    --margin: 10px;
    --text-margin: 10px;
    --padding: 10px;
    --button-padding: 12px;
    --button-margin: 10px;
    --color-scheme: dark;
}

/* :root {
    --dark-accent: #15141f;
    --primary: #765dee;
    --secondary: #503f98;
    --tertiary: #372b63;
    --background: #1f1d29;
    --color: #e5e1ff;
    --accent-color: #2f2c3d;
    --accent-down: #201e2a;
    --accent-tint: #353246;
    --hov-accent-color: #4c4763;
    --hov-color: #696389;
    --link-color: #9a86ff;
    --attachment-background-color: #4d3d94;
    --attachment-color: #c5b9ff;
    --attachment-background-color-hover: #765dee;
    --attachment-color-hover: #e9dff0;
    --button-color: #a39cc8;
    --hov-button-color: #e0d6ea;
    --modal-color: #1f1d29;
    --modal-button-color: #2f2c3d;
    --hov-modal-button-color: #4c4763;
    --hov-tint-color: #514d6c;

    --animation: none;

    --blue: #00abd2;
    --hov-blue: #19cbf3;
    --green: #248046;
    --hov-green: #35a95f;
    --orange: #f9a636;
    --hov-orange: #fdae47;
    --red: #cc2936;
    --hov-red: #f23040;
    --magenta: #ee3c8c;
    --hov-magenta: #f74796;

    --color-on: #fefefe;

    --transition: all 0.05s ease;
    --border: none;
    --border-radius: 6px;
    --button-radius: 6px;
    --margin: 10px;
    --text-margin: 10px;
    --padding: 10px;
    --button-padding: 12px;
    --button-margin: 10px;
    --color-scheme: dark;
} */

.dark-theme {
    --primary: #765dee;
    --background: #000000;
    --color: #e5e1ff;
    --accent-color: #151519;
}

.light-theme {
    --dark-accent: #ece5ff;
    --primary: #765dee;
    --background: #f8f0ff;
    --color: #43485b;
    --accent-color: #ddd2f5;
    --accent-down: #bfb1de;
    --accent-tint: #f1e6ff;
    --hov-accent-color: #cec1ea;
    --hov-color: #dfd0ff;
    --link-color: #765dee;
    --attachment-background-color: #baaef8;
    --attachment-color: #513593;
    --attachment-background-color-hover: #765dee;
    --attachment-color-hover: #fefefe;
    --button-color: #756c85;
    --hov-button-color: #43485b;
    --modal-color: #f8f0ff;
    --modal-button-color: #cec1ea;
    --hov-modal-button-color: #ddd2f5;
    --hov-tint-color: #e3d2ff;

    --color-scheme: light;
}

.oled-theme {
    --background: #000;
    --color: #fefefe;
    --accent-color: #0d0e0f;
    --dark-accent: #000;
    --accent-down: #16191c;
    --hov-accent-color: #111214;
    --hov-color: #16191e;
    --link-color: #00abd2;
    
    --button-color: #a5abb3;
    --hov-button-color: #fefefe;
    --modal-color: #000;
    --modal-button-color: #0d0e0f;
    --hov-modal-button-color: #16191e;

    --accent-tint: #070709;
    --hov-tint-color: #0d0e0f;

    --color-scheme: dark;
}

.contrast-theme {
    --primary: #00f;
    
    --background: #0c0c0c;
    --color: #f0f0f0;
    --accent-color: #0c0c0c;
    --dark-accent: #0c0c0c;
    --accent-down: #0c0c0c;
    --hov-accent-color: #0c0c0c;
    --hov-color: #00f;
    --link-color: #0ff;
    --attachment-background-color: #00f;
    --attachment-color: #fff;
    --attachment-background-color-hover: #00f;
    --attachment-color-hover: #fff;
    --button-color: #f0f0f0;
    --hov-button-color: #f0f0f0;
    --modal-color: #0c0c0c;
    --modal-button-color: #0c0c0c;
    --hov-modal-button-color: #00f;

    --accent-tint: #0c0c0c;
    --hov-tint-color: #00f;

    --blue: #0ff;
    --hov-blue: #3ff;
    --green: #0f0;
    --hov-green: #3f3;
    --red: #f00;
    --hov-red: #f33;
    --magenta: #f0f;
    --hov-magenta: #f3f;

    --color-scheme: dark;
}

.grain-theme {
    --primary: #776d67;
    
    --background: #0b0b0b;
    --color: #f0f0f0;
    --accent-color: #111;
    --dark-accent: #0b0b0b;
    --accent-down: #212121;
    --hov-accent-color: #1a1a1a;
    --hov-color: #252525;
    --link-color: #00abd2;
    --attachment-background-color: #413d3a;
    --attachment-color: #afa7a1;
    --attachment-background-color-hover: #776d67;
    --attachment-color-hover: #fff;
    --button-color: #afa7a1;
    --hov-button-color: #f0f0f0;
    --modal-color: #111;
    --modal-button-color: #1a1a1a;
    --hov-modal-button-color: #252525;

    --accent-tint: #131313;
    --hov-tint-color: #1d1d1d;
}

.grip-theme {
    --primary: #f46f16;
    
    --background: #111114;
    --color: #f0f0f0;   
    --accent-color: #1f1e24;
    --dark-accent: #111114;
    --accent-down: #121116;
    --hov-accent-color: #32313a;
    --hov-color: #4a4854;
    --link-color: #00abd2;
    --attachment-background-color: #5b409b90;
    --attachment-color: #bea2ff;
    --attachment-background-color-hover: #765dee;
    --attachment-color-hover: #fefefe;
    --button-color: #a6a2ba;
    --hov-button-color: #f0f0f0;
    --modal-color: #1f1e24;
    --modal-button-color: #32313a;
    --hov-modal-button-color: #4a4854;

    --accent-tint: #222127;
    --hov-tint-color: #34333b;
}

.cosmic-theme {
    --primary: #8f8b7c;
    --background: #fff8e7;
    --color: #413f38;
    --accent-color: #f1ead9;
    --accent-down: #ebe1ca;
    --dark-accent: #e2dcce;
    --hov-accent-color: #d8d0bd;
    --hov-color: #e6ddc9;
    --link-color: #ad8335;
    --attachment-background-color: #e7d092;
    --attachment-color: #9d7222;
    --attachment-background-color-hover: #ad8335;
    --attachment-color-hover: #fefefe;
    --button-color: #8f8b7c;
    --hov-button-color: #413f38;
    --modal-color: #fff8e7;
    --modal-button-color: #f1ead9;
    --hov-modal-button-color: #e1daca;

    --accent-tint: #f7f0de;
    --hov-tint-color: #e2dbcc;

    --color-scheme: light;
}

.roarer-theme {
    --primary: #25a7de;
    --background: #020617;
    --color: #e2e8f0;
    --accent-color: #111827;
    --accent-down: #1f2937;
    --dark-accent: #020617;
    --hov-accent-color: #111827;
    --hov-color: #111827;
    --link-color: #38bdf8;
    --attachment-background-color: #1e293b;
    --attachment-color: #38bdf8;
    --attachment-background-color-hover: #1e293b;
    --attachment-color-hover: #e2e8f0;
    --button-color: #e2e8f0;
    --hov-button-color: #e2e8f0;
    --modal-color: #020617;
    --modal-button-color: #1e293b;
    --hov-modal-button-color: #2b3b54;
    --border: none;
    --border-radius: 0.5rem;
    --button-radius: 0.5rem;
    --margin: .25rem;
    --text-margin: .25rem;
    --padding: 8px;
    --button-padding: 8px;
    --button-margin: 8px;
    --color-scheme: dark;
    
    --accent-tint: #1e293b;
    --hov-tint-color: #2b3b54;
}

.evening-theme {
    --primary: #6a78ec;
    --dark-accent: #181825;
    --background: #1e1e2e;
    --color: #cdd6f4;
    --accent-color: #313244;
    --accent-down: #242532;
    --hov-accent-color: #45475a;
    --hov-color: #595e7d;
    --link-color: #89b4fa;
    --attachment-background-color: #5161ca;
    --attachment-color: #cdd6f4;
    --attachment-background-color-hover: #6a78ec;
    --attachment-color-hover: #e9dff0;
    --button-color: #7f849c;
    --hov-button-color: #cdd6f4;
    --modal-color: #181825;
    --modal-button-color: #313244;
    --hov-modal-button-color: #45475a;

    --accent-tint: #2f3042;
    --hov-tint-color: #4c4e6a;
}

.midnight-theme {
    --primary: #5677bd;
    --dark-accent: #181825;
    --background: #050812;
    --color: #fefefe;
    --accent-color: #0c121e;
    --accent-down: #070b14;
    --hov-accent-color: #111829;
    --hov-color: #162035;
    --link-color: #7b9adc;
    --attachment-background-color: #273656;
    --attachment-color: #7b9adc;
    --attachment-background-color-hover: #5677bd;
    --attachment-color-hover: #fefefe;
    --button-color: #5677bd;
    --hov-button-color: #fefefe;
    --modal-color: #0c121e;
    --modal-button-color: #162035;
    --hov-modal-button-color: #273656;

    --accent-tint: #0b1120;
    --hov-tint-color: #111829;
}

.lime-theme {
    --primary: #93c384;
    --secondary: #cbffb8;
    --background: #f8fbf1;
    --color: #4b6b43;
    --accent-color: #d7e8cd;
    --dark-accent: #eef5ea;
    --accent-down: #b6d3a3;
    --hov-accent-color: #c8e4b9;
    --hov-color: #d5f0c7;
    --link-color: #537e3b;
    --attachment-background-color: #bbf1a9;
    --attachment-color: #527d39;
    --attachment-background-color-hover: #537e3b;
    --attachment-color-hover: #bbf1a9;
    --button-color: #74a167;
    --hov-button-color: #3b6930;
    --modal-color: #f8fbf1;
    --modal-button-color: #d7e8cd;
    --hov-modal-button-color: #d5f0c7;
    
    --color-scheme: light;
}

.sage-theme {
    --primary: #60804e;
    --secondary: #cbffb8;
    --background: #0c0e08;
    --color: #e4ffdd;
    --accent-color: #2b3526;
    --dark-accent: #1a2015;
    --accent-down: #1d2419;
    --hov-accent-color: #4a5b41;
    --hov-color: #5c7051;
    --link-color: #bbf1a9;
    --attachment-background-color: #60804e;
    --attachment-color: #bbf1a9;
    --attachment-background-color-hover: #7ea268;
    --attachment-color-hover: #e4ffdd;
    --button-color: #a0b794;
    --hov-button-color: #e4ffdd;
    --modal-color: #2b3526;
    --modal-button-color: #4a5b41;
    --hov-modal-button-color: #5c7051;
    
    --color-scheme: dark;
}

.darflen-theme {
    --primary: #d14d65;
    --background: #16141d;
    --color: #e9e9e9;
    --accent-color: #1e1d27;
    --dark-accent: #16141d;
    --accent-down: #25242e;
    --hov-accent-color: #383645;
    --hov-color: #413f50;
    --link-color: #d14d65;
    --attachment-background-color: #6b2230;
    --attachment-color: #eb788d;
    --attachment-background-color-hover: #cd3c57;
    --attachment-color-hover: #f8c1cb;
    --button-color: #9894b9;
    --hov-button-color: #f6f5fb;
    --modal-color: #25242e;
    --modal-button-color: #383645;
    --hov-modal-button-color: #413f50;
}

/*Gradients*/

.pride-theme, .trans-theme, .teb-theme, .fabloo-theme, .nonb-theme {
    --background: #000;
    --color: #fefefe;
    --accent-color: #4749502f;
    --hov-accent-color: #111214;
    --hov-color: #16191e;
    --link-color: #00abd2;

    --button-color: #a5abb3;
    --hov-button-color: #fefefe;
    --modal-color: #000;
    --modal-button-color: #0d0e0f;
    --hov-modal-button-color: #16191e;

    --accent-tint: #000;
    --accent-down: #000;

    --color-scheme: dark;
}

.trans-theme {
    --primary: #1aa6ca;
    --color-on: #fff;
    --grad-height: 150px;
}

.pride-theme {
    --primary: #9443d1;
    --color-on: #fff;
    --grad-height: 150px;
}

.nonb-theme {
    --primary: rgb(252, 244, 52);
    --color-on: #fff;
    --grad-height: 150px;
}

.teb-theme {
    --primary: #4288bd;
    --background: #03080d;
    --hov-accent-color: #5c68782f;
    --hov-color: #6273882f;
    --grad-height: 600px;

    --button-color: #8ea5bb;
    --hov-button-color: #fefefe;

    --modal-color: #03080d;
    --modal-button-color: #101419;
    --hov-modal-button-color: #181e26;
}

.fabloo-theme {
    --primary: #da9019;
    --grad-height: 100%;

    --background: #000;
    --hov-accent-color: #8282822f;
    --hov-color: #7c7c7c2f;

    --button-color: #a8a8a8;
    --hov-button-color: #fefefe;
    
    --modal-color: #000000;
    --modal-button-color: #191919;
    --hov-modal-button-color: #252525;
}

.midnight-blurple-theme {
    --background: #070511;
    --accent-color: #1c1931;
    --hov-accent-color: #2c2751;
    --hov-color: #403965;
    --color: #fefefe;
    --modal-color: #080614;
    --modal-button-color: #1c1931;
    --hov-modal-button-color: #2c2751;
}

.meower-theme {
    --primary: #e48b26;
    --background: #181818;
    --accent-color: #202020;
    --hov-color: #303030;
    --hov-accent-color: #252525;
    --color: #fefefe;
    --modal-color: #202020;
    --modal-button-color: #303030;
    --hov-modal-button-color: #404040;
}

/*Unused*/

.flamingo-theme {
    --primary: #cc2936;
    --background: #0c0303;
    --color: #f5f8fb;
    --accent-color: #200a0f;
    --hov-accent-color: #250c12;
    --hov-color: #3a121c;
    --link-color: #00abd2;
    --attachment-background-color: #741b33;
    --attachment-color: #f93a69;
    --attachment-background-color-hover: #7236f9;
    --attachment-color-hover: #fefefe;
    --button-color: #7a2c3f;
    --hov-button-color: #f6f5fb;
    --modal-color: #0c0303;
    --modal-button-color: #200a0f;
    --hov-modal-button-color: #341019;
}

.glight-theme {
    --accent-color: #dddddd50;
    --hov-accent-color: #dddddd80;
    --hov-color: #dddddd80;
    --background: #ffffff80;
    --button-color: #efefefb6;
    --modal-color: #efefef47;
    --modal-button-color: #dddddd80;
    --hov-modal-button-color: #dddddd80;
    --border-radius: 5px;
    --button-radius: 5px;
}

.gdark-theme {
    --accent-color: #3c3c3c50;
    --hov-accent-color: #4f4f4f50;
    --hov-color: #3c3c3c80;
    --background: #00000020;
    --button-color: #ffffff73;
    --modal-color: #4f4f4f50;
    --modal-button-color: #4f4f4f50;
    --hov-modal-button-color: #4f4f4f50;
    --border-radius: 5px;
    --button-radius: 5px;
}

.oldlight-theme {
    --primary: #765dee;
    --background: #f1f0fb;
    --color: #43485b;
    --accent-color: #dad9e9;
    --hov-accent-color: #c7c6d8;
    --hov-color: #d0cfe3;
    --link-color: #765dee;
    --attachment-background-color: #baaef8;
    --attachment-color: #513593;
    --attachment-background-color-hover: #765dee;
    --attachment-color-hover: #fefefe;
    --button-color: #7b7783;
    --hov-button-color: #43485b;
    --modal-color: #dad9e9;
    --modal-button-color: #c7c6d8;
    --hov-modal-button-color: #bab9cb;
    --color-scheme: light;
}

.olderlight-theme {
    --primary: #b190fe;
    --background: #fefefe;
    --color: #383a41;
    --accent-color: #dbe0e8;
    --hov-accent-color: #d2d6dd;
    --hov-color: #e7eaee;
    --link-color: #5023b6;
    --attachment-background-color: #d4c1ff;
    --attachment-color: #513593;
    --attachment-background-color-hover: #b190fe;
    --attachment-color-hover: #fefefe;
    --button-color: #676d7a;
    --hov-button-color: #383a41;
    --modal-color: #fefefe;
    --modal-button-color: #dbe0e8;
    --hov-modal-button-color: #c9cdd4;
    --color-scheme: light;
}

.old-theme {
    --primary: #765dee;
    --secondary: #503f98;
    --tertiary: #372b63;
    --background: #1c1c26;
    --color: #fefefe;
    --accent-color: #2f3040;
    --dark-accent: #20202c;
    --hov-accent-color: #3e3f54;
    --hov-color: #4b4c66;
    --link-color: #a290ff;
    --attachment-background-color: #4d3d94;
    --attachment-color: #c5b9ff;
    --attachment-background-color-hover: #765dee;
    --attachment-color-hover: #fefefe;
    --button-color: #babbe2;
    --hov-button-color: #fefefe;
    --modal-color: #2f3040;
    --modal-button-color: #4b4c66;
    --hov-modal-button-color: #626386;
}

.older-theme {
    --primary: #714cc8;
    --secondary: #b190fe;
    --background: #1a1b1e;
    --color: #fefefe;
    --accent-color: #3a3d43;
    --hov-accent-color: #323439;
    --hov-color: #4a4d56;
    --link-color: #00abd2;
    --attachment-background-color: #3c286b;
    --attachment-color: #b190fe;
    --attachment-background-color-hover: #b190fe;
    --attachment-color-hover: #fefefe;
    --button-color: #a5abb3;
    --hov-button-color: #fefefe;
    --modal-color: #3a3d43;
    --modal-button-color: #4a4d56;
    --hov-modal-button-color: #636774;
}

.softblue-theme {
    --primary: #15a4c1;
    --secondary: #0f788e;
    --background: #1c1f26;
    --color: #fefefe;
    --accent-color: #2f3540;
    --hov-accent-color: #414959;
    --hov-color: #414959;
    --link-color: #00abd2;
    --attachment-background-color: #094c5b;
    --attachment-color: #15a4c1;
    --attachment-background-color-hover: #15a4c1;
    --attachment-color-hover: #fefefe;
    --button-color: #a5abb3;
    --hov-button-color: #fefefe;
    --modal-color: #3a3d43;
    --modal-button-color: #4a4d56;
    --hov-modal-button-color: #636774;
    --color-scheme: dark;
}

.quake-pro-theme {
    --border: none;
    --border-radius: 5px;
    --button-radius: 5px;
    --margin: 8px;
    --text-margin: 4px;
    --padding: 4px;
    --button-padding: 8px;
    --button-margin: 8px;
}

.scratch-theme {
    --primary: #765dee;
    --background: #f1f0fb;
    --color: #43485b;
    --accent-color: #dad9e9;
    --hov-accent-color: #dfdeed;
    --hov-color: #e6e3f0;
    --link-color: #765dee;
    --attachment-background-color: #d4c1ff;
    --attachment-color: #513593;
    --attachment-background-color-hover: #b190fe;
    --attachment-color-hover: #fefefe;
    --button-color: #a49faf;
    --hov-button-color: #7b7783;
    --modal-color: #dad9e9;
    --modal-button-color: #c6c5d6;
    --hov-modal-button-color: #cdcbdb;

    --color-scheme: light;
}

.blurple-theme {
    --primary: #5765f2;
    --background: #121117;
    --color: #f5f8fb;
    --accent-color: #22202c;
    --hov-accent-color: #2e2b3a;
    --hov-color: #2e2b3a;
    --link-color: #00abd2;
    --attachment-background-color: #1a1e49;
    --attachment-color: #a0a4d1;
    --attachment-background-color-hover: #5865f2;
    --attachment-color-hover: #fefefe;
    --button-color: #9792a9;
    --hov-button-color: #f6f5fb;
    --modal-color: #15141a;
    --modal-button-color: #24222f;
    --hov-modal-button-color: #302e3f;

    --color-scheme: dark;
}

.darker-theme {
    --background: #191b1b;
    --color: #faf9f8;
    --accent-color: #262829;
    --hov-accent-color: #212222;
    --hov-color: #3c3e3f;
    --link-color: #00abd2;
    --dark-accent: #141515;
    --button-color: #a5abb3;
    --hov-button-color: #fefefe;
    --modal-color: #0f1011;
    --modal-button-color: #333739;
    --hov-modal-button-color: #3b4042;

    --accent-tint: #232526;
    --hov-tint-color: #333739;

    --color-scheme: dark;
}

/*Other*/

.theme-buttons-inner {
    display: flex;
    align-items: center;
    flex-flow: wrap;
}

.theme-button {
    width: 6em;
    height: 6em;
    border-radius: 100%;
    margin: 5px;
    color: var(--color);
    border: 3px solid var(--accent-color);
    background: var(--background);
}

.selected {
    border: 3px solid var(--primary);
    box-shadow: none;
}