Add dark theme

This commit is contained in:
Andros Fenollosa 2023-06-27 09:30:33 +02:00
parent d5368dc248
commit 9e76a34531
3 changed files with 68 additions and 56 deletions

56
themes/_base.sass Normal file
View File

@ -0,0 +1,56 @@
body
margin: $gap-l auto
max-width: 700px
background: $color-bg
color: $color-text
padding-inline: $gap-m
font-family: $font-main
font-weight: 500
box-sizing: border-box
&::selection
color: $color-bg
background: $color-selection
h1, h2, h3
font-family: $font-main,
margin-top: $gap-l
line-height: 1.2
img
display: block
width: 100%
object-fit: cover
object-position: center
a
color: $color-link
&:hover
text-decoration: none
pre
font-family: $font-monospace
.isa_info, .isa_success, .isa_warning, .isa_error
width: 90%
margin: 10px 0px
padding: 12px
.isa_info
color: #00529b
background-color: #bde5f8
.isa_success
color: #4f8a10
background-color: #dff2bf
.isa_warning
color: #9f6000
background-color: #feefb3
.isa_error
color: #d8000c
background-color: #ffd2d2
.timestamp
color: $color-text--light

11
themes/dark.sass Normal file
View File

@ -0,0 +1,11 @@
$font-main: "Lora", sans-serif
$font-monospace: "Inconsolata", monospace
$color-bg: #191919
$color-text: #ffffffcf
$color-text--light: lighten($color-text, 20%)
$color-link: #6FB0E2
$color-selection: #9BA6B0
$gap-l: 2.5rem
$gap-m: 1rem
@use "base"

View File

@ -8,59 +8,4 @@ $color-selection: #4D5460
$gap-l: 2.5rem $gap-l: 2.5rem
$gap-m: 1rem $gap-m: 1rem
body @use "base"
margin: $gap-l auto
max-width: 700px
background: $color-bg
color: $color-text
padding-inline: $gap-m
font-family: $font-main
font-weight: 500
box-sizing: border-box
&::selection
color: $color-bg
background: $color-selection
h1, h2, h3
font-family: $font-main,
margin-top: $gap-l
line-height: 1.2
img
display: block
width: 100%
object-fit: cover
object-position: center
a
color: $color-link
&:hover
text-decoration: none
pre
font-family: $font-monospace
.isa_info, .isa_success, .isa_warning, .isa_error
width: 90%
margin: 10px 0px
padding: 12px
.isa_info
color: #00529b
background-color: #bde5f8
.isa_success
color: #4f8a10
background-color: #dff2bf
.isa_warning
color: #9f6000
background-color: #feefb3
.isa_error
color: #d8000c
background-color: #ffd2d2
.timestamp
color: $color-text--light