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

The Tab key focus
cotes2020 · Apr 20, 2024 · cd37f63 · cd37f63
1 parent 015d567
commit cd37f63
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/_includes/sidebar.html b/_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>
 

diff --git a/_sass/addon/commons.scss b/_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;