syntaxerrormmm/hugo-theme-anubis2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change theme switcher to icon #167

Browse Source
This commit is contained in:
Dmitry Kolosov 2024-01-08 17:45:37 +01:00
parent 57eb2998cf
commit ae1e0fc880
16 changed files with 24 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/main.css
View File

@ -224,9 +224,11 @@ header h2 {
align-items: center;
justify-content: space-between;
vertical-align: middle;
margin-top: 1em;
}
.site-title {
display: inline;
white-space: nowrap;
}
@ -245,8 +247,8 @@ header nav a {
/* Social icons */
.social-icons {
margin-top: 1em;
margin-bottom: 0;
display: inline;
margin: 1em 0 0 3em;
padding: 0;
list-style-type: none;
}
@ -688,12 +690,11 @@ ul.language-select > li, ul.footer-menu > li {
}
.theme-switcher {
color: var(--switcher-color);
background: var(--switcher-bg-color);
padding: 0.5em 1em;
font-size: 16px;
border: none;
margin-bottom: 1em;
cursor: pointer;
}
.theme-switcher-svg {
fill: currentColor;
}
.h-card {

6
i18n/bn.yaml
View File

@ -37,11 +37,5 @@ toAllCategories:
skipToContent:
other: "প্রচ্ছদে প্রবেশ করুন"
darkTheme:
other: "অন্ধকার থিম"
lightTheme:
other: "আলোক থিম"
readNext:
other: "পরের প্রচ্ছদ"

6
i18n/de.yaml
View File

@ -37,11 +37,5 @@ toAllCategories:
skipToContent:
other: "Zum Hauptinhalt springen"
darkTheme:
other: "Dunkles Theme"
lightTheme:
other: "Helles Theme"
readNext:
other: "Weiter lesen"

6
i18n/en.yaml
View File

@ -43,12 +43,6 @@ toAllCategories:
skipToContent:
other: "Skip to main content"
darkTheme:
other: "Dark theme"
lightTheme:
other: "Light theme"
readNext:
other: "Read next"

6
i18n/es.yaml
View File

@ -37,11 +37,5 @@ toAllCategories:
skipToContent:
other: "Saltar al contenido principal"
darkTheme:
other: "Dark theme"
lightTheme:
other: "Light theme"
readNext:
other: "Leer el siguiente"

6
i18n/fr.yaml
View File

@ -37,11 +37,5 @@ toAllCategories:
skipToContent:
other: "Aller au contenu"
darkTheme:
other: "Thème sombre"
lightTheme:
other: "Thème clair"
readNext:
other: "Lire la suite"

6
i18n/id.yaml
View File

@ -37,11 +37,5 @@ toAllCategories:
skipToContent:
other: "Lompat ke konten"
darkTheme:
other: "Tema Gelap"
lightTheme:
other: "Tema Terang"
readNext:
other: "Baca Selanjutnya"

6
i18n/pl.yaml
View File

@ -37,11 +37,5 @@ toAllCategories:
skipToContent:
other: "Przejdź do głównej zawartości"
darkTheme:
other: "Ciemny schemat"
lightTheme:
other: "Jasny schemat"
readNext:
other: "Czytaj dalej"

6
i18n/pt.yaml
View File

@ -37,11 +37,5 @@ toAllCategories:
skipToContent:
other: "Pular para o conteúdo principal"
darkTheme:
other: "Tema Escuro"
lightTheme:
other: "Tema Claro"
readNext:
other: "Leia a seguir"

6
i18n/ru.yaml
View File

@ -40,12 +40,6 @@ toAllCategories:
skipToContent:
other: "Перейти к основному контенту"
darkTheme:
other: "Тёмная тема"
lightTheme:
other: "Светлая тема"
readNext:
other: "Читать далее"

6
i18n/tw.yaml
View File

@ -37,11 +37,5 @@ toAllCategories:
skipToContent:
other: "跳至內容"
darkTheme:
other: "暗色主題"
lightTheme:
other: "亮色主題"
readNext:
other: "閱讀下一篇"

6
i18n/zh-cn.yaml
View File

@ -43,11 +43,5 @@ toAllCategories:
skipToContent:
other: "跳至内容"
darkTheme:
other: "暗色主题"
lightTheme:
other: "亮色主题"
readNext:
other: "继续阅读"

3
layouts/partials/fa-icons/halfcircle.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 290 290">
<path d="M142.959,0C64.131,0,0,64.132,0,142.96c0,78.828,64.131,142.959,142.959,142.959c78.828,0,142.96-64.131,142.96-142.959 C285.919,64.132,221.787,0,142.959,0z M142.959,260.919V142.96V25c65.043,0,117.96,52.917,117.96,117.96 C260.919,208.003,208.002,260.919,142.959,260.919z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 358 B

2
layouts/partials/footer.html
View File

@ -19,8 +19,6 @@
{{ partial "footer-extra.html" . }}
</p>
</div>
{{ partial "theme-switcher.html" . }}
</div>
{{ partial "h-card.html" . }}

12
layouts/partials/header.html
View File

@ -1,7 +1,13 @@
<div class="header-top">
{{ partial "site-title.html" . }}
{{ partial "social.html" . }}
<div class="header-top-left">
{{ partial "site-title.html" . }}
{{ partial "social.html" . }}
</div>
<div class="header-top-right">
{{ partial "theme-switcher.html" . }}
</div>
</div>
{{ if .Site.Menus.main }}
<nav>
{{ $currentPage := . }}
@ -15,4 +21,4 @@
{{ if .Site.Params.mathjax }}{{ partial "mathjax_support.html" . }}{{ end }}
{{ partial "header-extra.html" . }}
{{ partial "header-extra.html" . }}

16
layouts/partials/theme-switcher.html
View File

@ -5,9 +5,9 @@
{{ if not (in (slice "light-without-switcher" "dark-without-switcher") $style) }}
{{ if ne "auto-without-switcher" $style }}
<button class="theme-switcher">
{{ i18n "darkTheme" }}
</button>
<div class="theme-switcher">
{{ partial "font-awesome.html" (dict "iconName" "halfcircle" "custom" false) }}
</div>
{{ end }}
<script>
@ -21,7 +21,6 @@ let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
const autoChangeScheme = e => {
currentTheme = e.matches ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', currentTheme)
changeButtonText()
}
document.addEventListener('DOMContentLoaded', function() {
@ -36,7 +35,6 @@ document.addEventListener('DOMContentLoaded', function() {
}
if (switchButton) {
changeButtonText()
switchButton.addEventListener('click', switchTheme, false)
}
@ -59,13 +57,6 @@ function detectCurrentScheme() {
return 'light'
}
function changeButtonText()
{
if (switchButton) {
switchButton.textContent = currentTheme == 'dark' ? {{ i18n "lightTheme" }} : {{ i18n "darkTheme" }}
}
}
function switchTheme(e) {
if (currentTheme == 'dark') {
if (localStorage !== null)
@ -78,7 +69,6 @@ function switchTheme(e) {
document.documentElement.setAttribute('data-theme', 'dark')
currentTheme = 'dark'
}
changeButtonText()
}
function showContent() {