DaisyUI Pt 2: Refactoring a Theme

Building good websites boils down to making things work and making things look pretty. That latter effort can take the most time to accomplish. It might be fun to dive deeply into CSS, but we need discipline or a good design system to ensure it stays consistent, flexible, and maintainable.

Integration

Installing and integrating daisyUI was a simple two-step process. That said, my initial CSS style contained two classes which conflicted with dailyUI and basically broke my site header and footer. Once I renamed those, I could continue with my refactor on an agile basis.

Theme Refactor

The existing theme design framework was inspired by other frameworks, which as it so happens is similar to how daisyUI does themes. Some of the variable names differ and daisyUI includes a few additional variables that make it more flexible. So step one is rename my variables to align with daisyUI and then add the additional variables.

Original theme format:

.lt-theme {
 --primary: #ffffff;
 --on-primary: #181818;

 --secondary: #d4dfca;
 --on-secondary: #333333;

 --accent: #81B18C;
 --on-accent: 5, 5, 5;

 --background: #e8efe1;
 --on-background: #fefefe;
 
 --surface: #141610;
 --on-surface: #fefefe;
}
.dk-theme {
 --primary: #000000;
 --on-primary: #ffffff;

 --secondary: #1b2015;
 --on-secondary: #c7c7c7;

 --accent: #81B18C;
 --on-accent: 254, 254, 254;

 --background: #141610;
 --on-background: #ececec;

 --surface: #000000;
 --on-surface: #bcb9b9;
}

New theme format based on DaisyUI variables:

.lt-theme {
 --primary: #ffffff;
 --primary-content: #181818;
 --primary-focus: TBD;

 --secondary: #d4dfca;
 --secondary-content: #333333;
 --secondary-focus: TBD;

 --accent: #81B18C;
 --accent-content: 5, 5, 5;
 --accent-focus: TBD;

 /* replace surface? */
 --neutral: #141610;
 --neutral-content: #fefefe;
 --neutral-focus: TDB;

 /* replace background */
 --base-100 : #e8efe1; /* Base color of page, used for blank backgrounds */
 --base-200 : TBD; /* Base color, a little darker */
 --base-300 : TBD; /* Base color, even more darker */
 --base-content : #fefefe; /* Foreground content color to use on base color */

 --info: #2094f3;
 --success: #009485;
 --warning: #ff9900;
 --error: #ff5724;
}
.dk-theme {
 --primary: #000000;
 --primary-content: #ffffff;
 --primary-focus: TBD;

 --secondary: #1b2015;
 --secondary-content: #c7c7c7;
 --secondary-focus: TBD;

 --accent: #81B18C;
 --accent-content: 254, 254, 254;
 --accent-focus: TBD;

 /* replace surface? */
 --neutral: #000000;
 --neutral-content: #bcb9b9;
 --neutral-focus: TBD;

 /* replace background */
 --base-100 : #141610; /* Base color of page, used for blank backgrounds */
 --base-200 : TBD; /* Base color, a little darker */
 --base-300 : TBD; /* Base color, even more darker */
 --base-content : #ececec; /* Foreground content color to use on base color */

 --info: #2094f3;
 --success: #009485;
 --warning: #ff9900;
 --error: #ff5724;
}

Looks like my current theme doesn't account for CSS items that are in focus. Not sure how to handle my 'surface' items yet, but I'll keep it under 'neutral' for now. Might be that I'll need to keep them as custom variables. Also, I had only accounted for one base (e.g. background) color in my theme. I'll need to enhance my color pallete some.

More to come!