fix: mode toggle not outlined when receiving keyboard focus (#1690)

The Tab key focus

Author: cotes2020

_includes/sidebar.html

@@ -44,7 +44,7 @@ <h1 class="site-title">
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button type="button" class="btn" aria-label="Switch Mode" id="mode-toggle">
+      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
         <i class="fas fa-adjust"></i>
       </button>
 

_sass/addon/commons.scss

@@ -823,7 +823,10 @@ $btn-mb: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: var(--sidebar-border-color) 0 0 0 1px;
+
+      &:not(:focus-visible) {
+        box-shadow: var(--sidebar-border-color) 0 0 0 1px;
+      }
 
       &:hover {
         background-color: var(--sidebar-hover-bg);
@@ -845,9 +848,6 @@ $btn-mb: 0.5rem;
     }
 
     #mode-toggle {
-      padding: 0;
-      border: 0;
-
       @extend %button;
       @extend %sidebar-links;
       @extend %sidebar-link-hover;