enable darkmode

weru

20.39.2020 2c9ae04dcdd844af2112770f88f77ec764fb0605

enable darkmode

 assets/sass/_components.sass

@@ -41,10 +41,10 @@
  &_result
    padding: 0.5rem 1rem
    &:hover
      background-color: var(--haze)
      background-color: var(--theme)
    &s
      width: 13.5rem
      background-color: var(--light)
      background-color: var(--overlay)
      border-radius: 0 0 0.25rem 0.25rem
      box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
      position: absolute
@@ -55,7 +55,7 @@
        display: none

.button
  background-color: var(--dark)
  background-color: var(--theme)
  color: var(--light)
  border-radius: 0.25rem
  display: inline-grid

 assets/sass/_syntax.sass

@@ -14,6 +14,7 @@
  table
    margin: 0
    border-collapse: collapse
    background-color: var(--overlay)
  & & 
    margin: 0


 assets/sass/_variables.sass

@@ -1,22 +1,24 @@
// #161d21; // #1F2A2F; // #132433; // #24292e;
html 
  --light: #fff
  --dark: #010101
  --dark: rgb(28,28,30)
  --haze: #f2f5f2
  --bubble: #111
  --bubble: rgb(32,32,34)
  --accent: var(--gray)
  --bg: var(--light)
  --overlay: var(--light)
  --text: var(--dark)
  --theme: #20c997
  --font: 'Metropolis', sans-serif

// @media (prefers-color-scheme: dark)
//   *
//     box-shadow: none !important 
//   html 
//     --bg: var(--dark)
//     --text: var(--light)
//     --accent: var(--bubble)
@media (prefers-color-scheme: dark)
  html 
    *
      box-shadow: none !important 
    --bg: var(--dark)
    --text: var(--light)
    --accent: var(--bubble)
    --overlay: var(--bubble)

%narrow 
  max-width: 750px