Fix dark mode primary button color (#172)

roife · web-flow · commit 8012cf8d6c2b · 2026-05-27T22:18:33.000+08:00
diff --git a/docs/src/assets/landing.css b/docs/src/assets/landing.css
@@ -10,6 +10,10 @@
   --vide-overlay: hsla(var(--vide-accent-hsl), 0.14);
 }
 
+:root[data-theme='dark'] {
+  --vide-primary-button-color: #111827;
+}
+
 [data-has-hero] .page {
   background:
     linear-gradient(215deg, var(--vide-overlay), transparent 40%),
@@ -78,12 +82,12 @@
 }
 
 [data-has-hero] .hero .actions .sl-link-button.primary {
-  color: #fff;
+  color: var(--vide-primary-button-color, #fff);
   box-shadow: 0 0 2rem hsla(var(--vide-accent-hsl), 0.28);
 }
 
 [data-has-hero] .hero .actions .sl-link-button.primary:hover {
-  color: #fff;
+  color: var(--vide-primary-button-color, #fff);
 }
 
 [data-has-hero] .hero .actions .sl-link-button.primary p {
diff --git a/docs/src/components/HomepageCta.astro b/docs/src/components/HomepageCta.astro
@@ -27,12 +27,12 @@ import { homepageCtaActions } from '../data/homepage';
   }
 
   .vide-cta__actions :global(.sl-link-button.primary) {
-    color: #fff;
+    color: var(--vide-primary-button-color, #fff);
     box-shadow: 0 0 2rem hsla(var(--vide-accent-hsl), 0.28);
   }
 
   .vide-cta__actions :global(.sl-link-button.primary:hover) {
-    color: #fff;
+    color: var(--vide-primary-button-color, #fff);
   }
 
   .vide-cta__actions :global(.sl-link-button.primary p) {

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,10 @@`
`10`	`10`	`--vide-overlay: hsla(var(--vide-accent-hsl), 0.14);`
`11`	`11`	`}`
`12`	`12`
	`13`	`+:root[data-theme='dark'] {`
	`14`	`+ --vide-primary-button-color: #111827;`
	`15`	`+}`
	`16`	`+`
`13`	`17`	`[data-has-hero] .page {`
`14`	`18`	`background:`
`15`	`19`	`linear-gradient(215deg, var(--vide-overlay), transparent 40%),`
`@@ -78,12 +82,12 @@`
`78`	`82`	`}`
`79`	`83`
`80`	`84`	`[data-has-hero] .hero .actions .sl-link-button.primary {`
`81`		`- color: #fff;`
	`85`	`+ color: var(--vide-primary-button-color, #fff);`
`82`	`86`	`box-shadow: 0 0 2rem hsla(var(--vide-accent-hsl), 0.28);`
`83`	`87`	`}`
`84`	`88`
`85`	`89`	`[data-has-hero] .hero .actions .sl-link-button.primary:hover {`
`86`		`- color: #fff;`
	`90`	`+ color: var(--vide-primary-button-color, #fff);`
`87`	`91`	`}`
`88`	`92`
`89`	`93`	`[data-has-hero] .hero .actions .sl-link-button.primary p {`
Original file line number	Diff line number	Diff line change
`@@ -27,12 +27,12 @@ import { homepageCtaActions } from '../data/homepage';`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.vide-cta__actions :global(.sl-link-button.primary) {`
`30`		`- color: #fff;`
	`30`	`+ color: var(--vide-primary-button-color, #fff);`
`31`	`31`	`box-shadow: 0 0 2rem hsla(var(--vide-accent-hsl), 0.28);`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`.vide-cta__actions :global(.sl-link-button.primary:hover) {`
`35`		`- color: #fff;`
	`35`	`+ color: var(--vide-primary-button-color, #fff);`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.vide-cta__actions :global(.sl-link-button.primary p) {`