summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--_includes/extensions/theme-toggle.html90
-rw-r--r--_layouts/default.html2
-rw-r--r--_sass/misc/theme-toggle.scss79
-rw-r--r--_sass/yat.scss3
-rw-r--r--_sass/yat/_dark.scss184
5 files changed, 357 insertions, 1 deletions
diff --git a/_includes/extensions/theme-toggle.html b/_includes/extensions/theme-toggle.html
new file mode 100644
index 0000000..7976e21
--- /dev/null
+++ b/_includes/extensions/theme-toggle.html
@@ -0,0 +1,90 @@
+<div class="theme-toggle">
+ <input type="checkbox" id="theme-switch">
+ <label for="theme-switch">
+ <div class="toggle"></div>
+ <div class="names">
+ <p class="light">Light</p>
+ <p class="dark">Dark</p>
+ </div>
+ </label>
+</div>
+
+<script>
+ (function() {
+ var sw = document.getElementById('theme-switch');
+ var html = document.getElementsByTagName('html')[0];
+ var themeData = loadThemeData();
+
+ function saveThemeData(data) {
+ localStorage.setItem('theme', JSON.stringify(data));
+ }
+
+ function loadThemeData() {
+ var data = localStorage.getItem('theme');
+ try {
+ data = JSON.parse(data ? data : '');
+ } catch(e) {
+ data = { nightShift: null, autoToggleAt: 0 };
+ saveThemeData(data);
+ }
+ return data;
+ }
+
+ function handleThemeToggle(nightShift) {
+ themeData.nightShift = nightShift;
+ saveThemeData(themeData);
+ html.dataset.theme = nightShift ? 'dark' : 'light';
+ setTimeout(function() {
+ sw.checked = nightShift ? true : false;
+ }, 50);
+ }
+
+ function autoThemeToggle() {
+ // Next time point of theme toggle
+ var now = new Date();
+ var toggleAt = new Date();
+ var hours = now.getHours();
+ var nightShift = hours >= 19 || hours <=7;
+
+ if (nightShift) {
+ if (hours > 7) {
+ toggleAt.setDate(toggleAt.getDate() + 1);
+ }
+ toggleAt.setHours(7);
+ } else {
+ toggleAt.setHours(19);
+ }
+
+ toggleAt.setMinutes(0);
+ toggleAt.setSeconds(0);
+ toggleAt.setMilliseconds(0)
+
+ var delay = toggleAt.getTime() - now.getTime();
+
+ // auto toggle theme mode
+ setTimeout(function() {
+ handleThemeToggle(!nightShift);
+ }, delay);
+
+ return {
+ nightShift: nightShift,
+ toggleAt: toggleAt.getTime()
+ };
+ }
+
+ var data = autoThemeToggle();
+
+ // Listen the theme toggle event
+ sw.addEventListener('change', function(event) {
+ handleThemeToggle(event.target.checked);
+ });
+
+ // Toggle theme by local setting
+ if (data.toggleAt > themeData.autoToggleAt) {
+ themeData.autoToggleAt = data.toggleAt;
+ handleThemeToggle(data.nightShift);
+ } else {
+ handleThemeToggle(themeData.nightShift);
+ }
+ })();
+</script>
diff --git a/_layouts/default.html b/_layouts/default.html
index 1823491..b9ad657 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -11,6 +11,8 @@
{%- include extensions/hashlocate.html -%}
+ {%- include extensions/theme-toggle.html -%}
+
<main class="page-content" aria-label="Content">
<div class="wrapper">
{{ content }}
diff --git a/_sass/misc/theme-toggle.scss b/_sass/misc/theme-toggle.scss
new file mode 100644
index 0000000..492eb0c
--- /dev/null
+++ b/_sass/misc/theme-toggle.scss
@@ -0,0 +1,79 @@
+.theme-toggle {
+ position: relative;
+ width: 102px;
+ margin-top: 10px;
+ margin-right: 60px;
+ margin-left: auto;
+ transition: 0.1s all ease-in-out;
+
+ label, .toggle {
+ border-radius: 100px;
+ }
+
+ label {
+ display: block;
+ background-color: rgba(120,120,120,.15);
+ cursor: pointer;
+ }
+
+ .toggle {
+ position: absolute;
+ width: 50%;
+ height: 100%;
+ background-color: #fff;
+ box-shadow: 0 2px 15px rgba(0,0,0,.15);
+ transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ }
+
+ .names {
+ font-size: 1em;
+ font-weight: bolder;
+ width: 76%;
+ margin-left: 12%;
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ user-select: none;
+ }
+
+ .dark {
+ opacity: .5;
+ }
+
+ p {
+ color: #acacac;
+ margin-bottom: 0;
+ line-height: 24px;
+ }
+
+ [type="checkbox"] {
+ display: none;
+ }
+
+ /* Toggle */
+ [type="checkbox"]:checked ~ label .toggle {
+ transform: translateX(100%);
+ background-color: #34323D;
+ }
+
+ [type="checkbox"]:checked ~ label .dark{
+ opacity: 1;
+ }
+
+ [type="checkbox"]:checked ~ label .light{
+ opacity: .5;
+ }
+
+ @include media-query(1024px) {
+ margin-right: 35px;
+ }
+
+ @include media-query($on-palm) {
+ width: 94px;
+ margin-right: 20px;
+
+ .names {
+ font-size: .85em;
+ }
+ }
+}
diff --git a/_sass/yat.scss b/_sass/yat.scss
index 25a193a..a18f949 100644
--- a/_sass/yat.scss
+++ b/_sass/yat.scss
@@ -61,7 +61,8 @@ $on-laptop: 800px !default;
@import
"yat/base",
"yat/layout",
- // "yat/syntax-highlighting",
+ "yat/dark",
+ "misc/theme-toggle",
"misc/article-menu",
"misc/common-list",
"misc/google-translate"
diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
new file mode 100644
index 0000000..63f4880
--- /dev/null
+++ b/_sass/yat/_dark.scss
@@ -0,0 +1,184 @@
+$dark-background-color: #0e0e0e !default;
+
+html[data-theme="dark"] {
+
+ &[data-scroll-status='top'] {
+ .site-footer-inner {
+ border-top: solid 1px #2f2f2f !important;
+ transition: 0s;
+ }
+ }
+
+ body {
+ color: #bbb;
+ background-color: $dark-background-color;
+ }
+
+ *:not(pre) > code {
+ background-color: #545454;
+ }
+
+ table {
+ color: #9d9d9d;
+
+ th {
+ background-color: #000;
+ }
+
+ tr:nth-child(even) {
+ background-color: #111;
+ }
+ }
+
+ .site-header {
+ background-color: #090909;
+
+ .site-brand {
+ .site-brand-inner {
+ &, &:visited {
+ color: #f8f8f8;
+ }
+ }
+ }
+
+ .site-nav .page-link {
+ color: #f8f8f8;
+ }
+
+ .ct-language-dropdown {
+ color: #f8f8f8;
+ background-color: $dark-background-color;
+ }
+
+ .ct-language-selected, .ct-language-dropdown li:hover {
+ background-color: #222 !important;
+ }
+ }
+
+ .site-footer {
+ color: #fff;
+ background-color: #000;
+ }
+
+ .left-vsplit:before {
+ background-color: #9a9a9a;
+ }
+
+ .page-banner {
+ .page-banner-img {
+ & > *:first-child {
+ opacity: 0.8;
+ }
+ }
+ }
+
+ .pagination {
+ .post-link {
+ color: #bbb;
+ }
+
+ .post-title {
+ a:visited:after {
+ background-color: $dark-background-color;
+ }
+
+ a:after {
+ color: $dark-background-color;
+ }
+ }
+
+ .post-list {
+ & > li:not(:last-child) {
+ border-bottom: 1px solid #545454;
+ }
+ }
+
+ .post-tags .post-tag:hover {
+ color: #d7d7d7;
+ }
+ }
+
+ .page-segments {
+ li {
+ a {
+ color: #ddd;
+ }
+
+ a:visited:after {
+ background-color: $dark-background-color;
+ }
+
+ a:after {
+ color: $dark-background-color;
+ }
+ }
+ }
+
+ .post .post-content {
+ img:not([raw]) {
+ background-color: #ffffff33;
+ }
+ }
+
+ .post-related {
+ & > *:first-child {
+ color: #d7d7d7;
+ }
+
+ a:visited:after {
+ background-color: $dark-background-color;
+ }
+
+ a:after {
+ color: $dark-background-color;
+ }
+
+ a:hover {
+ color: #aaa;
+ }
+ }
+
+ .common-list {
+ li {
+ border-bottom: solid 1px #40404088;
+
+ a {
+ color: #aaa;
+ }
+
+ a:hover {
+ background-color: #272727;
+ }
+
+ span {
+ background-color: #333;
+ }
+ }
+ }
+
+ .post-menu {
+ .post-menu-title {
+ color: #ddd;
+ }
+
+ .post-menu-content {
+ ul {
+ border-left: 1px solid #787878;
+
+ .active {
+ background-color: #2d2d2d;
+ border-left: 2px solid #aaa;
+ }
+
+ a {
+ color: #bbb;
+ }
+
+ a:hover {
+ color: #fff !important;
+ }
+ }
+ }
+ }
+}
+
generated by cgit v1.2.3 (git 2.39.1) at 2024-10-18 14:29:52 +0000