zitadel/internal/ui/login/static/resources/themes/scss/light.scss

// ---- LIGHT-THEME-------
html {
    background-color: $backgroundColorLight;
    color: $fontColorLight;
    @if($bodyImgLight != "") {
        background-image: url($bodyImgLight);
    }
    
    header .logo {
        background-image: url($logoImgLight);
    }

    h1 {
        color: $fontColorLight;
    }

    button {
        background-color: $backgroundColorLight;
        color: $primaryColorLight;
        border: 2px solid $primaryColorLight;

        &:hover {
            background-color: $primaryColorHoverLight;
            border: 2px solid $primaryColorHoverLight;
        }

        &.primary {
            background-color: $primaryColor;
            color: $fontColor;
            border: none;
            box-shadow: 0px 10px 30px $primaryColor;
            &:hover {
                background-color: $primaryColorHover;
            }
        }

        &.clean {
            color: $fontColorLight;

            &:hover {
                border: none;
                background-color: $buttonBackgroundColorHoverLight;
            }
        }

        &.user-selection {
            .profile-image {
                @include retina-background-image($profileImgLight, "png", false, 100px, 100px);
            }

            &:hover {
                background-color: $buttonBackgroundColorHover;

                .profile-image {
                    @include retina-background-image($profileImgLight, "png", true, 100px, 100px);
                }
            }
        }

        &.other-user {
            .other-user-image {
                @include retina-background-image($otherUserImgLight, "png", false, 100px, 75px);
            }

            &:hover {
                .other-user-image {
                    @include retina-background-image($otherUserImgLight, "png", true, 100px, 75px);
                }
            }
        }
    }

    input:not([type='radio']), select {
        background-color: $inputBackgroundColorLight;
        color: $fontColorLight;
    }

    #qrcode {
        svg rect.color {
            fill: $fontColorLight;
        }

        svg rect.bg-color {
            fill: $backgroundColorLight;
        }
    }

    footer {
        @if($footerimgLight != "") {
            background-image: url($footerimgLight);
        }
    }
}