diff options
| author | gurusabarish <gurusabarisha@gmail.com> | 2022-03-04 14:16:32 +0300 |
|---|---|---|
| committer | gurusabarish <gurusabarisha@gmail.com> | 2022-03-04 14:16:32 +0300 |
| commit | 05e453ad8311189c8f5eae553c60dce0d0a97d31 (patch) | |
| tree | 4009824414377cc3ed31cee1d593cd78b307eb5d | |
| parent | 47f9d64515dccaded68b0e0c711a03667be6ab3c (diff) | |
darkmode auto, light, dark
| -rw-r--r-- | exampleSite/content/blogs/emoji-support.md | 2 | ||||
| -rw-r--r-- | layouts/_default/single.html | 23 | ||||
| -rw-r--r-- | layouts/partials/scripts.html | 31 | ||||
| -rw-r--r-- | static/css/header.css | 2 | ||||
| -rw-r--r-- | static/css/single.css | 25 |
5 files changed, 82 insertions, 1 deletions
diff --git a/exampleSite/content/blogs/emoji-support.md b/exampleSite/content/blogs/emoji-support.md index 6a021b4..3c219ae 100644 --- a/exampleSite/content/blogs/emoji-support.md +++ b/exampleSite/content/blogs/emoji-support.md @@ -15,6 +15,8 @@ toc: Emoji can be enabled in a Hugo project in a number of ways. :zap: +## Emoji Support + The [emojify](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). To enable emoji globally, set ```enableEmoji``` to ```true``` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g. diff --git a/layouts/_default/single.html b/layouts/_default/single.html index eef7aa1..387c98a 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -86,5 +86,28 @@ </div>
</div>
</div>
+ <button class="p-2 px-3" onclick="topFunction()" id="topScroll">
+ <i class="fas fa-angle-up"></i>
+ </button>
</section>
+
+<script>
+ var topScroll = document.getElementById("topScroll");
+ window.onscroll = function() {scrollFunction()};
+
+ console.log(topScroll);
+ function scrollFunction() {
+ if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+ topScroll.style.display = "block";
+ } else {
+ topScroll.style.display = "none";
+ }
+ }
+
+ function topFunction() {
+ document.body.scrollTop = 0;
+ document.documentElement.scrollTop = 0;
+ }
+</script>
+
{{ end }}
\ No newline at end of file diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 87016fd..336bc35 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,3 +1,34 @@ +{{- if (eq .Site.Params.theme.defaultTheme "light") }}
+<script>
+ if (document.body.className.includes("dark")) {
+ document.body.classList.remove('dark');
+ localStorage.setItem("pref-theme", 'light');
+ }
+</script>
+
+{{ else if (eq .Site.Params.theme.defaultTheme "dark") }}
+{{- /* theme is dark */}}
+<script>
+ if (document.body.className.includes("light")) {
+ document.body.classList.add('dark');
+ localStorage.setItem("pref-theme", 'dark');
+ }
+</script>
+
+{{- else }}
+{{- /* theme is auto */}}
+<script>
+ if (localStorage.getItem("pref-theme") === "dark") {
+ document.body.classList.add('dark');
+ } else if (localStorage.getItem("pref-theme") === "light") {
+ document.body.classList.remove('dark')
+ } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.body.classList.add('dark');
+ }
+
+</script>
+{{- end }}
+
{{- if (not .Site.Params.theme.disableThemeToggle) }}
<script>
document.getElementById("theme-toggle").addEventListener("click", () => {
diff --git a/static/css/header.css b/static/css/header.css index db3eafa..3a0f2f3 100644 --- a/static/css/header.css +++ b/static/css/header.css @@ -10,9 +10,11 @@ header .navbar .navbar-nav a { .navbar-toggler {
border: none;
outline: none;
+ color: var(--text-color);
}
.navbar-toggler svg {
fill: currentColor;
+ color: var(--text-color);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 .05em;
diff --git a/static/css/single.css b/static/css/single.css index fb05a12..acfcd53 100644 --- a/static/css/single.css +++ b/static/css/single.css @@ -257,4 +257,27 @@ #single aside.social .social-content ul li:hover a {
opacity: .8;
color: var(--primary-color);
-}
\ No newline at end of file +}
+
+/* Top scroll */
+
+#single #topScroll {
+ display: none;
+ position: fixed;
+ bottom: 10px;
+ right: 10px;
+ z-index: 99;
+ border: none;
+ outline: none;
+ background-color: var(--secondary-color);
+ color: var(--primary-color);
+ cursor: pointer;
+ border-radius: 10px;
+}
+
+#single #topScroll:hover {
+ background-color: var(--primary-color);
+ color: var(--secondary-color);
+ transition: .5s;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}
|