diff --git a/packages/astro-reactive-form/Form.astro b/packages/astro-reactive-form/Form.astro
index 434e765..ef2f87e 100644
--- a/packages/astro-reactive-form/Form.astro
+++ b/packages/astro-reactive-form/Form.astro
@@ -6,12 +6,15 @@ import FieldSet from './components/FieldSet.astro';
 export interface Props {
 	submitControl?: Submit;
 	formGroups: FormGroup[];
+	theme?: "light" | "dark";
 }
 
-const { submitControl, formGroups } = Astro.props;
+const { submitControl, formGroups, theme } = Astro.props;
+
+const formTheme = theme ?? "light";
 ---
 
-<form class="light">
+<form class={formTheme}>
 	{formGroups?.map((group) => <FieldSet group={group} />)}
 	{submitControl && <Field control={new FormControl(submitControl)} />}
 </form>
diff --git a/packages/astro-reactive-form/test/Form.astro.test.js b/packages/astro-reactive-form/test/Form.astro.test.js
index bb3945e..631a2a9 100644
--- a/packages/astro-reactive-form/test/Form.astro.test.js
+++ b/packages/astro-reactive-form/test/Form.astro.test.js
@@ -1,4 +1,5 @@
 import { expect } from 'chai';
+import { describe, beforeEach, it } from 'mocha';
 import { getComponentOutput } from 'astro-component-tester';
 
 describe('Form.astro test', () => {
@@ -44,12 +45,14 @@ describe('Form.astro test', () => {
 			const expectedCount = 3;
 			const element = /<fieldset>/g;
 			const fakeFormGroup = {
-				controls: [{
-					type: 'checkbox',
-					name: 'fake-checkbox',
-					label: 'FAKE CHECKBOX'
-				}]
-			}
+				controls: [
+					{
+						type: 'checkbox',
+						name: 'fake-checkbox',
+						label: 'FAKE CHECKBOX',
+					},
+				],
+			};
 			const props = { formGroups: Array(expectedCount).fill(fakeFormGroup) };
 			component = await getComponentOutput('./Form.astro', props);
 
@@ -59,7 +62,7 @@ describe('Form.astro test', () => {
 
 			// assert
 			expect(matches.length).to.equal(expectedCount);
-		})
+		});
 	});
 });