From 749e48e3fa45f8b937401ad9351df9eca8292387 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 21 Apr 2024 00:15:14 +0800
Subject: [PATCH] fix: mode toggle not outlined when receiving keyboard focus
 (#1690)

The Tab key focus
---
 _includes/sidebar.html   | 2 +-
 _sass/addon/commons.scss | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 577cc13f814..4f0bb8cad3d 100644
--- 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
index d08dc351799..e6cf7c269f6 100644
--- 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;