Rely on iframe content to set html color-scheme based on theme

giscus · Nov 6, 2022 · 0a315b0 · 0a315b0
1 parent 946b5d0
commit 0a315b0
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 27 deletions.
diff --git a/client.ts b/client.ts
@@ -115,7 +115,6 @@
 
   .giscus-frame {
     border: none;
-    color-scheme: normal;
   }
 `;
   document.head.prepend(style);

diff --git a/styles/themes/custom_example.css b/styles/themes/custom_example.css
@@ -4,6 +4,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: dark;
+}
+
 main {
   --color-prettylights-syntax-comment: #768390;
   --color-prettylights-syntax-constant: #6cb6ff;
@@ -84,8 +88,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  color-scheme: dark;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/dark.css b/styles/themes/dark.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: dark;
+}
+
 main {
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
@@ -83,8 +87,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  color-scheme: dark;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/dark_dimmed.css b/styles/themes/dark_dimmed.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: dark;
+}
+
 main {
   --color-prettylights-syntax-comment: #768390;
   --color-prettylights-syntax-constant: #6cb6ff;
@@ -83,8 +87,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  color-scheme: dark;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/dark_high_contrast.css b/styles/themes/dark_high_contrast.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: dark;
+}
+
 main {
   --color-prettylights-syntax-comment: #bdc4cc;
   --color-prettylights-syntax-constant: #91cbff;
@@ -83,8 +87,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  color-scheme: dark;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/dark_protanopia.css b/styles/themes/dark_protanopia.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: dark;
+}
+
 main {
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
@@ -83,8 +87,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  color-scheme: dark;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/dark_tritanopia.css b/styles/themes/dark_tritanopia.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: dark;
+}
+
 main {
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
@@ -83,8 +87,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  color-scheme: dark;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/light.css b/styles/themes/light.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: light;
+}
+
 main {
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-constant: #0550ae;
@@ -83,8 +87,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-1);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
-
-  color-scheme: light;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/light_high_contrast.css b/styles/themes/light_high_contrast.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: light;
+}
+
 main {
   --color-prettylights-syntax-comment: #66707b;
   --color-prettylights-syntax-constant: #023b95;
@@ -83,8 +87,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-1);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
-
-  color-scheme: light;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/light_protanopia.css b/styles/themes/light_protanopia.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: light;
+}
+
 main {
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-constant: #0550ae;
@@ -83,8 +87,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-1);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
-
-  color-scheme: light;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/light_tritanopia.css b/styles/themes/light_tritanopia.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: light;
+}
+
 main {
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-constant: #0550ae;
@@ -83,8 +87,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-1);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
-
-  color-scheme: light;
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/preferred_color_scheme.css b/styles/themes/preferred_color_scheme.css
@@ -3,6 +3,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: light;
+}
+
 main {
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-constant: #0550ae;
@@ -84,8 +88,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-1);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
-
-  color-scheme: light;
 }
 
 main .pagination-loader-container {
@@ -103,6 +105,10 @@ main .gsc-loading-image {
    * https://github.com/primer/primitives/blob/main/LICENSE
    */
 
+  html {
+    color-scheme: dark;
+  }
+
   main {
     --color-prettylights-syntax-comment: #8b949e;
     --color-prettylights-syntax-constant: #79c0ff;
@@ -184,8 +190,6 @@ main .gsc-loading-image {
     /*! Extensions from @primer/css/alerts/flash.scss */
     --color-social-reaction-bg-hover: var(--color-scale-gray-7);
     --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-    color-scheme: dark;
   }
 
   main .pagination-loader-container {

diff --git a/styles/themes/transparent_dark.css b/styles/themes/transparent_dark.css
@@ -4,6 +4,10 @@
  * https://github.com/primer/primitives/blob/main/LICENSE
  */
 
+html {
+  color-scheme: dark;
+}
+
 main {
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
@@ -85,8 +89,6 @@ main {
   /*! Extensions from @primer/css/alerts/flash.scss */
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);
   --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  color-scheme: dark;
 }
 
 main .pagination-loader-container {