5/5/2024, 5:11 AM
THIS IS FOR THE GLOBAL CUSTOM CODE, ONLY VISBLE TO THE USER, NOT A CHARACTER CODE FOR OTHERS TO SEE!
For the below tutorial, I left the opacity numbers at the end since it felt like it was a good way to display how things may look -- if you want to change the opacity, Widow gave us this handy link to a site that helps explain how to alter it. Please be warned that these colors are not pretty or dull, and it’s only to display how to use the code and what exactly each line changes. If I’ve messed up somehow or left something out, don't be scared to tell me that I’m an idiot. Also, if there isn't a color dot next to something, it just means I made it white.
Please note that Widow is still customizing this code, so as of now the bottom lines (secondary and tertiary sections) do not change any colors. I’m also not sure what --base-bg-color: is, I’ve messed with it and haven't noticed anything.
Below is an EMPTY code -- all hex codes will be white.
![[Image: one-2.png]](https://i.ibb.co/WzsX6Nj/one-2.png)
![[Image: one-4.png]](https://i.ibb.co/xjLrppL/one-4.png)
![[Image: one-5.png]](https://i.ibb.co/DVcKT7P/one-5.png)
![[Image: one-6.png]](https://i.ibb.co/gFDfyQ4/one-6.png)
![[Image: one-8.png]](https://i.ibb.co/7vJxn7Q/one-8.png)
For the below tutorial, I left the opacity numbers at the end since it felt like it was a good way to display how things may look -- if you want to change the opacity, Widow gave us this handy link to a site that helps explain how to alter it. Please be warned that these colors are not pretty or dull, and it’s only to display how to use the code and what exactly each line changes. If I’ve messed up somehow or left something out, don't be scared to tell me that I’m an idiot. Also, if there isn't a color dot next to something, it just means I made it white.
Please note that Widow is still customizing this code, so as of now the bottom lines (secondary and tertiary sections) do not change any colors. I’m also not sure what --base-bg-color: is, I’ve messed with it and haven't noticed anything.
Below is an EMPTY code -- all hex codes will be white.
Code:
/* DARK MODE */
:root {
--banner-image: url('URL GOES HERE');
--banner-image-no-subject: url('/wcc_assets/themes/Vivarium/sonia4kres_dark_nosubject.png'); /* basically mimics banner but no subject for pattern purposes */
--banner-image-position: center center;
--texture-image: url(‘URL GOES HERE → try https://www.transparenttextures.com');
--banner-sname-color: #FFFFFF;
--banner-sname-hov-color: #FFFFFF;
--banner-sname-shadow-color: #FFFFFF;
--base-bg-color: #FFFFFF;
--base-bg-color-body-overlay: #FFFFFFF2;
--base-bg-color-faded: #FFFFFFD9;
--base-bg-color-muted: #FFFFFF;
--base-txt-color: #FFFFFF;
--base-txt-color-faded: #FFFFFFD9;
--base-txt-color-muted:#FFFFFF;
--base-lnk-color: #FFFFFF;
--base-lnk-hov-color: #FFFFFF;
--base-border-color: #FFFFFF4D;
--main-nav-bg-color: #FFFFFF;
--main-nav-bg-color-faded: #FFFFFF;
--main-nav-bg-color-muted: #FFFFFFA6;
--main-nav-txt-color: #FFFFFF;
--main-nav-lnk-color: #FFFFFF;
--main-nav-lnk-hov-color: #FFFFFF;
--box-bg-color: #FFFFFF1A;
--box-alt-bg-color: #FFFFFF1A;
--primary-accent-color: #FFFFFF;
--primary-accent-color-faded: #FFFFFFD9;
--primary-accent-color-muted: #FFFFFFA6;
--secondary-accent-color: #FFFFFF;
--secondary-accent-color-faded: #FFFFFFD9;
--secondary-accent-color-muted: #FFFFFFA6;
--tertiary-accent-color: #FFFFFF;
--tertiary-accent-color-faded: #FFFFFFD9;
--tertiary-accent-color-muted: #FFFFFFA6;
}
