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, 8 insertions, 16 deletions

diff --git a/site/content/docs/5.3/examples/dropdowns/dropdowns.css b/site/content/docs/5.3/examples/dropdowns/dropdowns.css
index 556f310a9..f633e2cd8 100644
--- a/site/content/docs/5.3/examples/dropdowns/dropdowns.css
+++ b/site/content/docs/5.3/examples/dropdowns/dropdowns.css
@@ -1,7 +1,3 @@
-.dropdown-menu {
-  margin: 4rem auto;
-}
-
 .dropdown-item-danger {
   color: var(--bs-red);
 }
@@ -15,12 +11,13 @@
 }
 
 .btn-hover-light {
-  background-color: var(--bs-white);
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
 }
 .btn-hover-light:hover,
 .btn-hover-light:focus {
-  color: var(--bs-blue);
-  background-color: var(--bs-light);
+  color: var(--bs-link-hover-color);
+  background-color: var(--bs-tertiary-bg);
 }
 
 .cal-month,
@@ -46,22 +43,17 @@
 }
 .cal-btn:not([disabled]) {
   font-weight: 500;
+  color: var(--bs-emphasis-color);
 }
 .cal-btn:hover,
 .cal-btn:focus {
-  background-color: rgba(0, 0, 0, .05);
+  background-color: var(--bs-secondary-bg);
 }
 .cal-btn[disabled] {
   border: 0;
   opacity: .5;
 }
 
-.form-control-dark {
-  background-color: rgba(255, 255, 255, .05);
-  border-color: rgba(255, 255, 255, .15);
-}
-
-
 .w-220px {
   width: 220px;
 }
@@ -74,6 +66,6 @@
   width: 340px;
 }
 
-.w-600px {
-  width: 600px;
+.opacity-10 {
+  opacity: .1;
 }