mirror of
https://github.com/Speyll/anemone.git
synced 2024-11-10 00:16:35 +00:00
renamed default_mode to default_theme, streamlined the code for theme switching, added documentation
This commit is contained in:
parent
f8d26c5907
commit
520cbd0dbc
3 changed files with 49 additions and 30 deletions
18
README.md
18
README.md
|
@ -95,6 +95,24 @@ en = { name = "/blog/", url = "/blog" }
|
||||||
fr = { name = "/blog/", url = "/blog" }
|
fr = { name = "/blog/", url = "/blog" }
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### Default Theme
|
||||||
|
|
||||||
|
To configure the default theme, simply utilize the `default_theme` variable and set it to either `light` or `dark`:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[extra]
|
||||||
|
default_theme = "light"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Display Author Name in Blog Posts
|
||||||
|
|
||||||
|
Customize the display of the author's name in your blog posts by toggling the `display_author` variable to either `true` or `false`:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[extra]
|
||||||
|
display_author = true
|
||||||
|
```
|
||||||
|
|
||||||
### Webrings
|
### Webrings
|
||||||
|
|
||||||
Add a webring with a shortcode:
|
Add a webring with a shortcode:
|
||||||
|
|
|
@ -46,8 +46,11 @@ internal_level = "warn"
|
||||||
[extra]
|
[extra]
|
||||||
author = "Speyll"
|
author = "Speyll"
|
||||||
display_author = true
|
display_author = true
|
||||||
|
|
||||||
favicon = "favicon.ico"
|
favicon = "favicon.ico"
|
||||||
image = ""
|
image = ""
|
||||||
|
|
||||||
|
default_theme = "dark"
|
||||||
list_pages = false
|
list_pages = false
|
||||||
twitter_card = true
|
twitter_card = true
|
||||||
|
|
||||||
|
|
|
@ -7,46 +7,44 @@
|
||||||
rel="noreferrer noopener" {% endif %}>{{ current_nav_item.name }}</a>
|
rel="noreferrer noopener" {% endif %}>{{ current_nav_item.name }}</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<div class="themeSwitch">
|
<div class="themeSwitch">
|
||||||
{% if not config.extra.default_mode %}
|
{% if not config.extra.default_theme %}
|
||||||
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
|
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
|
||||||
class="icons icons__background">
|
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
|
||||||
<use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
|
|
||||||
</svg></button>
|
{% elif config.extra.default_theme and config.extra.default_theme == "light" %}
|
||||||
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
|
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"> <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
|
||||||
<use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
|
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
|
||||||
</svg></button>
|
|
||||||
{% elif config.extra.default_mode and config.extra.default_mode == "light" %}
|
{% elif config.extra.default_theme and config.extra.default_theme == "dark" %}
|
||||||
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
|
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
|
||||||
class="icons icons__background">
|
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
|
||||||
<use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
|
|
||||||
</svg></button>
|
|
||||||
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
|
|
||||||
<use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
|
|
||||||
</svg></button>
|
|
||||||
{% elif config.extra.default_mode and config.extra.default_mode == "dark" %}
|
|
||||||
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
|
|
||||||
<use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
|
|
||||||
</svg></button>
|
|
||||||
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
|
|
||||||
class="icons icons__background">
|
|
||||||
<use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
|
|
||||||
</svg></button>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const setTheme = (theme) => {
|
const setTheme = (theme) => {
|
||||||
document.documentElement.className = theme;
|
document.documentElement.className = theme;
|
||||||
localStorage.setItem('theme', theme);
|
localStorage.setItem('theme', theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const hasCodeRun = localStorage.getItem('hasCodeRun');
|
||||||
|
|
||||||
|
if (!hasCodeRun) {
|
||||||
|
const defaultTheme = "{{ config.extra.default_theme }}";
|
||||||
|
setTheme(defaultTheme);
|
||||||
|
localStorage.setItem('hasCodeRun', 'true');
|
||||||
|
}
|
||||||
|
|
||||||
const getTheme = () => {
|
const getTheme = () => {
|
||||||
const theme = localStorage.getItem('theme');
|
const theme = localStorage.getItem('theme');
|
||||||
theme && setTheme(theme);
|
if (theme) {
|
||||||
|
setTheme(theme);
|
||||||
}
|
}
|
||||||
getTheme()
|
}
|
||||||
{% if config.extra.default_mode %}
|
|
||||||
setTheme("{{ config.extra.default_mode }}")
|
getTheme();
|
||||||
{% endif %}
|
|
||||||
</script>
|
</script>
|
Loading…
Reference in a new issue