fix(register): apply consistent CSS properties to option rows (#1134)

Author: JjungminLee

src/components/layout.css

@@ -18,7 +18,12 @@
   --color-orange: #e67e22;
 }
 
+.dark {
+  --color-options: #0e101c;
+}
+
 .light {
+  --color-options: #ffff;
   --color-text: black;
   --color-background: #ffff;
   --color-footer: #081229;

src/content/docs/createFormControl.mdx

@@ -25,10 +25,10 @@ This function create the entire form state subscription and allow you to subscri
 | `...returns`  | <TypeText>Functions</TypeText> | `useForm` return methods                                       |
 
 <Admonition type="important" title="Notes">
-  - This function is published at **v7.55.0** - This function is
-  completely optional, you can consider to use this instead of `useFormContext`
-  API. - You may find it useful if you would like to subscribe formsState by
-  skipping react re-render.
+  - This function is published at **v7.55.0** - This function is completely
+  optional, you can consider to use this instead of `useFormContext` API. - You
+  may find it useful if you would like to subscribe formsState by skipping react
+  re-render.
 </Admonition>
 
 <Admonition type="important" title="Rules">

src/content/docs/useform/register.mdx

@@ -48,7 +48,7 @@ By selecting the register option, the API table below will get updated.
 
 <TabGroup buttonLabels={["validation", "validation and error message"]}>
 
-<div style={{ background: 'var(--color-primary)', padding: 20 }}>
+<div style={{ background: 'var(--color-options)', padding: 20 }}>
 
 | Name                                                                          | Description                                                                                                                                                                                                                                                                                                                    |
 | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -72,7 +72,7 @@ By selecting the register option, the API table below will get updated.
 
 </div>
 
-<div style={{ background: 'var(--color-primary)', padding: 20 }}>
+<div style={{ background: 'var(--color-options)', padding: 20 }}>
 
 | Name                                                                                                           | Description                                                                                                                                                                                                                                                                                                                    |
 | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

src/data/api.tsx

@@ -2069,7 +2069,8 @@ setValue('notRegisteredInput', { test: '1', test2: '2' }); // ✅ sugar syntax t
                     </Link>
                     <p>
                       <b className={typographyStyles.note}>Important: </b>This
-                      is only applicable to <strong>built-in</strong> validation.
+                      is only applicable to <strong>built-in</strong>{" "}
+                      validation.
                     </p>
                   </p>
                 </td>