Theming with SASS

I was recently working on a single page web app with basically HTML, SCSS and JavaScript. I configured an onClick event to toggle a class name, which is the basic way to change themes. A lot of times theming is just changing the background of the body and the color of elements displayed in it. However, with nesting in SASS I was able to not just change the basic background and text colors but also to nest elements I wanted to be affected by that class and change different aspects of them for a much more complex theme experience. This is obviously achievable with Vanilla CSS but nesting in SASS makes it much easier to do. Below is a basic example;

.lightTheme {
    background-color: $clr-white;
    color: $clr-black;

    .main-section {
        div[class="header"] {

            span[id="dark"] {
                display: flex !important;
                color: $clr-grey;
            }

            span[id="light"] {
                display: none;
            }

        }
    }

    div[class="search-bar"] {
        background-color: $clr-white;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

        input {
            background-color: $clr-white;
            color: $clr-grey;
        }

        ::placeholder {
            color: $clr-grey;
        }
    }

    div[class="user-card-component"] {
        background-color: $clr-white;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

    div[class="user-card-component-details"] {

        div[class="user-info"] {

            div[class="user-info-details"]>span {
                span {
                    color: $clr-grey;
                }
            }

            div[class="user-info-stats"] {
                background-color: $clr-blue;

                h4 {
                    color: $clr-white;
                }

                p {
                    color: $clr-white;
                }
            }
        }
    }
}