diff --git a/dist/index.html b/dist/index.html index 91f75a0..6379644 100644 --- a/dist/index.html +++ b/dist/index.html @@ -22,21 +22,21 @@ - - diff --git a/examples/fiatjaf.html b/examples/fiatjaf.html index 78edd31..120f2c7 100644 --- a/examples/fiatjaf.html +++ b/examples/fiatjaf.html @@ -22,21 +22,21 @@ - - diff --git a/examples/hodlbod.html b/examples/hodlbod.html index 5413d08..a5962c5 100644 --- a/examples/hodlbod.html +++ b/examples/hodlbod.html @@ -22,21 +22,21 @@ - - diff --git a/examples/opensats.html b/examples/opensats.html index 0a4e57e..4d34512 100644 --- a/examples/opensats.html +++ b/examples/opensats.html @@ -22,21 +22,21 @@ - - diff --git a/src/App.svelte b/src/App.svelte index 24904d6..76b66a1 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -4,6 +4,7 @@ import { getProfile } from './utils'; import Home from './Home.svelte'; import Note from './Note.svelte'; + import ThemeSwitch from './ThemeSwitch.svelte'; let currentHash = ''; let profile: import('nostr-tools').Event; @@ -80,3 +81,5 @@ This page connects to some servers (Nostr relays) to retrieve data: {relays.join(', ')} {/if} + + \ No newline at end of file diff --git a/src/Loading.svelte b/src/Loading.svelte index 310cd6a..97a7c60 100644 --- a/src/Loading.svelte +++ b/src/Loading.svelte @@ -4,7 +4,7 @@
diff --git a/src/ThemeSwitch.svelte b/src/ThemeSwitch.svelte new file mode 100644 index 0000000..6dc043a --- /dev/null +++ b/src/ThemeSwitch.svelte @@ -0,0 +1,66 @@ + + +
+ +
+ + diff --git a/src/app.scss b/src/app.scss index fd7d771..980b8c8 100644 --- a/src/app.scss +++ b/src/app.scss @@ -12,6 +12,11 @@ body { padding: 0; } +html.dark body { + background-color: #242424; + color: #cbcbcb; +} + #app { box-sizing: border-box; width: 80%; @@ -27,6 +32,11 @@ body { } } +html.dark #app { + background-color: #242424; + color: #ebebeb; +} + a { color: #242424; &:visited { @@ -34,6 +44,13 @@ a { } } +html.dark a { + color: #f5f5f5; + &:visited { + color: #f5f5f5; + } +} + ol, ul { padding-left: 1rem; margin: 0; @@ -81,6 +98,7 @@ pre { @media only screen and (max-width: 768px) { margin-bottom: 1rem; + margin-right: 2.5rem; } a{ @@ -128,6 +146,22 @@ pre { } +html.dark .header { + + a { + &:visited { + color: #cbcbcb; + } + } + + .external-link { + color: #747474; + a { + color: #747474; + } + } +} + .topic-wrapper { margin-bottom: 1.5rem; display: flex; @@ -151,7 +185,25 @@ pre { &.selected { background-color: #242424; - color: #FFFFFF; + color: #f5f5f5; + } + + } + } +} + +html.dark .topic-wrapper { + div { + a { + background-color: #747474; + color: #242424; + + &:hover { + background-color: #f5f5f5; + } + + &.selected { + background-color: #cbcbcb; } } @@ -176,13 +228,22 @@ pre { border-bottom: 8px solid #ebebeb; } +html.dark .about { + border-bottom: 8px solid #373737; +} + .separator { margin-bottom: 2rem; border-bottom: 8px solid #ebebeb; } +html.dark .separator { + border-bottom: 8px solid #373737; +} + .top-notes { display: flex; + color: #747474; @media only screen and (max-width: 768px) { display: block; @@ -241,6 +302,11 @@ pre { } } +html.dark .top-notes { + color: #cbcbcb; + border-bottom: 8px solid #373737; +} + .short-notes { border-bottom: 8px solid #f5f5f5; padding-bottom: 1rem; @@ -286,8 +352,16 @@ pre { } } +html.dark .short-notes { + a { + color: #cbcbcb; + } + border-bottom: 8px solid #373737; +} + .listing-notes { margin-top: 1rem; + color: #747474; ul { list-style-type: none; @@ -313,6 +387,10 @@ pre { } } +html.dark .listing-notes { + color: #cbcbcb; +} + h1 { font-size: 2rem; line-height: 0.9; @@ -387,6 +465,17 @@ h1 { } } +html.dark .footer { + border-top: 8px solid #373737; + color: #747474; + a { + color: #747474; + &:visited { + color: #747474; + } + } +} + zap-threads { font-size: 0.9rem; } \ No newline at end of file