Tema escuro no footer tambem

index.html

@@ -54,6 +54,8 @@ <h1 class="navbar-brand nav-link myTitle">Multiform validator</h1>
                     <div class="container">
                         <div class="row">
                             <div class="col-12">
+                                <h1>Welcome to the multiform-validator website</h1>
+                                <br/>
                                 <h1>Change color mode</h1>
                             </div>
                         </div>
@@ -76,14 +78,16 @@ <h1>Change color mode</h1>
         </div>-->
     </header>
     <section>
-        <h1>For now just a hello</h1>
-        <p>An HTML page will be created on GitHub where more detailed information can be found. For now, you can read the parameter comments when you hover over the functions, at least in Visual Studio Code.</p>
+        <h1>Hello (:</h1>
+        <p>by downloading my library, you will have several tools and functions that will do several form validations</p>
+        <p>follow the <a href="./srcPage/subPages/documentation/index.html">documentation</a> for more information</p>
         <div>
             <a href="https://github.com/gabriel-logan/multiform-validator" target="_blank" rel="noopener noreferrer">Go to github page</a>
             <a href="https://www.npmjs.com/package/multiform-validator" target="_blank" rel="noopener noreferrer">Go to npm page</a>
         </div>
         <pre>npm install multiform-validator</pre>
         <script src="./srcPage/js/home/index.js"></script>
+        <p>You can also help the programmer by buying a coffee at the link below, thanks in advance (:</p>
         <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="gabriellogan" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000"
             data-font-color="#000000" data-coffee-color="#ffffff"></script>
     </section>

srcPage/css/footer/style.css

@@ -1,8 +1,8 @@
 .footer-basic {
   padding: 40px 0;
-  background-color: #1f2029;
-  color: #fafafa;
-  border-top: 5px solid #101117;
+  background-color: #ffffff;
+  color: #212529;
+  border-top: 5px solid #fafafa;
 }
 .footer-basic ul {
   padding: 0;
@@ -49,4 +49,10 @@
   font-size: 13px;
   color: #aaa;
   margin-bottom: 0;
+}
+
+.dark {
+  background-color: #1f2029;
+  color: #fafafa;
+  border-top: 5px solid #101117;
 }/*# sourceMappingURL=style.css.map */

srcPage/css/footer/style.scss

@@ -1,8 +1,8 @@
 .footer-basic {
     padding: 40px 0;
-    background-color: #1f2029;
-    color: #fafafa;
-    border-top: 5px solid #101117;
+    background-color: #ffffff;
+    color: #212529;
+    border-top: 5px solid #fafafa;
     ul {
         padding: 0;
         list-style: none;
@@ -49,4 +49,10 @@
         color: #aaa;
         margin-bottom: 0;
     }
+}
+
+.dark {
+    background-color: #1f2029;
+    color: #fafafa;
+    border-top: 5px solid #101117;
 }

srcPage/js/header/index.js

@@ -13,6 +13,7 @@
     const darkModePreference = getDarkModePreference();
     if (darkModePreference === 'true') {
       $('body').addClass('dark');
+      $('footer').addClass('dark'); // Add 'dark' class to the footer
       $('#switch').addClass('switched');
     }
   }
@@ -27,11 +28,13 @@
     $('#switch').on('click', () => {
       if ($('body').hasClass('dark')) {
         $('body').removeClass('dark');
+        $('footer').removeClass('dark'); // Remove 'dark' class from the footer
         $('#switch').removeClass('switched');
         // Store the dark mode preference as 'false' in local storage
         setDarkModePreference('false');
       } else {
         $('body').addClass('dark');
+        $('footer').addClass('dark'); // Add 'dark' class to the footer
         $('#switch').addClass('switched');
         // Store the dark mode preference as 'true' in local storage
         setDarkModePreference('true');