fix: theme checker

client.sample.css

@@ -1,10 +1,6 @@
 :root {
-  --color-primary: #FF6765;
+  --color-primary: #FF0055;
-  --color-secondary: #46271B;
+  --color-secondary: #0068FF;
-  --color-complementary: #5BB4CE;
+  --color-third: #00E3B4;
-  --color-complementary-darken: #35A0C0;
+  --color-heading: #2E3F58;
-
-  --color-black-s: 45%;
-  --color-black-h: 16;
-  --color-black-l: 6%;
 }

configtest.json

@@ -1,40 +0,0 @@
-{
-    "xmpp": "https://jabber.happy-dev.fr/http-bind/",
-    "authority": "https://api.community.startinblox.com/",
-    "authorityName": "test3",
-    "clientName": "patate",
-    "clientLogo": "https://cdn.startinblox.com/logos/webp/startinblox.webp",
-    "publicDirectory": true,
-    /*"clientCSS": "client.css",*/
-    "endpoints": {
-        "get": {
-            "circles": "https://api.community.startinblox.com/circles/",
-            "dashboards": "https://api.community.startinblox.com/dashboards/",
-            "projects": "https://api.community.startinblox.com/projects/",
-            "businessproviders": "https://api.community.startinblox.com/businessproviders/",
-            "customers": "https://api.community.startinblox.com/customers/",
-            "groups": "https://api.community.startinblox.com/groups/",
-            "joboffers": "https://api.community.startinblox.com/job-offers/",
-            "users": "https://api.community.startinblox.com/users/",
-            "skills": "https://api.community.startinblox.com/skills/",
-            "uploads": "https://api.community.startinblox.com/upload/"
-        },
-        "post": {
-            "circles": "https://api.community.startinblox.com/circles/",
-            "dashboards": "https://api.community.startinblox.com/dashboards/",
-            "projects": "https://api.community.startinblox.com/projects/",
-            "businessproviders": "https://api.community.startinblox.com/businessproviders/",
-            "customers": "https://api.community.startinblox.com/customers/",
-            "groups": "https://api.community.startinblox.com/groups/",
-            "joboffers": "https://api.community.startinblox.com/job-offers/",
-            "users": "https://api.community.startinblox.com/users/",
-            "skills": "https://api.community.startinblox.com/skills/",
-            "uploads": "https://api.community.startinblox.com/upload/"
-        }
-    },
-    "analytics": [{
-        "type": "matomo",
-        "url": "https://matomo.startinblox.com/",
-        "id": "2"
-    }]
-}

src/scripts/theme-checker.js

@@ -26,7 +26,7 @@ document.addEventListener("DOMContentLoaded", () => {
         cP.applyColor();
     });
     const currentSecondary = getComputedStyle(document.documentElement).getPropertyValue('--color-secondary')
-    const defaultSecondary = params.has('s') ? "#" + params.get('s') : currentSecondary ? currentSecondary.trim() : "#314560";
+    const defaultSecondary = params.has('s') ? "#" + params.get('s') : currentSecondary ? currentSecondary.trim() : "#0068FF";
     document.documentElement.style.setProperty('--color-secondary', defaultSecondary);
     const cS = Pickr.create({
         el: '.input-color#color-secondary',
@@ -48,13 +48,13 @@ document.addEventListener("DOMContentLoaded", () => {
         params.set('s', String(color.toHEXA()).substr(1));
         cS.applyColor();
     });
-    const currentComplementary = getComputedStyle(document.documentElement).getPropertyValue('--color-complementary')
+    const currentThird = getComputedStyle(document.documentElement).getPropertyValue('--color-third')
-    const defaultComplementary = params.has('c') ? "#" + params.get('c') : currentComplementary ? currentComplementary.trim() : "#00E3B4";
+    const defaultThird = params.has('c') ? "#" + params.get('c') : currentThird ? currentThird.trim() : "#00E3B4";
-    document.documentElement.style.setProperty('--color-complementary', defaultComplementary);
+    document.documentElement.style.setProperty('--color-third', defaultThird);
     const cC = Pickr.create({
-        el: '.input-color#color-complementary',
+        el: '.input-color#color-third',
         theme: 'nano',
-        default: defaultComplementary,
+        default: defaultThird,
         defaultRepresentation: 'HEX',
         swatches: null,
         components: {
@@ -67,17 +67,17 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
     cC.on('change', (color, evt) => {
-        document.documentElement.style.setProperty('--color-complementary', color.toHEXA());
+        document.documentElement.style.setProperty('--color-third', color.toHEXA());
         params.set('c', String(color.toHEXA()).substr(1));
         cC.applyColor();
     });
-    const currentComplementaryDarken = getComputedStyle(document.documentElement).getPropertyValue('--color-complementary-darken')
+    const currentHeading = getComputedStyle(document.documentElement).getPropertyValue('--color-heading')
-    const defaultComplementaryDarken = params.has('cd') ? "#" + params.get('cd') : currentComplementaryDarken ? currentComplementaryDarken.trim() : "#0068FF";
+    const defaultHeading = params.has('cd') ? "#" + params.get('cd') : currentHeading ? currentHeading.trim() : "#2E3F58";
-    document.documentElement.style.setProperty('--color-complementary-darken', defaultComplementaryDarken);
+    document.documentElement.style.setProperty('--color-heading', defaultHeading);
     const cCd = Pickr.create({
-        el: '.input-color#color-complementary-darken',
+        el: '.input-color#color-heading',
         theme: 'nano',
-        default: defaultComplementaryDarken,
+        default: defaultHeading,
         defaultRepresentation: 'HEX',
         swatches: null,
         components: {
@@ -90,7 +90,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
     cCd.on('change', (color, evt) => {
-        document.documentElement.style.setProperty('--color-complementary-darken', color.toHEXA());
+        document.documentElement.style.setProperty('--color-heading', color.toHEXA());
         params.set('cd', String(color.toHEXA()).substr(1));
         cCd.applyColor();
     });

src/views/partials/header.pug

@@ -9,20 +9,20 @@ div
   span.tag.reversed.text-semibold(data-trans='header.beta')
 
   div
-    solid-notifications.segment.sm-margin-right-xlarge(
-      nested-field="inbox"
-      bind-user
-    )
-
     if themeChecker
-      div.selector
+      div.selector.text-center
-        each val, index in ['primary', 'secondary', 'complementary', 'complementary-darken']
+        each val, index in ['primary', 'secondary', 'third', 'heading']
-          label= 'Couleur ' + (index+1)
+          label.segment.margin-right-medium.margin-top-xsmall= 'Couleur ' + (index+1)
             input.input-color(
               id='color-'+val
               type="text"
             )
 
+    solid-notifications.segment.sm-margin-right-xlarge(
+      nested-field="inbox"
+      bind-user
+    )
+
     //- User menu visible on large screens
     details.segment.sm-hidden.user-controls
       summary.text-right