EUC Forum Dark Mode v1.0

/*
Since our https://forum.electricunicycle.org/ does not have alternative themes and having only bright white colors can be super blinding (it was to me) and exhausting for the eyes when it's dark, I decided to cook up a way for any forum member to get access to a Dark Mode - and a possibility to customize it as we all like completely different things and I know many will not like the main accent colors that I like.
So I wrote all this up to change the existing forum colors and in a way where you can change the "--custom-<yada_yada>" RGB color values and most of the site will change along.

Feel free to experiment and adjust the colors to your liking or change specific elements to whatever you like. I just wanted to give our community prolonged eyesight and comfort. :D

I also tried commenting/describing most things I've changed so it's somewhat easier to decypher what is what as it took a while to track most things, if you want to change more than just my "--custom-" values - so the "--theme-" ones - you'll need to tinker for a while as some don't explain well what they're used for or where you'd find those.

To use all of this, add the Stylebot extension to your browser (available to Chrome/Firefox/Edge at the moment https://stylebot.dev/)
and when on the EUC Forum page, click the icon and "Open Stylebot", then paste all of this in.

Original topic with more information and instructions at https://forum.electricunicycle.org/topic/39676-i-made-dark-mode-for-this-forum
Brought to you by yours truly, Phonoman.
*/

:root {
  /* EASY-MODE */
  /* You can edit all changed colors in bulk here. */
  /* Just google "RGB color picker" to experiment with colors more easily. */
  --custom-dark_1: 0, 0, 0;
  --custom-dark_2: 11, 11, 11;
  --custom-dark_3: 35, 35, 35;
  --custom-most_fonts: 200, 200, 200;
  /* If primary accents (most titles/headings, some elements) feel too bright, you can try replacing with a darker version - 0, 89, 79 */
  --custom-primary_accents: 5, 150, 150;
  --custom-secondary_accents: 69, 110, 110;
  --custom-third_accents: 5, 105, 105;
  --custom-post_background: 21, 21, 21;
  --custom-small_details: 5, 70, 70;
  --custom-search_bar: 5, 50, 50;
  --custom-pager_background: 14, 14, 14;
  /* Set this to opposite of what you want as it will be inverted for colors to contrast correctly - so to have max black panel set this to max white. */
  --custom-text_editor_panel: 255, 255, 255;

  /* ADVANCED */
  /* Majority of overriden forum colors. */
  --theme-text_color: var(--custom-most_fonts);
  --theme-section_title: var(--custom-dark_1);
  --theme-text_dark: var(--custom-most_fonts);
  --theme-area_background: var(--custom-dark_2);
  --theme-page_background: var(--custom-dark_2);
  --theme-area_background_reset: var(--custom-post_background);
  --theme-area_background_light: var(--custom-dark_3);
  --theme-main_nav: var(--custom-dark_1);
  --theme-main_nav_tab: var(--custom-dark_3);
  --theme-main_nav_tab_font: var(--custom-most_fonts);
  --theme-light_button: var(--custom-small_details);
  --theme-light_button_font: var(--custom-most_fonts);
  --theme-very_light_button: var(--custom-third_accents);
  --theme-very_light_button_font: var(--custom-most_fonts);
  --theme-primary_button: var(--custom-third_accents);
  --theme-important_button: var(--custom-third_accents);
  --theme-active_input_border: var(--custom-third_accents);
  --theme-widget_title_bar: var(--custom-dark_2);
  --theme-widget_title_font: var(--custom-most_fonts);
  --theme-tab_background: var(--custom-dark_3);
  --theme-section_title_font: var(--custom-most_fonts);
  --theme-header: var(--custom-dark_2);
  --theme-header_text: var(--custom-most_fonts);
  --theme-comment_count: var(--custom-most_fonts);
  --theme-item_status: var(--custom-third_accents);
  --theme-notification_bubble: var(--custom-primary_accents);
  --theme-tag: var(--custom-secondary_accents);
  --theme-tag_font: var(--custom-most_fonts);
  --theme-item_status: var(--custom-primary_accents);
  --theme-mentions: var(--custom-primary_accents);
  --theme-link_button: var(--custom-primary_accents);
  --theme-featured: var(--custom-primary_accents);
  --theme-button_bar: var(--custom-pager_background);

  /* Featured/pinned topics star symbol background */
  --positive-light: rgb(var(--custom-most_fonts));
  /* Border shadow for most elements */
  --box--boxShadow: 0px 2px 4px -1px rgba(var(--custom-secondary_accents), 0.3);
}

/* Users */
a.ipsType_break {
  color: rgb(var(--custom-primary_accents));
}

/* Searchbar */
#elSearch{
  background: rgb(var(--custom-search_bar));
  color: rgb(var(--custom-most_fonts));
}

/* Logo */
#elLogo img {
  background: url("https://i.ibb.co/2cyChy8/electric-unicycle-logo.png") top right no-repeat;
  height: 0;
  width: 0;
  padding: 150px 400px 0 0; /* Insert actual image size (height width 0 0) */
}

/* CKEditor restore message */
div[data-role~="autoSaveRestoreMessage"]  {
 background: rgb(var(--custom-third_accents))
}

/* CKEditor panel */
.cke_reset_all {
  background-color: rgb(var(--custom-text_editor_panel));
  filter: invert(1) hue-rotate(180deg);
}

/* Main forum sections */
div h4 a {
  color: rgb(var(--custom-primary_accents));
}

/* Sidebar titles */
.ipsDataItem_title {
  color: rgb(var(--custom-primary_accents));
}

/* Main forum section last thread title */
li.ipsDataItem_lastPoster__title a {
  color: rgb(var(--custom-primary_accents));
}

/* Users in the same post */
.ipsLiveActivity {
  background: rgb(var(--custom-small_details));
  color: rgb(var(--custom-most_fonts));
}

/* Start new topic button */
a.ipsButton.ipsButton_link.ipsButton_medium.ipsButton_fullWidth {
  border-color: rgb(var(--custom-secondary_accents));
  color: rgb(var(--custom-secondary_accents));
}

/* Comment history button */
aside > ul > li.ipsMargin_top > ul > li > a {
  color: rgb(var(--custom-primary_accents));
}

/* Few links when creating a post */
a.ipsCursor_pointer {
  color: rgb(var(--custom-primary_accents));
}

/* Breadcrumbs */
.ipsBreadcrumb a {
    color: rgb(var(--custom-secondary_accents));
}

/* Leaderboard topic titles */
#ipsTabs_elTabBar_elTableaderboard_panel > section > div h2 a {
  color: rgb(var(--custom-primary_accents));
}

/* Grid view forum section titles */
div.ipsForumGrid h3 a {
  color: rgb(var(--custom-primary_accents));
}

/* Self profile post titles */
#elProfileActivityOverview h2 a {
  color: rgb(var(--custom-primary_accents));
}
/* Self profile bar  */
#elProfileStats {
  background-color: rgb(var(--custom-dark_1));
}

/* Notification view all link */
div.ipsMenu_footerBar a {
  color: rgb(var(--custom-primary_accents));
}

/* Recently browsing user at frontpage */
div[data-controller~="core.front.core.onlineUsersWidget"] a {
  color: rgb(var(--custom-primary_accents));
}

/* All activity listing post titles */
div.ipsPhotoPanel > div > h2 > span > a {
  color: rgb(var(--custom-primary_accents));
}

/* Profile currently doing what in forum */
#elProfileInfoColumn > div span.ipsDataItem_main.ipsType_break a {
  color: rgb(var(--custom-primary_accents));
}

/* /online user activity links  */
#ipsLayout_mainArea > div.ipsBox > div > ol > li > div > div > p.ipsType_reset.ipsTruncate.ipsTruncate_line.ipsType_break > a {
  color: rgb(var(--custom-third_accents));
}

/* Scrollbar settings below */
body::-webkit-scrollbar {
  width: 12px;
}
/* Scrollbar background color */
body::-webkit-scrollbar-track {
  background: rgb(var(--custom-dark_3));
}
/* Scrollbar main piece */
body::-webkit-scrollbar-thumb {
  background-color: rgb(var(--custom-third_accents));
  border-radius: 20px;
  border: 2px solid black;
}