diff options
| author | panr <radoslaw.koziel@gmail.com> | 2018-12-21 21:07:37 +0300 |
|---|---|---|
| committer | panr <radoslaw.koziel@gmail.com> | 2018-12-21 21:07:58 +0300 |
| commit | 9532cb828522a9f63f20a84777b911be17b6f6ac (patch) | |
| tree | 7cdba2e9e02c870313891bf5bc41d6024ad73948 | |
| parent | 1974d30be0b1e5c4312353a745d0746e4c8aeb9e (diff) | |
Set default theme in config toml1.0.7
| -rw-r--r-- | exampleSite/config.toml | 2 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | source/js/theme.js | 22 |
3 files changed, 15 insertions, 11 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 244813d..f138adb 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -7,6 +7,8 @@ paginate = 5 [params] subtitle = "A simple theme for Hugo" + # "light" or "dark" + defaultTheme = "dark" [params.logo] logoText = "hello friend" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 173295d..1e91b7d 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,7 +6,7 @@ {{ end }} {{ partial "head.html" . }} </head> -<body class="dark-theme"> +<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}"> <div class="container"> {{ partial "header.html" . }} diff --git a/source/js/theme.js b/source/js/theme.js index b30171f..d5a324b 100644 --- a/source/js/theme.js +++ b/source/js/theme.js @@ -1,16 +1,18 @@ // Toggle theme -const getTheme = window.localStorage && window.localStorage.getItem('theme') -const themeToggle = document.querySelector('.theme-toggle') -const isDark = getTheme === 'dark' || getTheme === null +const getTheme = window.localStorage && window.localStorage.getItem("theme"); +const themeToggle = document.querySelector(".theme-toggle"); +const isDark = getTheme === "dark"; -document.body.classList.toggle('dark-theme', isDark) +if (getTheme !== null) { + document.body.classList.toggle("dark-theme", isDark); +} -themeToggle.addEventListener('click', () => { - document.body.classList.toggle('dark-theme') +themeToggle.addEventListener("click", () => { + document.body.classList.toggle("dark-theme"); window.localStorage && window.localStorage.setItem( - 'theme', - document.body.classList.contains('dark-theme') ? 'dark' : 'light', - ) -}) + "theme", + document.body.classList.contains("dark-theme") ? "dark" : "light", + ); +}); |