From 8514727e1d68463ad15f282991aa9712e1623206 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Tue, 4 Oct 2022 13:17:05 +0200
Subject: [PATCH] style: initial dark and light style scaffold

---
 packages/astro-reactive-form/Form.astro | 27 ++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/astro-reactive-form/Form.astro b/packages/astro-reactive-form/Form.astro
index 207ebcc..07972d5 100644
--- a/packages/astro-reactive-form/Form.astro
+++ b/packages/astro-reactive-form/Form.astro
@@ -8,9 +8,26 @@ export interface Props {
 
 const { formGroups } = Astro.props;
 ---
+<form class="light">
+	{formGroups?.map((group) => <FieldSet group={group} />)}
+</form>
 
-{
-		<form>
-			{formGroups?.map((group) => <FieldSet group={group} />)}
-		</form>
-}
+<style>
+	.light {
+		/**
+		* run dev server with: "npm run dev",
+		* then open browser to "localhost:3000"
+		* add a class="light" to the <form> element above to test changes
+		* INSERT STYLES FOR LIGHT MODE BELOW: */
+	}
+
+	.dark {
+		/**
+		* run dev server with: "npm run dev",
+		* then open browser to "localhost:3000"
+		* add a class="dark" to the <form> element above to test changes
+		* INSERT STYLES FOR DARK MODE BELOW: */
+		background-color: #333;
+		color: white;
+	}
+</style>