fix: Docusaurus preferred colour scheme refresh bug (#1815)

* fix: docusaurus preffered color scheme bug * docs(changeset): fix: docusaurus preffered color scheme bug
scalar · May 22, 2024 · 059598c · 059598c
1 parent 7205137
commit 059598c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/.changeset/tough-mirrors-begin.md b/.changeset/tough-mirrors-begin.md
@@ -0,0 +1,5 @@
+---
+"@scalar/docusaurus": patch
+---
+
+fix: docusaurus preffered color scheme bug
diff --git a/packages/docusaurus/src/theme.css b/packages/docusaurus/src/theme.css
@@ -7,7 +7,7 @@
   --refs-header-height: var(--ifm-navbar-height) !important;
 }
 /* basic theme */
-html[data-theme='light'] {
+html[data-theme='light'] .scalar-api-reference {
   --scalar-color-1: var(--ifm-font-color-base, #1c1e21);
   --scalar-color-2: var(--ifm-color-emphasis-700, #606770);
   --scalar-color-3: var(--ifm-color-emphasis-600, #8d949e);
@@ -24,7 +24,7 @@ html[data-theme='light'] {
   --scalar-border-color: var(--ifm-color-emphasis-300, #ebedf0);
 }
 @supports (color: color-mix(in srgb, rgba(0, 0, 0, 1) 5%, white)) {
-  html[data-theme='light'] {
+  html[data-theme='light'] .scalar-api-reference {
     --scalar-background-1: color-mix(
       in srgb,
       var(--ifm-background-color, #fff) 0%,
@@ -35,7 +35,7 @@ html[data-theme='light'] {
   }
 }
 
-html[data-theme='dark'] {
+html[data-theme='dark'] .scalar-api-reference {
   --scalar-color-1: var(--ifm-font-color-base, rgb(227, 227, 227));
   --scalar-color-2: var(--ifm-color-emphasis-700, #dadde1);
   --scalar-color-3: var(--ifm-color-emphasis-400, #8d949e);
@@ -70,13 +70,13 @@ html[data-theme='dark'] {
   --scalar-sidebar-search-border-color: var(--scalar-border-color);
   --scalar-sidebar-search--color: var(--scalar-color-3);
 }
-html[data-theme='light'] .t-doc__sidebar {
+html[data-theme='light'] .scalar-api-reference .t-doc__sidebar {
   --scalar-sidebar-item-hover-background: var(
     --ifm-menu-color-background-hover,
     rgba(0, 0, 0, 0.05)
   );
 }
-html[data-theme='dark'] .t-doc__sidebar {
+html[data-theme='dark'] .scalar-api-reference .t-doc__sidebar {
   --scalar-sidebar-item-hover-background: var(
     --ifm-menu-color-background-hover,
     hsla(0, 0%, 100%, 0.05)
@@ -86,7 +86,7 @@ html[data-theme='dark'] .t-doc__sidebar {
   --refs-sidebar-width: 300px !important;
 }
 /* advanced */
-html[data-theme='light'] {
+html[data-theme='light'] .scalar-api-reference {
   --scalar-color-green: #00a400;
   --scalar-color-red: #fa383e;
   --scalar-color-yellow: #ffba00;
@@ -104,7 +104,7 @@ html[data-theme='light'] {
     0 1px 2px 1px rgba(30, 35, 90, 0.4)
   );
 }
-html[data-theme='dark'] {
+html[data-theme='dark'] .scalar-api-reference {
   --scalar-color-green: #00a400;
   --scalar-color-red: #fa383e;
   --scalar-color-yellow: #ffba00;
@@ -129,7 +129,7 @@ html[data-theme='dark'] {
   border-top: none !important;
 }
 .scalar-card-checkbox .scalar-card-checkbox-checkmark:after,
-html[data-theme='light'] .api-client-drawer {
+html[data-theme='light'] .scalar-api-reference .api-client-drawer {
   --scalar-background-1: white;
 }
 .sidebar-heading.sidebar-group-item__folder {
@@ -287,7 +287,7 @@ html[data-theme='light'] .api-client-drawer {
   .t-doc__sidebar .sidebar {
     border-right: none !important;
   }
-  html[data-theme='light'] .sidebar {
+  html[data-theme='light'] .scalar-api-reference .sidebar {
     backdrop-filter: blur(50px);
   }
   .references-navigation-list {