This commit is contained in:
parent
11c377779a
commit
04473a6660
19
themes/devroom-2024/assets/scss/_colors_dark.scss
Normal file
19
themes/devroom-2024/assets/scss/_colors_dark.scss
Normal file
|
@ -0,0 +1,19 @@
|
|||
$accent: rgb(90, 126, 193);
|
||||
$background: rgb(40, 44, 53);
|
||||
$backdrop: darken($background, 5%);
|
||||
$text: rgb(226, 226, 226);
|
||||
$subtext: #868686;
|
||||
$links: $accent;
|
||||
$footer: $subtext;
|
||||
$meta: $text;
|
||||
$header: $text;
|
||||
$highlight: $links;
|
||||
$blockquote_border: $accent;
|
||||
$important_border: #f00;
|
||||
$code_background: $text;
|
||||
$code_border_color: $text;
|
||||
$code: $background;
|
||||
$separator: darken(desaturate($accent, 20%), 20%);
|
||||
$darkmode_icon: $text;
|
||||
$tag_background: $accent;
|
||||
$tag_color: $text;
|
19
themes/devroom-2024/assets/scss/_colors_light.scss
Normal file
19
themes/devroom-2024/assets/scss/_colors_light.scss
Normal file
|
@ -0,0 +1,19 @@
|
|||
$accent: rgb(90, 126, 193);
|
||||
$background: #fafafa;
|
||||
$backdrop: darken($background, 5%);
|
||||
$text: #333333;
|
||||
$subtext: #868686;
|
||||
$links: $accent;
|
||||
$footer: $subtext;
|
||||
$meta: $text;
|
||||
$header: $text;
|
||||
$highlight: $links;
|
||||
$blockquote_border: $accent;
|
||||
$important_border: #f00;
|
||||
$code_background: $text;
|
||||
$code_border_color: $text;
|
||||
$code: $background;
|
||||
$separator: lighten($accent, 35%);
|
||||
$darkmode_icon: $text;
|
||||
$tag_background: $accent;
|
||||
$tag_color: $background;
|
|
@ -4,27 +4,11 @@ $h1_font_size: 2.0rem;
|
|||
$h2_font_size: 1.7rem;
|
||||
$header_size: 1.2rem;
|
||||
|
||||
$font_size: 16px;
|
||||
$font_size: 18px;
|
||||
$code_font_size: 14px;
|
||||
$code_line_height: 17px;
|
||||
$line-height: 1.6;
|
||||
|
||||
$accent: rgb(90, 126, 193);
|
||||
$background: rgb(40, 44, 53);
|
||||
$backdrop: darken($background, 5%);
|
||||
$text: rgb(226, 226, 226);
|
||||
$subtext: #868686;
|
||||
$links: $accent;
|
||||
$footer: $subtext;
|
||||
$meta: $text;
|
||||
$header: $text;
|
||||
$highlight: $links;
|
||||
$blockquote_border: $accent;
|
||||
$important_border: #f00;
|
||||
$code_background: $text;
|
||||
$code_border_color: $text;
|
||||
$code: $background;
|
||||
$separator: darken(desaturate($accent, 20%), 20%);
|
||||
|
||||
html, body {
|
||||
background-color: $background;
|
||||
|
@ -33,6 +17,9 @@ html, body {
|
|||
font-size: $font_size;
|
||||
line-height: $line-height;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
transition: color 0.2s ease-in-out,
|
||||
background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
|
@ -49,7 +36,7 @@ code, pre {
|
|||
}
|
||||
|
||||
.container {
|
||||
background-color: $background;
|
||||
|
||||
padding: 1rem 1.5rem;
|
||||
margin: 1rem auto;
|
||||
max-width: 1200px;
|
||||
|
@ -394,13 +381,16 @@ article.full {
|
|||
}
|
||||
|
||||
a.tag {
|
||||
background-color: $accent;
|
||||
color: $text;
|
||||
background-color: $tag_background;
|
||||
color: $tag_color;
|
||||
padding: 2px 8px 4px;
|
||||
margin: 0 2px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
text-transform: lowercase;
|
||||
|
||||
transition: color 0.2s ease-in-out,
|
||||
background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.article-about {
|
||||
|
@ -467,3 +457,19 @@ form {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
cursor: pointer;
|
||||
margin-left: 1rem;
|
||||
display: block;
|
||||
padding: 0.35rem;
|
||||
|
||||
svg {
|
||||
fill: $darkmode_icon;
|
||||
|
||||
transition: color 0.2s ease-in-out,
|
||||
background-color 0.2s ease-in-out;
|
||||
}
|
||||
}
|
2
themes/devroom-2024/assets/scss/devroom_dark.scss
Normal file
2
themes/devroom-2024/assets/scss/devroom_dark.scss
Normal file
|
@ -0,0 +1,2 @@
|
|||
@import "_colors_dark";
|
||||
@import "_site";
|
2
themes/devroom-2024/assets/scss/devroom_light.scss
Normal file
2
themes/devroom-2024/assets/scss/devroom_light.scss
Normal file
|
@ -0,0 +1,2 @@
|
|||
@import "_colors_light";
|
||||
@import "_site";
|
|
@ -16,21 +16,41 @@
|
|||
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
|
||||
{{ hugo.Generator }}
|
||||
<link rel="stylesheet" href="/css/lightbox.min.css" />
|
||||
{{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom.css"
|
||||
"enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom.scss"
|
||||
| resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }}
|
||||
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
|
||||
{{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom.css" ) }} {{
|
||||
$styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate
|
||||
"style.devroom.css" . | toCSS $cssOpts | minify | fingerprint }}
|
||||
|
||||
{{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom_light.css"
|
||||
"enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom_light.scss"
|
||||
| resources.ExecuteAsTemplate "style.devroom_light.css" . | toCSS $cssOpts }}
|
||||
<link id="style-light" rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
|
||||
{{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom_light.css" ) }} {{
|
||||
$styles := resources.Get "scss/devroom_light.scss" | resources.ExecuteAsTemplate
|
||||
"style.devroom_light.css" . | toCSS $cssOpts | minify | fingerprint }}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
id="style-light"
|
||||
href="{{ $styles.RelPermalink }}"
|
||||
integrity="{{ $styles.Data.Integrity }}"
|
||||
crossorigin="anonymous"
|
||||
media="screen"
|
||||
/>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom_dark.css"
|
||||
"enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom_dark.scss"
|
||||
| resources.ExecuteAsTemplate "style.devroom_dark.css" . | toCSS $cssOpts }}
|
||||
<link id="style-dark" rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
|
||||
{{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom_dark.css" ) }} {{
|
||||
$styles := resources.Get "scss/devroom_dark.scss" | resources.ExecuteAsTemplate
|
||||
"style.devroom_dark.css" . | toCSS $cssOpts | minify | fingerprint }}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
id="style-dark"
|
||||
href="{{ $styles.RelPermalink }}"
|
||||
integrity="{{ $styles.Data.Integrity }}"
|
||||
crossorigin="anonymous"
|
||||
media="screen"
|
||||
/>
|
||||
{{ end }}
|
||||
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
|
@ -49,5 +69,18 @@
|
|||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
<script src="/js/lightbox-plus-jquery.min.js"></script>
|
||||
<script>
|
||||
function theme_set(toggled) {
|
||||
document.getElementById('style-light').disabled = toggled;
|
||||
document.getElementById('style-dark').disabled = !toggled;
|
||||
localStorage.setItem('theme-toggled', toggled ? '1' : '');
|
||||
}
|
||||
|
||||
function theme_toggle() {
|
||||
theme_set(!document.getElementById('style-light').disabled);
|
||||
}
|
||||
|
||||
theme_set(localStorage.getItem('theme-toggled'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
<header>
|
||||
<nav>
|
||||
<a href="/" class="brand">devroom.io</a>
|
||||
|
||||
|
||||
<div class="menu">
|
||||
<a href="/" class="menu-item">Blog</a>
|
||||
<a href="/projects/" class="menu-item">Projects</a>
|
||||
|
@ -9,5 +11,14 @@
|
|||
<a href="/privacy/" class="menu-item">Privacy</a>
|
||||
<a href="/contact/" class="menu-item">Contact</a>
|
||||
</div>
|
||||
|
||||
<div class="btn-dark" onclick="theme_toggle(); return false;" role="button">
|
||||
|
||||
<svg id="glyphicons-halflings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path id="contrast" d="M10,2a8,8,0,1,0,8,8A8.00917,8.00917,0,0,0,10,2Zm0,14A6,6,0,0,1,10,4Z"></path>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
|
|
Loading…
Reference in New Issue
Block a user