use 'dark' class locally in header, hero or custom sections. adapt dark styles.

themes/hugoplate/layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
   <!-- Banner -->
   {{ with .Params.banner }}
-    <section class="section pt-14">
+    <section class="section pt-14 hero {{ with .class }}{{ . }}{{ end }}">
       <div class="container">
         <div class="row justify-center">
           <div class="lg:col-7 mb-8 text-center">
@@ -31,7 +31,7 @@
 
   <!-- Features -->
   {{ range $i, $e:= .Params.features }}
-    <section class="section-sm {{ with .class }}{{ . }}{{ end }} {{ if (modBool $i 2) }}bg-gradient{{ end }}">
+    <section class="section-sm sn-{{ add $i 1 }} {{ with .class }}{{ . }}{{ end }}">
       <div class="container">
         <div class="row items-center justify-between">
           <div

themes/hugoplate/layouts/partials/essentials/footer.html

@@ -1,3 +1,4 @@
+<div class="dark">
 <footer class="bg-theme-light dark:bg-darkmode-theme-light">
   <div class="container">
     <div class="row items-center py-10">
@@ -55,3 +56,4 @@
     </div>
   </div>
 </footer>
+</div>

themes/hugoplate/layouts/partials/essentials/header.html

@@ -1,5 +1,5 @@
 <header
-  class="header {{ if site.Params.navbar_fixed }}sticky top-0{{ end }} z-30">
+  class="header dark {{ if site.Params.navbar_fixed }}sticky top-0{{ end }} z-30">
   <nav class="navbar container">
     <!-- logo -->
     <div class="order-0">
@@ -126,7 +126,7 @@
       {{ if site.Params.navigation_button.enable }}
         <a
           href="{{ site.Params.navigation_button.link | relLangURL }}"
-          class="btn btn-outline-primary btn-sm hidden lg:inline-block">
+          class="btn btn-primary btn-sm hidden lg:inline-block">
           {{ site.Params.navigation_button.label }}
         </a>
       {{ end }}