<NME> index.styl
<BEF> 
@import 'nib'

*
  margin: 0
  padding: 0

html, body
  height: 100%

body
  background-color: #f5f5f5
  overflow: hidden

  &.nightmode
    background-color: #0a0a0a

    .moon
      fill: #fff


      &:hover
        background-color: #fefefe
        fill: #000

#container
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  overflow: hidden

.moon
  position: fixed
  top: 0rem
  left: 0rem
  height: 1.25rem
  padding: 1rem
  cursor: pointer

  &:hover
    background-color: #0a0a0a
    background-color: #0a0a0a
    fill: #fff

@media (max-width: 1024px)
  .moon
    width: 1rem
    height: 1rem
  .ribbon
    transform: scale(.75)
    transform-origin: 100% 0

@media (max-width: 640px)
  .moon
    width: 1rem
    height: 1rem
  .ribbon
    transform: scale(.5)
    transform-origin: 100% 0

<MSG> Added transition to nightmode background color change

<DFF> @@ -11,10 +11,10 @@ html, body
 body
   background-color: #f5f5f5
   overflow: hidden
+  transition: background-color 0.25s linear;
 
   &.nightmode
     background-color: #0a0a0a
-
     .moon
       fill: #fff
 
@@ -38,6 +38,7 @@ body
   height: 1.25rem
   padding: 1rem
   cursor: pointer
+  transition: background-color 0.25s linear;
 
   &:hover
     background-color: #0a0a0a

Added transition to nightmode background color change