website/web/templates/partials/themes.html

<!-- Theme helpers -->

<!-- Default profile header gradient colors -->
{{define "--prof-colorA"}}#0f81cc{{end}}
{{define "--prof-colorB"}}#7683cc{{end}}
{{define "--prof-card-bg"}}#485fc7{{end}}
{{define "--prof-card-fg"}}#f7f7f7{{end}}
{{define "--prof-link-fg"}}#0099ff{{end}}

{{define "profile-theme-hero-style"}}
{{$colorA := or (.GetProfileField "hero-color-start") "#0f81cc"}}
{{$colorB := or (.GetProfileField "hero-color-end") "#7683cc"}}
section.hero {
    background-image: linear-gradient(141deg, {{$colorA}}, {{$colorB}}) !important;
}
.hero h1.title {
    color: {{if eq (.GetProfileField "hero-text-dark") "true"}}#4a4a4a{{else}}#f5f5f5{{end}} !important;
}
{{end}}

<!-- Parameter: .User -->
{{define "profile-theme-style"}}
    {{$cardTitleBG := or (.GetProfileField "card-title-bg") "#485fc7"}}
    {{$cardTitleFG := or (.GetProfileField "card-title-fg") "#f7f7f7"}}
    {{$cardLinkFG := or (.GetProfileField "card-link-color") "#0099ff"}}
    {{$cardLightness := .GetProfileField "card-lightness"}}
    {{$heroA := or (.GetProfileField "hero-color-start") "#0f81cc"}}
    {{$heroB := or (.GetProfileField "hero-color-end") "#7683cc"}}
    <style type="text/css">
        /* Hero banner */
        .user-theme-hero {
            background-image: linear-gradient(141deg, {{$heroA}}, {{$heroB}}) !important;

            .title, .subtitle {
                color: {{if eq (.GetProfileField "hero-text-dark") "true"}}#4a4a4a{{else}}#f5f5f5{{end}} !important;
            }
        }

        /* Card Title colors */
        .user-theme-card-title {
            background-color: {{$cardTitleBG}} !important;

            * {
                color: {{$cardTitleFG}} !important;
            }

            .button.is-outlined {
                border-color: {{$cardTitleFG}} !important;
            }
        }

        /* Card Body colors */
        .user-theme-card-body {
            a {
                color: {{$cardLinkFG}} !important;
            }
        }

        /* Forced light theme overrides */
        {{if eq $cardLightness "light"}}
            .user-theme-card-body {
                background-color: #fff !important;
                color: #4a4a4a !important;

                * {
                    color: #4a4a4a !important;
                }

                a > * {
                    color: {{$cardLinkFG}} !important;
                }

                blockquote, pre, code, .tag {
                    background-color: #ccc !important;
                    color: #4a4a4a m !important;
                }

                .table {
                    background-color: inherit;
                }
            }
        {{else if eq $cardLightness "dark"}}
            .user-theme-card-body {
                    background-color: #4a4a4a !important;
                    color: #f5f5f5 !important;

                    * {
                        color: #f5f5f5 !important;
                    }

                    a > * {
                        color: {{$cardLinkFG}} !important;
                    }

                    blockquote, pre, code, .tag {
                        background-color: #1a1a1a !important;
                        color: #f5f5f5 m !important;
                    }

                    .table {
                        background-color: inherit;
                    }
                }
        {{end}}
    </style>
{{end}}