Choose Your Colors en

Installations 2 Likes 1

Please note that this is not a complete theme. No adjustments have been made to the layout of the website, except for the colors. I have organized the variables used for coloring the website and made slight modifications to facilitate customization of the color theme on your own page.

To get started, simply install this plugin and create the following style in your "Theming" section.

:root {

/****** BACKGROUND ******/

    /* main background (0 0% 96%)*/
    --main-bck-col: 0 0% 86%;
    /* main background shadow (0 0% 93%)*/
    --main-shade-col: 0 0% 73%;
    /* outside text (110 15% 15%)*/
    --main-text-col: 110 15% 15%;
    /* top background (0 0% 100%)*/
    --top-bck-col: 40 40% 20%;
    /* bottom background (0 0% 100%)*/
    --bottom-bck-col: 0 0% 86%;
    /* search background (0 0% 100%)*/
    --srch-bck-col: 0 0% 86%;
/****** TILES ******/
    /* background (0 0% 100%)*/
    --tile-bck-col: 0 0% 100%;
    /* borders (220 22% 92%)*/
    --tile-bord-col: 220 22% 92%;
    /* page text (110 15% 15%)*/
    --tile-text-col: 110 15% 15%;
    /* alert bar (198 93% 80%)*/
    --tile-alert-col: 198 93% 80%;
/****** LINKS ******/
    /* color (202 52% 49%)*/
    --link-col: 10 52% 49%;
    /* highlight (202 52% 34%)*/
    --link-high: 10 52% 34%;
/****** TABLES ******/
    /* table highlight (100 10% 10%)*/
    --tab-hov: 100 10% 10%;
    /* table 2nd background (0 0% 86%)*/
    --tab-2nd-row-col: 0 0% 86%;
/****** SIDEBAR ******/
    /* sidebar background (0 0% 20%)*/
    --side-bck-col: 40 40% 20%;
    /* sidebar text (0 0% 90%)*/
    --side-text-col: 77 10% 90%;
    /* sidebar highlight (0 0% 10%)*/
    --side-high-col: 0 0% 10%;

/****** THE 3 BUTTONS ******/
   
    /* base body (--main-shade-col)*/
    --btn-base-col: var(--main-shade-col);
    /* base text (--tile-text-col)*/  
    --btn-base-txt-col: var(--tile-text-col);
    
    /* primary body (--link-col)*/
    --btn-prime-col: var(--link-col);
    /* primary text (--tile-bck-col)*/
    --btn-prime-txt-col: var(--tile-bck-col);
    
    /* warning body (0 91% 71%)*/
    --btn-warn-col: 0 91% 71%;
    /* warning text (--tile-text-col)*/
    --btn-warn-txt-col: var(--tile-text-col);
}

Then customize the color values according to your preferences using the HSL color scheme.

Latest version 1.0 View content

Released 5 months ago

First version, no bugs found yet.

Plugin CSS for 1.0


:root {
    
/****** BACKGROUND ******/
    /* main background (0 0% 96%)*/
    --main-bck-col: 0 0% 86%;
    /* main background shadow (0 0% 93%)*/
    --main-shade-col: 0 0% 73%;
    /* outside text (110 15% 15%)*/
    --main-text-col: 110 15% 15%;
    /* top background (0 0% 100%)*/
    --top-bck-col: 40 40% 20%;
    /* bottom background (0 0% 100%)*/
    --bottom-bck-col: 0 0% 86%;
    /* search background (0 0% 100%)*/
    --srch-bck-col: 0 0% 86%;

/****** TILES ******/
    /* background (0 0% 100%)*/
    --tile-bck-col: 0 0% 100%;
    /* borders (220 22% 92%)*/
    --tile-bord-col: 220 22% 92%;
    /* page text (110 15% 15%)*/
    --tile-text-col: 110 15% 15%;
    /* alert bar (198 93% 80%)*/
    --tile-alert-col: 198 93% 80%;

/****** LINKS ******/
    /* color (202 52% 49%)*/
    --link-col: 10 52% 49%;
    /* highlight (202 52% 34%)*/
    --link-high: 10 52% 34%;

/****** TABLES ******/
    /* table highlight (100 10% 10%)*/
    --tab-hov: 100 10% 10%;
    /* table 2nd background (0 0% 86%)*/
    --tab-2nd-row-col: 0 0% 86%;

/****** SIDEBAR ******/
    /* sidebar background (0 0% 20%)*/
    --side-bck-col: 40 40% 20%;
    /* sidebar text (0 0% 90%)*/
    --side-text-col: 77 10% 90%;
    /* sidebar highlight (0 0% 10%)*/
    --side-high-col: 0 0% 10%;


/****** THE 3 BUTTONS ******/
   
    /* base body (--main-shade-col)*/
    --btn-base-col: var(--main-shade-col);
    /* base text (--tile-text-col)*/  
    --btn-base-txt-col: var(--tile-text-col);
    
    /* primary body (--link-col)*/
    --btn-prime-col: var(--link-col);
    /* primary text (--tile-bck-col)*/
    --btn-prime-txt-col: var(--tile-bck-col);
    
    /* warning body (0 91% 71%)*/
    --btn-warn-col: 0 91% 71%;
    /* warning text (--tile-text-col)*/
    --btn-warn-txt-col: var(--tile-text-col);
}
    
    
:root {
    --content-wrapper-background: hsl(var(--main-bck-col)/1);
    --body-background: hsl(var(--bottom-bck-col)/1);
    
    --inc: var(--tile-text-col);
    --suc: var(--tile-text-col);
    --wac: var(--tile-text-col);
    --erc: var(--tile-text-col);
    --sc: var(--tile-text-col);
    --ac: var(--tile-text-col);
    --bc: var(--tile-text-col);
    --b1: var(--tile-bck-col);
    --b2: var(--main-shade-col);
    --b3: var(--tab-2nd-row-col);
    --n: var(--tile-bord-col);
    --si: var(--side-bck-col);
    --sic: var(--side-text-col);
    --sif: var(--side-high-col);
}

a {
    --p: var(--link-col);
    --pf: var(--link-high);
}

input {
    --p: var(--link-col);
    --pc: var(--b3)
}

.achievements {
    --p: var(--surface0);
    --wac: var(--surface0)
}

.bg-base-100 {
    --b1: var(--top-bck-col);
}

#entity-lookup,
.toggle-and-search .w-sidebar {
    background-color: hsl(var(--srch-bck-col)/var(--tw-bg-opacity));
}

.table-hover tbody tr:hover {
    --b2: var(--tab-hov);
}
.main-footer,
#main-content .entity-sidebar,
#main-content .entity-main-block .post-header,
#main-content .entity-name-header {
    --bc: var(--main-text-col);
    color: var(--body-text, hsl(var(--bc)/var(--tw-text-opacity)));
}


.btn2 {
    --b2: var(--btn-base-col);
    --bc: var(--btn-base-txt-col);
}

.btn2.btn-primary {
    --p: var(--btn-prime-col);
    --pc: var(--btn-prime-txt-col);
}

.btn2.btn-error {
    --er: var(--btn-warn-col);
    --erc: var(--btn-warn-txt-col);
}


.alert {
    --alert-bg: hsl(var(--b2)/1);
    --b2: var(--tile-alert-col);
}