change theme switcher to icon #167

assets/css/main.css

@@ -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;
+    display: inline;
-    margin-bottom: 0;
+    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);
+    cursor: pointer;
-    background: var(--switcher-bg-color);
+}
-    padding: 0.5em 1em;
+
-    font-size: 16px;
+.theme-switcher-svg {
-    border: none;
+    fill: currentColor;
-    margin-bottom: 1em;
 }
 
 .h-card {

i18n/bn.yaml

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

i18n/de.yaml

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

i18n/en.yaml

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

i18n/es.yaml

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

i18n/fr.yaml

@@ -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"

i18n/id.yaml

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

i18n/pl.yaml

@@ -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"

i18n/pt.yaml

@@ -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"

i18n/ru.yaml

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

i18n/tw.yaml

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

i18n/zh-cn.yaml

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

layouts/partials/fa-icons/halfcircle.svg

@@ -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>

layouts/partials/footer.html

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

layouts/partials/header.html

@@ -1,7 +1,13 @@
 <div class="header-top">
-    {{ partial "site-title.html" . }}
+    <div class="header-top-left">
-    {{ partial "social.html" . }}
+        {{ 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" . }}

layouts/partials/theme-switcher.html

@@ -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">
+    <div class="theme-switcher">
-        {{ i18n "darkTheme" }}
+        {{ partial "font-awesome.html" (dict "iconName" "halfcircle" "custom" false) }}
-    </button>
+    </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() {