fix: replace icon.

1. replace the twitter's icon with an x and adaptive theme.
2. replace github's HD icon.
3. icons are from the official.

config.template.toml

@@ -19,9 +19,9 @@ pygmentsUseClasses = true
   keywords = "blog, google analytics"
   rss = true
   lastmod = true
-  favicon = "/images/github.png"
+  favicon = "/images/github-mark.png"
   avatar = "/images/avatar.png"
-  headerIcon = "/images/GitHub-Mark-Light-32px.png"
+  headerIcon = "/images/github-mark-white.png"
   location = "China"
   userStatusEmoji = "😀"
   enableGitalk = true

layouts/partials/user-profile.html

@@ -118,7 +118,9 @@
 
           {{ if .Site.Params.twitter}}
           <a style="margin: 0 10px 10px 0;" href="https://twitter.com/{{ .Site.Params.twitter }}">
-            <img alt="@twitter" width="32" height="32" src="{{ "images/twitter.png" | absURL }}" class="avatar">
+            <svg  width="32" height="32" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path id="twitter-icon" d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+            </svg>
           </a>
           {{ end }}
 
@@ -204,12 +206,15 @@ window.onscroll = function (e) {
 
 var style = localStorage.getItem('data-color-mode');
 iconElement = document.getElementById('github-icon');
+twitterIconElement = document.getElementById('twitter-icon');
 if (style == 'light') {
   iconElement.setAttribute('fill', '#24292e');
+  twitterIconElement.setAttribute("fill","black")
 }
 else {
   iconElement.removeAttribute('fill');
   iconElement.setAttribute('class', 'octicon');
   iconElement.setAttribute('color', '#f0f6fc');
+  twitterIconElement.setAttribute("fill","white")
 }
 </script>

static/js/theme-mode.js

@@ -4,6 +4,7 @@ function switchTheme() {
 
   if (currentStyle === 'light') {
     setTheme('dark');
+    setIconTheme('dark')
     if (iconElement) {
       iconElement.setAttribute('class', 'octicon');
       iconElement.setAttribute('color', '#f0f6fc');
@@ -11,6 +12,7 @@ function switchTheme() {
   }
   else {
     setTheme('light');
+    setIconTheme('light')
     if (iconElement) {
       iconElement.removeAttribute('color');
       iconElement.removeAttribute('class');
@@ -26,6 +28,15 @@ function setTheme(style) {
   localStorage.setItem('data-color-mode', style);
 }
 
+function setIconTheme(theme) {
+  twitterIconElement = document.getElementById('twitter-icon');
+  if (theme === 'light') {
+    twitterIconElement.setAttribute("fill", "black")
+  } else if (theme === 'dark') {
+    twitterIconElement.setAttribute("fill", "white")
+  }
+}
+
 function currentTheme() {
   const localStyle = localStorage.getItem('data-color-mode');
   const systemStyle = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';