mainsail-theme-elegance

This theme allows you to easily select or create your own colour scheme.

Please edit theme.css to try another colour, animated gradient transition theme, SVG image theme. The screenshots don't do the schemes justice, so please, try each of them out.

Install

• Create or clear the ".theme" folder inside your Klipper config folder. Example: ~/printer_data/config/.theme/
• Copy all files from here inside the ".theme" folder.
• Edit custom.css to modify the colour scheme. VSCode has a built in colour picker.
• background: linear-gradient(225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%);

Why this theme?

• We found the stock theme a little too dark.
• Certain elements have a higher contrast to lessen them blending.
• Some rarely used elements were distracting being different colours.
• Transparent navigation panels.

Gallery

Blue theme 1

Blue theme 2

Blue theme 3

Purple theme 1

Purple theme 2

SVG theme

Animated gradient theme (no image)

Try out different themes - edit custom.css

    /* Find this and uncomment the background colour you'd like */
    main#content {
        background-size: 100% 100%;

        /* Blue theme 1 - Default */
        background: linear-gradient(to left, #8f94fb, #4e54c8);
        /* Blue theme 2 */
        /*background: linear-gradient(45deg, #001f5c, #55bbff);*/
        /* Blue theme 3 */
        /*background: linear-gradient(225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%);*/
        /* Purple theme 1 */
        /*background: linear-gradient(45deg, #ab19ff, #9019ff, #5a02ff);*/
        /* Purple theme 2 */
        /*background: linear-gradient(270deg, #9019ff, #b253ff, #5a02ff);*/
    }
    ...