kemitix/anemone
1
0
Fork 0
mirror of https://github.com/Speyll/anemone.git synced 2024-11-23 21:37:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

renamed default_mode to default_theme, streamlined the code for theme switching, added documentation

Browse source
This commit is contained in:
Speyll 2023-10-05 22:38:45 +01:00
parent f8d26c5907
commit 520cbd0dbc
3 changed files with 49 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
README.md
View file

@ -95,6 +95,24 @@ en = { 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
Add a webring with a shortcode:

3
config.toml
View file

@ -46,8 +46,11 @@ internal_level = "warn"
[extra]
author = "Speyll"
display_author = true
favicon = "favicon.ico"
image = ""
default_theme = "dark"
list_pages = false
twitter_card = true

56
templates/header.html
View file

@ -7,46 +7,44 @@
rel="noreferrer noopener" {% endif %}>{{ current_nav_item.name }}</a>
{% endif %}
{% endfor %}
<div class="themeSwitch">
{% if not config.extra.default_mode %}
<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>
<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 == "light" %}
<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>
<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>
{% if not config.extra.default_theme %}
<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>
<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_theme and config.extra.default_theme == "light" %}
<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>
<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_theme and config.extra.default_theme == "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 %}
</div>
</nav>
{% endif %}
<script>
const setTheme = (theme) => {
document.documentElement.className = 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 theme = localStorage.getItem('theme');
theme && setTheme(theme);
if (theme) {
setTheme(theme);
}
}
getTheme()
{% if config.extra.default_mode %}
setTheme("{{ config.extra.default_mode }}")
{% endif %}
getTheme();
</script>