Dark Mode, but for the exported Profile Command Sheets

[Clonephaze]

The default HTML export currently only includes colors for light mode users. However, light-dark color support is baseline in modern browsers, and we can enhance the styling to properly support both light and dark themes while ensuring older browsers still display a functional light mode. I personally think the below approach keeps a nice clean look in both light and dark modes, and it makes sure to provide a light mode fallback.

Code: [Select]

<style type='text/css'>
    :root {
        color-scheme: light dark;
    }

    body {
        color: #1d1d1d;
        background-color: #efedea;
    }

    @supports (color: light-dark(black, white)) {
        body {
            color: light-dark(#1d1d1d, #efefec);
            background-color: light-dark(#efedea, #202020);
        }
    }

    TH {
        text-align: left;
        padding-left: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        background-color: #e0e0e0;
        color: #000;
        white-space: nowrap;
    }

    TD {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    TR.r0 {
        background-color: #ffffff;
    }

    TR.r1 {
        background-color: #f2f5ff;
    }

    TABLE {
        width: 100%;
        font-family: Calibri, Tahoma, Arial;
    }

    .tbl {
        font-size: 14px;
        border-style: solid;
        border-width: 1px;
        border-color: #d0d0d0;
    }

    .tbl tr:nth-child(2n) {
        background-color: #f2f5ff;
    }

    .tbl tr:nth-child(2n+1) {
        background-color: #ffffff;
    }

    .tblHeader {
        font-size: 18px;
        color: #ffffff;
        background-color: #000000;
        font-weight: bold;
        font-family: Calibri, Tahoma, Arial;
        border-style: inset;
        border-width: 2px;
    }

    @supports (color: light-dark(black, white)) {
        TH {
            background-color: light-dark(#e0e0e0, #333);
            color: light-dark(#000, #fff);
        }

        TR.r0 {
            background-color: light-dark(#ffffff, #2a2a2a);
        }

        TR.r1 {
            background-color: light-dark(#f2f5ff, #3a3a3a);
        }

        .tbl {
            border-color: light-dark(#d0d0d0, #444);
        }

        .tbl tr:nth-child(2n) {
            background-color: light-dark(#f2f5ff, #3a3a3a);
        }

        .tbl tr:nth-child(2n+1) {
            background-color: light-dark(#ffffff, #2a2a2a);
        }

        .tblHeader {
            color: light-dark(#ffffff, #dddddd);
            background-color: light-dark(#000000, #555);
        }
    }

    thead {
        cursor: pointer;
    }
</style>


[Gary]

Thanks for that - I'll see what I can do