.color-mode{
    position: fixed;
    top: 30%;
    width: 100px;
    text-align: center;
    z-index: 999;
    padding: 20px 5px;
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
        input { 
            opacity: 0;
            width: 0;
            height: 0;
            &:checked + .slider{
                background-color: $accent-1;
            }
            &:focus + .slider {
                box-shadow: 0 0 1px $accent-1;
            }
            &:checked + .slider:before {
                -webkit-transform: translateX(26px);
                -ms-transform: translateX(26px);
                transform: translateX(26px);
            }
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 34px;
            &:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
                border-radius: 50%;
            }
            
        }
    }
      
}