Update snippet examples for dark mode (#37834)

* Update snippet examples for dark mode

* Fix markup

* Review comments

* undo colored links docs from this PR

1 files changed, 9 insertions, 5 deletions

diff --git a/site/content/docs/5.3/examples/sidebars/sidebars.css b/site/content/docs/5.3/examples/sidebars/sidebars.css
index 5dc9fbaeb..f6a8f1c53 100644
--- a/site/content/docs/5.3/examples/sidebars/sidebars.css
+++ b/site/content/docs/5.3/examples/sidebars/sidebars.css
@@ -20,13 +20,13 @@ main {
 .btn-toggle {
   padding: .25rem .5rem;
   font-weight: 600;
-  color: rgba(0, 0, 0, .65);
+  color: var(--bs-emphasis-color);
   background-color: transparent;
 }
 .btn-toggle:hover,
 .btn-toggle:focus {
-  color: rgba(0, 0, 0, .85);
-  background-color: #d2f4ea;
+  color: rgba(var(--bs-emphasis-color-rgb), .85);
+  background-color: var(--bs-tertiary-bg);
 }
 
 .btn-toggle::before {
@@ -37,8 +37,12 @@ main {
   transform-origin: .5em 50%;
 }
 
+[data-bs-theme="dark"] .btn-toggle::before {
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+}
+
 .btn-toggle[aria-expanded="true"] {
-  color: rgba(0, 0, 0, .85);
+  color: rgba(var(--bs-emphasis-color-rgb), .85);
 }
 .btn-toggle[aria-expanded="true"]::before {
   transform: rotate(90deg);
@@ -51,7 +55,7 @@ main {
 }
 .btn-toggle-nav a:hover,
 .btn-toggle-nav a:focus {
-  background-color: #d2f4ea;
+  background-color: var(--bs-tertiary-bg);
 }
 
 .scrollarea {