fix(pages): recouple button theme to colorScheme and fix appearance for some logos in dark mode (#12537)

* recouple button theme to colorScheme

* fix appearance for some logos in dark mode

---------

Co-authored-by: Thang Vu <[email protected]>

Author: EdmundDong

packages/core/src/lib/pages/signin.tsx

@@ -126,10 +126,7 @@ export default function SigninPage(props: {
                     type="submit"
                     className="button"
                     style={{
-                      "--provider-bg": "#fff",
-                      "--provider-bg-hover": `color-mix(in srgb, ${color} 30%, #fff)`,
-                      "--provider-dark-bg": "#161b22",
-                      "--provider-dark-bg-hover": `color-mix(in srgb, ${color} 30%, #000)`,
+                      "--provider-brand-color": color,
                     }}
                     tabIndex={0}
                   >

packages/core/src/lib/pages/styles.css

@@ -18,6 +18,12 @@
   --color-button-active-background: #f9f9f9;
   --color-button-active-border: #aaa;
   --color-separator: #ccc;
+  --provider-bg: #fff;
+  --provider-bg-hover: color-mix(
+    in srgb,
+    var(--provider-brand-color) 30%,
+    #fff
+  );
 }
 
 .__next-auth-theme-dark {
@@ -30,6 +36,30 @@
   --color-button-active-background: #060606;
   --color-button-active-border: #666;
   --color-separator: #444;
+  --provider-bg: #161b22;
+  --provider-bg-hover: color-mix(
+    in srgb,
+    var(--provider-brand-color) 30%,
+    #000
+  );
+  img[src$="42-school.svg"],
+  img[src$="apple.svg"],
+  img[src$="boxyhq-saml.svg"],
+  img[src$="eveonline.svg"],
+  img[src$="github.svg"],
+  img[src$="mailchimp.svg"],
+  img[src$="medium.svg"],
+  img[src$="okta.svg"],
+  img[src$="patreon.svg"],
+  img[src$="ping-id.svg"],
+  img[src$="roblox.svg"],
+  img[src$="threads.svg"],
+  img[src$="wikimedia.svg"] {
+    filter: invert(1);
+  }
+  #submitButton {
+    background-color: var(--provider-bg, var(--color-info));
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -43,40 +73,31 @@
     --color-button-active-background: #060606;
     --color-button-active-border: #666;
     --color-separator: #444;
-  }
-
-  button,
-  a.button {
-    color: var(--provider-dark-color, var(--color-primary)) !important;
-    background-color: var(
-      --provider-dark-bg,
-      var(--color-background)
-    ) !important;
-
-    &:hover {
-      background-color: var(
-        --provider-dark-bg-hover,
-        var(--color-background-hover)
-      ) !important;
+    --provider-bg: #161b22;
+    --provider-bg-hover: color-mix(
+      in srgb,
+      var(--provider-brand-color) 30%,
+      #000
+    );
+    img[src$="42-school.svg"],
+    img[src$="apple.svg"],
+    img[src$="boxyhq-saml.svg"],
+    img[src$="eveonline.svg"],
+    img[src$="github.svg"],
+    img[src$="mailchimp.svg"],
+    img[src$="medium.svg"],
+    img[src$="okta.svg"],
+    img[src$="patreon.svg"],
+    img[src$="ping-id.svg"],
+    img[src$="roblox.svg"],
+    img[src$="threads.svg"],
+    img[src$="wikimedia.svg"] {
+      filter: invert(1);
     }
-
-    span {
-      color: var(--provider-dark-bg) !important;
+    #submitButton {
+      background-color: var(--provider-bg, var(--color-info));
     }
   }
-
-  img[src$="42-school.svg"],
-  img[src$="apple.svg"],
-  img[src$="boxyhq-saml.svg"],
-  img[src$="eveonline.svg"],
-  img[src$="github.svg"],
-  img[src$="mailchimp.svg"],
-  img[src$="medium.svg"],
-  img[src$="okta.svg"],
-  img[src$="threads.svg"],
-  img[src$="wikimedia.svg"] {
-    filter: invert(1);
-  }
 }
 
 html {
@@ -196,7 +217,7 @@ a.button {
   }
 
   span {
-    color: #fff;
+    color: var(--provider-bg);
   }
 }