$light-bg: #d2c9a5; $light-bg-alt: #4b726e ; $light-fg: #4b3d44; $light-ln: #79444a ; $dark-bg: #4b3d44; $dark-bg-alt: #8caba1; $dark-fg: #d2c9a5; $dark-ln: #c77b58; $transition-time: 1s; body { &.light { background-color: $light-bg; color: $light-fg; } background-color: $dark-bg; color: $dark-fg; transition: $transition-time; } a { &.light { background-color: $light-ln; color: $light-bg; } background-color: $dark-ln; color: $dark-bg; transition: $transition-time; } a.footer-nav-item.active, a.footer-nav-item:hover { &.light { color: $light-bg-alt; background-color: $light-bg; border-color: $light-bg; } color: $dark-bg-alt; background-color: $dark-bg; border-color: $dark-bg; transition: 0.24s; } footer { &.light { background-color: $light-bg-alt; color: $light-bg; } background-color: $dark-bg-alt; color: $dark-bg; transition: $transition-time; } footer a { &.light { color: $light-bg; background-color: $light-bg-alt; } color: $dark-bg; background-color: $dark-bg-alt; transition: $transition-time; } .togglelabel { &.light { background-color: $light-bg-alt; border-color: $light-bg; } background-color: $dark-bg-alt; border-color: $dark-bg; transition: $transition-time; } .togglelabel.light::after { background-color: $light-bg; color: $light-bg-alt; transition: $transition-time; } .togglelabel::after { background-color: $dark-bg; color: $dark-bg-alt; transition: $transition-time; } body.light #title { color: $light-bg; background-color: $light-bg-alt; transition: $transition-time; } body #title { color: $dark-bg; background-color: $dark-bg-alt; transition: $transition-time; } article { &.light { background-color: $light-bg; border-color: $light-bg-alt; } background-color: $dark-bg; border-color: $dark-bg-alt; } article h2, article h3{ background-color: $dark-bg-alt; color: $dark-bg; } article.light h2, article.light h3{ background-color: $light-bg-alt; color: $light-bg; }