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

assets/scss/custom.scss

@@ -1,6 +1,6 @@
 ///// HOMEPAGE
 
-/// Chill colors
+/// Chill brand colors
 $chill-blue: #334d5c;
 $chill-green: #43b29d;
 $chill-beige: #d3c7b1;
@@ -10,41 +10,66 @@ $chill-orange: #e89463;
 $chill-lightgray: #efefef;
 $chill-yellow: #f1d275;
 
+/// Other custom colors
+$bg-dark-blue: #0d242e;
+$bg-light-blue: #a0dcff;
+$btn-orange: #f46839;
+$text-green: #56c4aa;
+$icon-red: #f0384d;
+$icon-yellow: #fcc958;
+
+// Pattern
+// hugo needs to precompile images in public dir, and make it automatically with images called from content.
+// here we need to use it in css, then need to generate it, calling it first from a content md file.
+@mixin apply-bgpattern-01() {
+    background-repeat: repeat;
+    background-position: bottom center;
+    background-image: url('../images/bg/dessin-3.png'); 
+}
+
 
 // Theme Custom sections
 header.header {
-    background-color: $chill-blue;
+    background-color: $bg-dark-blue;
 }
 main > section {
-    &:first-child {
+    &.hero {
-        background-color: $chill-blue;
+        background-color: $bg-dark-blue;
+        @include apply-bgpattern-01();
+        h1 {
+            color: $text-green;
+        }
+        p {
+            color: white;
+            font-weight: bolder;
+        }
     }
     &.section-1 {
+        background-color: $bg-light-blue;
     }
     &.section-2 {
     }
     &.section-3 {
+        background-color: $text-green;
     }
     &.section-4 {
     }
     &.section-5 {
+        background-color: transparentize($color: $text-green, $amount: 0.7)
     }
     &.section-6 {
-        background-color: $chill-blue;
+        background-color: $bg-dark-blue;
-        background-repeat: repeat;
+        @include apply-bgpattern-01();        
-        background-position: bottom center;
-        background-image: url('../images/bg/dessin-3.png'); 
-        /* hugoplate needs to compile images in public, and make it automatically for images called from content.
-           we need to call first image from content md files, if we need to use it in css
-        */
     }
     &.section-7 {
+        background-color: $bg-light-blue;
     }
 }
 
 // Change bulletlists rendering in flex bloc
 section.section-1,
-section.section-6 {
+section.section-5,
+section.section-7 {
     .container .row {
         & > div {
             &:last-child {
@@ -69,4 +94,16 @@ section.section-6 {
             }
         }    
     }
+}
+
+// Dark context (homepage header, hero, footer)
+.dark {
+
+    // Overwrite primary button design
+    .btn-primary {
+        background-color: $btn-orange;
+        color: white;
+        border: 1px solid $btn-orange;
+        border-radius: 2em;
+    }
 }

config/_default/params.toml

@@ -1,31 +1,43 @@
 #################### default parameters ################################
 # favicon
 favicon = "images/favicon.png"
+
 # logo
 logo = "images/logo.png"
 logo_darkmode = "images/logo-darkmode.png"
+
 # use `px` or `x` with logo_width, example: "100px".
 # Note: logo_width is not work with .svg file
 logo_width = "160px"
 logo_height = "32px"
+
 # if logo_webp set false, will not generate WEBP version of logo | default is true
 logo_webp = true
+
 # logo text will only show when logo is missing.
 logo_text = "Hugoplate"
+
 # navbar fixed to top
-navbar_fixed = true
+navbar_fixed = false
+
 # theme-mode
-theme_switcher = true
+# available options [light/dark/system]
-theme_default = "dark" # available options [light/dark/system]
+theme_switcher = false
+theme_default = "light" 
+
 # Main Sections
 mainSections = ["blog"]
+
 # contact form action
 contact_form_action = "#" # contact form works with [https://airform.io/] or [https://formspree.io]
+
 # google tag manager, see https://developers.google.com/tag-manager/
-google_tag_manager = "" # example: G-XXXXXXXXXX
+# google_tag_manager = "" # example: G-XXXXXXXXXX
-google_adsense = ""     # example: ca-pub-xxxxxxxxxxxxxxxx
+# google_adsense = ""     # example: ca-pub-xxxxxxxxxxxxxxxx
+
 # custom script on header, example: custom_script= "<script>console.log(\"Hello World\")</script>"
 custom_script = ""
+
 # copyright
 copyright = "Designed & Developed by [Zeon Studio](https://zeon.studio)"
 

content/francais/_index.md

@@ -1,9 +1,10 @@
 ---
 # Banner
 banner:
+  class: dark
+  image: "/images/banner.png"
   title: "Le compagnon du travailleur social"
   content: "CHILL est une application web open source, un logiciel métier dédié à l'accompagnement des personnes, pour améliorer et faciliter le travail social."
-  image: "/images/banner.png"
   button:
     enable: true
     label: "Essayer la démo"
@@ -27,6 +28,10 @@ features:
     image: "/images/service-20.png"
     title: 
     content: "CHILL nourrit les travailleurs sociaux des informations dont ils ont besoin au quotidien, tout en leur offrant une vision d’ensemble sur la situation de vie, les dossiers et les parcours sociaux des personnes accompagnées."
+    button:
+      enable: false
+      label: "Test button style"
+      link: "#"
 
   - 
     class: section-3
@@ -43,7 +48,7 @@ features:
 
   - 
     class: section-4
-    image: "/images/service-20.png"
+    image: "/images/service-3.png"
     title:
     content: "
     Via les divers supports et manuels pédagogiques mis à disposition, CHILL permet l’autonomie des utilisateurs et des administrateurs, que ce soit pour l'utiliser ou pour le configurer."
@@ -53,18 +58,7 @@ features:
       link: "start/user"
 
   - 
-    class: section-5
+    class: section-5 dark
-    image: "/images/service-30.png"
-    title: 
-    content: "
-    **Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.**  
-    <br><br>
-    CHILL a été développé dans le cadre d'un processus participatif avec les travailleurs sociaux de différents secteurs, afin que le logiciel réponde à leur besoin et à une diversité de réalités de terrain. 
-    <br><br>
-    "
-
-  - 
-    class: section-6
     image: "/images/service-20.png"
     title: 
     content: 
@@ -74,9 +68,20 @@ features:
     - "**Respecte les principes du RGPD** de *privacy by design* et *security by design*, en offrant la possibilité aux administrateurs de paramétrer différents rôles, cercles d’utilisateurs et règles d’accès aux contenus."
     - "**S’inscrit dans la philosophie du logiciel libre** et dans un processus d’amélioration continue pour un code source restant ouvert, car l’argent public doit fabriquer du code public."
 
+  - 
+    class: section-6
+    image: "/images/service-30.png"
+    title: 
+    content: "
+    **Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.**  
+    <br><br>
+    CHILL a été développé dans le cadre d'un processus participatif avec les travailleurs sociaux de différents secteurs, afin que le logiciel réponde à leur besoin et à une diversité de réalités de terrain. 
+    <br><br>
+    "
+
   - 
     class: section-7
-    image: "/images/service-3.png" 
+    image: "/images/service-30.png" 
     title: "Ce qu'il faut retenir"
     content:
     bulletpoints: 

data/theme.json

@@ -18,8 +18,8 @@
       "theme_color": {
         "primary": "#fff",
         "body": "#1c1c1c",
-        "border": "#3E3E3E",
+        "border": "#ffffff09",
-        "theme_light": "#222222",
+        "theme_light": "#0d242e",
         "theme_dark": ""
       },
       "text_color": {
@@ -31,14 +31,12 @@
   },
   "fonts": {
     "font_family": {
-      "primary": "Heebo:wght@400;600",
+      "primary": "OpenSans:wght@300;400;500;600;700;800",
-      "primary_type": "sans-serif",
+      "primary_type": "sans-serif"
-      "secondary": "Signika:wght@500;700",
-      "secondary_type": "sans-serif"
     },
     "font_size": {
-      "base": "16",
+      "base": "15",
-      "scale": "1.250"
+      "scale": "1.25"
     }
   }
 }

themes/hugoplate/assets/scss/buttons.scss

@@ -7,9 +7,11 @@
 }
 
 .btn-primary {
-  @apply border-primary bg-primary dark:border-darkmode-primary dark:text-dark text-white dark:bg-white;
+  @apply border-primary text-white bg-primary 
+    dark:border-darkmode-primary dark:text-dark dark:bg-white;
 }
 
 .btn-outline-primary {
-  @apply border-dark text-dark hover:bg-dark dark:hover:text-dark bg-transparent hover:text-white dark:border-white dark:text-white dark:hover:bg-white;
+  @apply text-dark bg-transparent border-dark hover:bg-dark hover:text-white 
+    dark:text-white dark:border-white dark:hover:text-dark dark:hover:bg-white;
 }

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 }}