Exposed gradient background image as a css variable

unparallel-innovation · Oct 15, 2024 · 2bc80ff · 2bc80ff
1 parent f2408ff
commit 2bc80ff
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- Exposed gradient background image as a css variable 
 
 ## [0.6.5] - 2024-09-04
 - Added missing utilities for sublte colors

diff --git a/dev/index.ts b/dev/index.ts
@@ -49,7 +49,11 @@ const theme: BootstrapTheme = {
 		"$border-radius-sm": "1.5rem",
 		"$toast-border-radius": "2rem"
 	},
-
+	background: {
+		type: "gradient",
+		firstColor: "#FF0000",
+		secondColor: "#00FFFF"
+	},
 	colors: {
 		primary: "#FFAACC",
 		secondary: "#ccdbe1",

diff --git a/dev/test.css b/dev/test.css
@@ -4,6 +4,15 @@
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
+:root {
+  --gradient-background-image:linear-gradient(0deg, #FF0000, #00FFFF);
+}
+
+body {
+  background-image: var(--gradient-background-image);
+  background-attachment: fixed;
+}
+
 :root,
 [data-bs-theme=light] {
   --bs-blue: #0d6efd;

diff --git a/dev/test2.css b/dev/test2.css
@@ -4,6 +4,15 @@
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
+:root {
+  --gradient-background-image:linear-gradient(0deg, #FF0000, #00FFFF);
+}
+
+body {
+  background-image: var(--gradient-background-image);
+  background-attachment: fixed;
+}
+
 :root,
 [data-bs-theme=light] {
   --bs-blue: #0d6efd;

diff --git a/src/Bootstrap5Generator/index.ts b/src/Bootstrap5Generator/index.ts
@@ -228,10 +228,13 @@ export default class Bootstrap5Generator {
 			let _orientation: string = "0deg"
 			if (typeof orientation === "number") _orientation = `${orientation}deg`
 			else if (typeof orientation === "string") _orientation = orientation
-
+			const key = "gradient-background-image"
 			return `
+					:root {
+						--${key}:linear-gradient(${_orientation}, ${firstColor}, ${secondColor});
+					}
 					body {
-						background-image: linear-gradient(${_orientation}, ${firstColor}, ${secondColor});
+						background-image: var(--${key});
 						background-attachment: fixed;
 					}
 				`