Themes

[waterrmalann]

Themes

This issue discusses the implementation of themes functionality which can enhance the visual appeal and the UX of the web app.

Implementation

Themes could easily be implemented by manipulating CSS root variables used to set the color via JavaScript.

Proposed Root Variables Structure:

:root {
    --primary-color: #ffffff;  /* The main color used for the background. */
    --primary-color-alt: #ffffff;  /* A darker version of the --primary-color */
    --primary-text-color: #ffffff;  /* The color of the text used above the --primary-color background. */ 

    --secondary-color: #ffffff;  /* Color used for the background of the sidebar */
    --secondary-color-alt: #ffffff;  /* A darker version of the --secondary-color */
    --secondary-text-color: #ffffff;  /* The color of the text used above the --secondary-color background. */

    --accent-color: #ffffff;  /* The color used for buttons and small elements. */
    --accent-color-alt: #ffffff;  /* A darker version of the --accent-color used when hovering/selected. */
    --acent-text-color: #ffffff;  /* The color of the text used above --accent-color backgrounds. */
    
    --card-color: #ffffff;  /* The color used for the task cards. */
    --card-color-alt: #ffffff;  /* A darker version of the --card-color used when hovering/selected */
    --card-text-color: #ffffff;  /* The color of the text used above --card-color backgrounds. */
    
    --item-color: #ffffff;    /* The color used for individual items of the cards. */
    --item-color-alt: #ffffff;  /* A darker version of the --item-color used when hovering/selected */
    --item-text-color: #ffffff;  /* The color of the text used above --item-color backgrounds. */

    /* additional variables for shadows could be added. */
    /* even more variables for custom fonts can be added. */
}

A few themes could be predefined such as a light theme and a dark theme, and the classic blue theme, perhaps even some more like cherry, a cream/pastel palette, etc...

Themes would be set through a settings menu, with support for definition of custom themes. They can be saved alongside kards-appData as an object named "theme" in the following format.

{
    "primaryColor": "#ffffff",
    "primaryColorAlt": "#ffffff",
    "primaryTextColor": "#ffffff",

    "secondaryColor": "#ffffff",
    "secondaryColorAlt": "#ffffff",
    "secondaryTextColor": "#ffffff",

    "accentColor": "#ffffff",
    "accentColorAlt": "#ffffff",
    "accentTextColor": "#ffffff",

    "cardColor": "#ffffff",
    "cardColorAlt": "#ffffff",
    "cardTextColor": "#ffffff",

    "itemColor": "#ffffff", 
    "itemColorAlt": "#ffffff",
    "itemTextColor": "#ffffff"
}

Smooth Theme Transitions

Some CSS transition properties on the background and card elements would make the transition of different themes look pretty neat, creating a smooth fade.

Board Specific Themes

A really cool idea is the setting of custom themes for individual boards. This would help easily distinguish between many boards that a user might have and takes personalization a step further. I don't think this is a necessary feature however and it might just end up raising the complexity of the already complex app. Still, it could be considered.