mirror of https://github.com/Damillora/Rinze.git
Add dark mode for nanao.moe
This commit is contained in:
parent
6e17826938
commit
a32401fd79
|
|
@ -0,0 +1,21 @@
|
|||
<script>
|
||||
let icon = "brightness_low";
|
||||
let text = "Dark Mode";
|
||||
|
||||
function toggleMode() {
|
||||
if(window.document.body.getAttribute("data-theme") != "dark") {
|
||||
window.document.body.setAttribute("data-theme","dark");
|
||||
icon = "brightness_high";
|
||||
text = "Light Mode"
|
||||
} else {
|
||||
window.document.body.setAttribute("data-theme","light");
|
||||
icon = "brightness_low";
|
||||
text = "Dark Mode"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="menu__item" on:click={toggleMode}>
|
||||
<i class="material-icons md-24">{icon}</i>
|
||||
<p class="menu__text">{text}</p>
|
||||
</div>
|
||||
|
|
@ -1,15 +1,17 @@
|
|||
<script>
|
||||
import NavItem from "./NavItem.svelte";
|
||||
import NavSeparator from "./NavSeparator.svelte";
|
||||
import DarkModeButton from "components/DarkModeButton.svelte";
|
||||
|
||||
let menu_shown = false;
|
||||
let detached = false;
|
||||
let scrollY = 0;
|
||||
function handleScroll (e) {
|
||||
function handleScroll(e) {
|
||||
detached = scrollY > 64;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:scroll={handleScroll} bind:scrollY="{scrollY}" />
|
||||
<svelte:window on:scroll={handleScroll} bind:scrollY />
|
||||
|
||||
<div>
|
||||
<div class:site-header={true} class:enabled={menu_shown} class:detached>
|
||||
|
|
@ -54,6 +56,8 @@
|
|||
icon="rss_feed"
|
||||
text="Blog"
|
||||
/>
|
||||
<NavSeparator />
|
||||
<DarkModeButton />
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
|
||||
<div class="menu__separator">
|
||||
</div>
|
||||
|
|
@ -2,7 +2,42 @@
|
|||
|
||||
html {
|
||||
font-family: 'Exo 2',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
|
||||
}
|
||||
:root, [data-theme="light"] {
|
||||
--text-color: #{$text-light};
|
||||
--bg-color: #{$bg-light};
|
||||
--accent-color: #{$accent-light};
|
||||
--accent-bg-color: #{$accent-bg-light};
|
||||
--highlight-color: #{$highlight-light};
|
||||
--highlight-bg-color: #{$highlight-bg-light};
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--text-color: #{$text-dark};
|
||||
--bg-color: #{$bg-dark};
|
||||
--accent-color: #{$accent-dark};
|
||||
--accent-bg-color: #{$accent-bg-dark};
|
||||
--highlight-color: #{$highlight-dark};
|
||||
--highlight-bg-color: #{$highlight-bg-dark};
|
||||
}
|
||||
|
||||
@media (prefers-color-schme: dark) {
|
||||
:root:not[data-theme="light"] {
|
||||
--text-color: #{$text-dark};
|
||||
--bg-color: #{$bg-dark};
|
||||
--accent-color: #{$accent-dark};
|
||||
--accent-bg-color: #{$accent-bg-dark};
|
||||
--highlight-color: #{$highlight-dark};
|
||||
--highlight-bg-color: #{$highlight-bg-dark};
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 1rem;
|
||||
@include screen(md) {
|
||||
|
|
@ -49,7 +84,7 @@ html {
|
|||
}
|
||||
|
||||
a {
|
||||
color: $accent-primary;
|
||||
color: var(--accent-color);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -64,20 +99,20 @@ html {
|
|||
list-style-type: decimal;
|
||||
}
|
||||
code {
|
||||
background-color: $bg-primary;
|
||||
color: $accent-primary;
|
||||
background-color: var(--accent-bg-color);
|
||||
color: var(--accent-color);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 0.5rem solid $accent-primary;
|
||||
border-left: 0.5rem solid var(--accent-color);
|
||||
@include my(2rem);
|
||||
padding: 0.5rem 0 0.5rem 2rem;
|
||||
}
|
||||
pre {
|
||||
background: $bg-primary;
|
||||
color: $accent-primary;
|
||||
background: var(--accent-bg-color);
|
||||
color: var(--accent-color);
|
||||
padding: 0.5rem;
|
||||
border: 1px solid $accent-primary;
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,8 +13,18 @@ $font-medium: 500;
|
|||
|
||||
$white: #FFFFFF;
|
||||
$black: #000000;
|
||||
$theme-blue: #22558C;
|
||||
|
||||
$accent-primary: #22558C;
|
||||
$bg-primary: #E5E7EB;
|
||||
$text-light: #000000;
|
||||
$bg-light: #FFFFFF;
|
||||
$accent-light: #22558C;
|
||||
$accent-bg-light: #E5E7EB;
|
||||
$highlight-light: #22558C;
|
||||
$highlight-bg-light: #9FD3F0;
|
||||
|
||||
$bg-secondary: #9FD3F0;
|
||||
$text-dark: #FFFFFF;
|
||||
$bg-dark: #263238;
|
||||
$accent-dark: #9FD3F0;
|
||||
$accent-bg-dark: #455A64;
|
||||
$highlight-dark: #9FD3F0;
|
||||
$highlight-bg-dark: #3B90C6;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
.copyarea {
|
||||
background: $bg-primary;
|
||||
color: $accent-primary;
|
||||
background: var(--accent-bg-color);
|
||||
color: var(--accent-color);
|
||||
padding: 0.5rem;
|
||||
border: 1px solid $accent-primary;
|
||||
border: 1px solid var(--accent-color);
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
flex-direction: row;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $bg-secondary;
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
&__title {
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
height: 100%;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $accent-primary;
|
||||
background-color: $theme-blue;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
white-space: nowrap;
|
||||
@include transition;
|
||||
&:hover {
|
||||
background-color: $accent-primary;
|
||||
background-color: $theme-blue;
|
||||
}
|
||||
}
|
||||
&__icon {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@include transition;
|
||||
|
||||
&:hover {
|
||||
background-color: $bg-secondary;
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
&__caption {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
display: block;
|
||||
@include transition;
|
||||
overflow: hidden;
|
||||
margin-left: 4rem;
|
||||
|
||||
&.enabled {
|
||||
max-height: 100vh;
|
||||
|
|
@ -14,10 +13,11 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
background-color: $accent-primary;
|
||||
background-color: $theme-blue;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -26,14 +26,25 @@
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
i {
|
||||
@include px(1rem);
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 4rem;
|
||||
height: 3rem;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
@include px(0.50rem);
|
||||
@include py(0.75rem);
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
@include px(1rem);
|
||||
}
|
||||
}
|
||||
&__separator {
|
||||
margin-left: 5rem;
|
||||
margin-right: 4rem;
|
||||
border-top: 0.125rem solid $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
min-height: 12rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $bg-secondary;
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
&__image {
|
||||
|
|
|
|||
Loading…
Reference in New Issue