[PROFILE FIELD] Global Complete Theme Customization

Admin · 2/27/2023

For those that are not a fan of any of the themes (colors/imagery sets) you can globally override these with your own custom theme. Or you can just override certain aspects for font size, banner heights, fonts, etc. This is a semi complex process but once you get the hang of it it should be a smooth process.

config.css
The configuration CSS file holds fonts, sizes, widths, and heights. These belong in the main :root section but you can change this on light mode as well if you wanted to for some reason.

Code:
:root {

 /* FONT FAMILIES */

 --base-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

 --accent-font-family: 'Natural Precision', sans-serif;

 --header-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

 --serif-font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

 --sans-serif-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

 --monospace-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

 /* FONT CALCS & SETTINGS */

 --base-font-size: calc(14px + 0.090625vw); /* i do not suggest changing the vw specs, only the px */

 --base-line-height: 1.4;

 /* WIDTHS */

 --forum-wrap-max-width: 1500px; 

 /* HEIGHTS */

 --banner-index-height: 55vh;

 --banner-index-guest-height: 91vh;

}

theme.css
Holds colors and imagery. AKA the "pretty" parts.

Code:
/* DARK MODE */

:root {

    --banner-image: url('/wcc_assets/themes/Vivarium/sonia4kres_dark.png');

    --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('https://www.transparenttextures.com/patterns/asfalt-dark.png');

 --banner-sname-color: #faf5f1;

 --banner-sname-hov-color: #A35154;

 --banner-sname-shadow-color: #060817;

 --base-bg-color: #151821;

 --base-bg-color-body-overlay: #151821F2;

 --base-bg-color-faded: #151821D9;

 --base-bg-color-muted: #151821A6;

 --base-txt-color: #9f9eaa;

 --base-txt-color-faded: #9f9eaaD9;

 --base-txt-color-muted: #9f9eaa66;

 --base-lnk-color: #617fa4;

 --base-lnk-hov-color: #A35154;

 --base-border-color: #9f9eaa4D;

 --main-nav-bg-color: #f2f2f2;

 --main-nav-bg-color-faded: #f2f2f2D9;

 --main-nav-bg-color-muted: #f2f2f2A6;

 --main-nav-txt-color: #48484c;

 --main-nav-lnk-color: #33537B;

 --main-nav-lnk-hov-color: #548BA5;

 --box-bg-color: #53798b1A;

 --box-alt-bg-color: #548BA51A;

 --primary-accent-color: #548BA5;

 --primary-accent-color-faded: #548BA5D9;

 --primary-accent-color-muted: #548BA5A6;

 --secondary-accent-color: #A35154;

 --secondary-accent-color-faded: #A35154D9;

 --secondary-accent-color-muted: #A35154A6;

 --tertiary-accent-color: #79ACB0;

 --tertiary-accent-color-faded: #79ACB0D9;

 --tertiary-accent-color-muted: #79ACB0A6;

}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */

[data-theme="dark"] {

    --banner-image: url('/wcc_assets/themes/Vivarium/sonia4kres.png');

    --banner-image-no-subject: url('/wcc_assets/themes/Vivarium/sonia4kres_nosubject.png'); /* basically mimics banner but no subject for pattern purposes */

 --texture-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');

 --base-bg-color: #eeeae5;

 --base-bg-color-body-overlay: #eeeae5F2;

 --base-bg-color-faded: #e1dad3D9;

 --base-bg-color-muted: #e1dad3A6;

 --base-txt-color: #252e3c;

 --base-txt-color-faded: #252e3cD9;

 --base-txt-color-muted: #252e3c66;

 --base-lnk-color: #894C45;

 --base-lnk-hov-color: #BC735D;

 --base-border-color: #252e3c4D;

 --main-nav-bg-color: #2e3a4b;

 --main-nav-bg-color-faded: #2e3a4bD9;

 --main-nav-bg-color-muted: #2e3a4bA6;

 --main-nav-txt-color: #A7ADAF;

 --main-nav-lnk-color: #E7D3BF;

 --main-nav-lnk-hov-color: #E5A180;

 --box-bg-color: #778EA01A;

 --box-alt-bg-color: #A385871A;

}

Usage
1. Within your "Global Complete Theme Customization" profile field insert the following:

Code:
/* DARK MODE */

:root {

}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */

[data-theme="dark"] {

}

2. From here implement the variables you wish to change: As an example I'm going to change the font family of accent titles (and import a new one), font size, line height, forum max width, and the navigation colors.
Note: This theme was made with hexcodes only in mind. You may attempt to use an alternative but it may not work properly on some functions. If you are unfamiliar with how to create opacity variants on hexcodes check out this guide (you'll use the opacity's Hex Code value after the 6 digit hex.

Code:
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');

/* DARK MODE */

:root {

 --base-font-size: calc(16px + 0.090625vw); /* i do not suggest changing the vw specs, only the px */

 --base-line-height: 1.5;

 --forum-wrap-max-width: 1200px; 

 --accent-font-family: "Jersey 15", sans-serif;

 --main-nav-bg-color: #somecolorhexhere;

 --main-nav-bg-color-faded: #somecolorhexhere;

 --main-nav-bg-color-muted: #somecolorhexhere;

 --main-nav-txt-color: #somecolorhexhere;

 --main-nav-lnk-color: #somecolorhexhere;

 --main-nav-lnk-hov-color: #somecolorhexhere;

}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */

[data-theme="dark"] {

 --main-nav-bg-color: #somecolorhexhere;

 --main-nav-bg-color-faded: #somecolorhexhere;

 --main-nav-bg-color-muted: #somecolorhexhere;

 --main-nav-txt-color: #somecolorhexhere;

 --main-nav-lnk-color: #somecolorhexhere;

 --main-nav-lnk-hov-color: #somecolorhexhere;

}

Welcome Back!

Greetings Stranger!

Administrator