svg

2020-11-15 17:48:52 +01:00 · 2020-11-15 17:48:52 +01:00 · e7dcd35f04
commit e7dcd35f04
parent 31491b4840
72 changed files with 1353 additions and 33 deletions
--- a/src/nineskeletor-1.0/assets/js/app.js
+++ b/src/nineskeletor-1.0/assets/js/app.js
@ -1,10 +1,16 @@
 // JQuery
 window.$ = window.jQuery = require('jquery');

+// JQueryui
+require('jqueryui');
+
 // Bootstrap
 require('bootstrap');
 require('bootstrap/dist/css/bootstrap.min.css');

+// timepicki
+const timepicki = require('timepicki/js/timepicki.js');
+
 // Datatables
 require('datatables.net-bs4');
 require('./datatables.init.js');
@ -13,14 +19,29 @@ require('datatables.net-bs4/css/dataTables.bootstrap4.min.css');
 // Fontawesome
 require('@fortawesome/fontawesome-free/css/all.css');

+// bs-stepper
+require('bs-stepper/dist/css/bs-stepper.min.css');
+const Stepper = require('bs-stepper/dist/js/bs-stepper.min.js');
+global.Stepper = Stepper;
+
+// Masonery
+const masonry = require('masonry-layout/dist/masonry.pkgd.min.js');
+global.masonry = masonry;
+
+// Slick
+require('slick-carousel/slick/slick.css');
+const slick = require('slick-carousel/slick/slick.min.js');
+global.slick = slick;
+
+// Imageloaded
+const imagesLoaded = require('imagesloaded/imagesloaded.js');
+global.imagesLoaded = imagesLoaded;
+
 // Moment
 const moment = require('moment');
 global.moment = moment;
 require('moment/locale/fr.js');

-// TempusDominus
-require('tempusdominus-bootstrap-4');
-
 // Select2
 require('select2');
 require('select2/dist/js/i18n/fr.js');
--- a/src/nineskeletor-1.0/config/routes.yaml
+++ b/src/nineskeletor-1.0/config/routes.yaml
@ -28,7 +28,7 @@ app_logoutcas:
    path:   /logoutcas
    defaults: { _controller: App\Controller\SecurityController:logout }

-#== Config ========================================================================================================
+#== Config ==============================================================================================================
 app_config:
    path: /admin/config
    defaults: { _controller: App\Controller\ConfigController:list }
@ -53,6 +53,14 @@ app_config_logo:
    path: /admin/config/logo
    defaults:  { _controller: App\Controller\ConfigController:logo }
    
+#== Theme ================================================================================================================
+app_theme:
+    path: /admin/theme
+    defaults:  { _controller: App\Controller\ThemeController:list }
+
+app_theme_select:
+    path: /admin/theme/select/{name}
+    defaults:  { _controller: App\Controller\ThemeController:select, name: "" }

 #== Sonde ================================================================================================================
 app_sonde:
--- a/src/nineskeletor-1.0/public/styles/css/font.css
+++ b/src/nineskeletor-1.0/public/styles/css/font.css
@ -0,0 +1,174 @@
+@font-face {
+font-family: 'Redressed';
+src: url('../fonts/Redressed-webfont.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}
+
+@font-face {
+font-family: 'Acme-Regular';
+src: url('../fonts/Acme-Regular-webfont.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}
+
+@font-face {
+font-family: 'Peacesans';
+src: url('../fonts/Peacesans-webfont.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}
+
+@font-face {
+font-family: 'Roboto-Regular';
+src: url('../fonts/Roboto-Regular-webfont.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}
+
+@font-face {
+font-family: 'Justanotherhand-Regular';
+src: url('../fonts/Justanotherhand-Regular-webfont.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}  
+
+@font-face {
+font-family: 'Lato-Regular';
+src: url('../fonts/Lato-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}  
+
+@font-face {
+font-family: 'ABeeZee-Regular';
+src: url('../fonts/ABeeZee-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}  
+
+@font-face {
+font-family: 'AlfaSlabOne-Regular';
+src: url('../fonts/AlfaSlabOne-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+} 
+
+@font-face {
+font-family: 'Anton-Regular';
+src: url('../fonts/Anton-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'FredokaOne-Regular';
+src: url('../fonts/FredokaOne-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'Overpass-Black';
+src: url('../fonts/Overpass-Black.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'Righteous-Regular';
+src: url('../fonts/Righteous-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'Signika-Regular';
+src: url('../fonts/Signika-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'Teko-Bold';
+src: url('../fonts/Teko-Bold.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'LuckiestGuy-Regular';
+src: url('../fonts/LuckiestGuy-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}  
+
+@font-face {
+font-family: 'Baloo-Regular';
+src: url('../fonts/Baloo-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}  
+
+@font-face {
+font-family: 'CarterOne-Regular';
+src: url('../fonts/CarterOne-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}  
+
+@font-face {
+font-family: 'Chewy-Regular';
+src: url('../fonts/Chewy-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'Courgette-Regular';
+src: url('../fonts/Courgette-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'LexendDeca-Regular';
+src: url('../fonts/LexendDeca-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'RubikMonoOne-Regular';
+src: url('../fonts/RubikMonoOne-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'SigmarOne-Regular';
+src: url('../fonts/SigmarOne-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'Viga-Regular';
+src: url('../fonts/Viga-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}   
+
+@font-face {
+font-family: 'Grandstander';
+src: url('../fonts/Grandstander-Black.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+} 
+
+@font-face {
+font-family: 'PassionOne';
+src: url('../fonts/PassionOne-Regular.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;    
+}  
--- a/src/nineskeletor-1.0/public/styles/css/style.css
+++ b/src/nineskeletor-1.0/public/styles/css/style.css
@ -0,0 +1,465 @@
+h1{
+    padding: 40px 0px 9px 0px;
+    border-bottom: 1px solid #eee;
+}
+
+.nav a{
+    background: none;
+    color: #CFD8DC;
+    font-size: 14px;
+    padding: 5px 0px 5px 25px;
+    display: block;
+}
+
+
+/* Sidebar Styles */
+.contentsidebar {
+    margin-left:250px;
+}
+
+#sidebar {
+    z-index: 1000;
+    position: fixed;
+    left: 0px;
+    width: 250px;
+    height: 100%;
+    overflow-y: auto;
+    background: #37474F;
+}
+
+#sidebar header {
+    background-color: #263238;
+    font-size: 20px;
+    line-height: 52px;
+    text-align: center;
+}
+
+#sidebar header a {
+    color: #fff;
+    display: block;
+    text-decoration: none;
+}
+
+#sidebar header a:hover {
+    color: #fff;
+}
+
+#sidebar .nav{
+    display: block;
+    margin: 0px 10px;
+}
+
+#sidebar .nav a {
+    padding: 0px 10px 5px 10px;
+}
+
+#sidebar .nav .last{
+    border-bottom: 1px solid #455A64;
+    padding-bottom:5px;
+    margin-bottom: 10px;
+}
+
+#sidebar .title {
+    color: #CFD8DC;
+    font-size: 16px;
+    padding: 0px 10px 0px 10px;
+    display: block;            
+    text-transform: uppercase;
+    margin-left: 0px !important;
+    font-weight: bold;
+}
+
+#sidebar .nav .last{
+    border-bottom: 1px solid #fff;
+    padding-bottom: 5px;
+}
+
+#sidebar .nav a:hover{
+    background: none;
+    color: #ECEFF1;
+}
+
+#sidebar .nav a .fa{
+    margin-right: 5px;
+    width: 20px;
+    text-align: center;    
+}
+
+#sidebar .nav .select-control {
+    padding: 0px 10px 5px 10px;
+    margin-top: -12px;
+}
+
+.avatar {
+    background-color: #343a40;
+    width: 35px;
+    height: 35px;
+    border-radius: 100%;
+    margin-top: -5px;
+}
+
+.avatar.big{
+    width: 90px;
+    height: 90px;
+    margin-bottom: 10px;
+}
+
+@media (max-width: 991px) {
+    .contentsidebar { 
+        margin-left: auto;
+    }
+    
+    #sidebar {
+        position: static;
+        margin:0px -15px;
+        width: auto;
+    }
+} 
+
+a.btn {
+    color:#ffffff;
+}
+
+.btn-link {
+    padding:0px;
+}
+
+.media-body p {
+    font-size :12px;
+    margin-bottom:0px;
+}
+
+@media (min-width: 992px) {
+    #sidebar {
+        display: block;
+    }
+}   
+
+
+
+{% if useheader is defined and useheader %}
+#main {
+    padding-top:55px;
+}
+{% endif %}
+
+
+th.dt-center, td.dt-center { text-align: center; }
+
+
+/* heros */
+.heroheader {
+    width:100%;
+    height:800px;
+    position:relative;
+}
+.heroheader div{
+    width:100%;
+    height:100%;
+    background-size: cover;
+    background-position: center;
+    color:#fff;
+    text-align: center;
+}
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dots
+{
+    position: absolute;
+    bottom: -105px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dots li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dots li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dots li button:before
+{
+    font-family: 'slick';
+    font-size: 6px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}
+
+.slick-dotted.slick-slider{margin-bottom:0px;}
+.slick-dots { 
+    position: absolute;
+    top: 135px;
+    left:46px;
+    text-align:left;
+    z-index: 9100;
+    bottom:unset;
+    width:auto;
+}
+.heroheader-dot { color:#fff; }
+
+
+.herobox {
+    position:absolute;
+    float: left;
+    top: 0;
+    bottom: 0;
+    left: -200px;
+    z-index: 8000;
+    padding: 0;
+    text-align: center;
+    text-shadow: none;
+    background-color: rgba(0,0,0,0.7);
+    height: auto;
+    width: 45%;
+    box-shadow: 0px -1px 2px rgba(0,0,0,0.5);
+    margin: 0 auto;
+    //opacity: 0.9;
+    transform-origin: 50% 50%;
+    transform: skew(-20deg);
+    -webkit-transform: skew(-20deg);
+    -moz-transform: skew(-20deg);
+    -o-transform: skew(-20deg);
+    -ms-transform: skew(-20deg);
+    border-left: 1px solid #fff;
+    border-right: 1px solid #fff; 
+}
+
+.herotitle {
+    text-align: left;
+    position:absolute;
+    //width:100%;
+    top: 80px;
+    left:50px;
+    z-index: 9000;
+}
+
+.herotitle h1 {
+    padding:0px;
+    border:none;
+}
+
+.heromenu {
+    padding-top: 30px;
+    font-size: 20px;
+}
+
+.herofloatmenu .avatar {
+    width: 20px;
+    height: 20px;
+    margin: 3px 3px 0px 0px;    
+}
+.herofloatmenu a:hover {
+    text-decoration: none;
+}
+
+.heromenu .linkmenu {
+    font-size:16px;
+    padding-left: 5px;
+}
+
+.heromenu .linkmenu a {
+    margin-right:5px;
+}
+
+.herologo {
+    position: absolute;
+    top: 0px;
+    text-align: center;
+    width: 100%;    
+}
+
+.herologo img {max-height:200px;}
+
+@media (max-width: 980px) {
+    .herobox { display: none; }
+    .herotitle { width:100%; top: 70px; left:0px; text-align:center; }
+    .slick-dots { top: 120px; left: 0px; text-align: center; width: 100%; }
+    .heromenu .facatmenu {display: none;}
+    .catmenu { display:none }
+    .linkmenu { display:none }
+
+    .herofloatmenu a {
+        font-size: 40px;
+    }
+
+    .herofloatmenu .avatar {
+        height: 40px;
+        width:40px;
+        margin-top:15px;
+    }
+}
+
+.grid-sizer { width: 10%;  margin-bottom: 0%;float:left;}
+.grid-item-size  { width: 10%;  margin-bottom: 0%;float:left;}
+.grid-item-size-2  { width: 20%;  margin-bottom: 0%;float:left;}
+.grid-item-size-3  { width: 30%;  margin-bottom: 0%;float:left;}
+.grid-item-size-4  { width: 40%;  margin-bottom: 0%;float:left;}
+.grid-item-size-5  { width: 40%;  margin-bottom: 0%;float:left;}
+.grid-item-size-6  { width: 60%;  margin-bottom: 0%;float:left;}
+.grid-item-size-7  { width: 70%;  margin-bottom: 0%;float:left;}
+.grid-item-size-8  { width: 80%;  margin-bottom: 0%;float:left;}
+.grid-item-size-9  { width: 90%;  margin-bottom: 0%;float:left;}
+.grid-item-full  { width: 100%;  margin-bottom: 0%; font-size:20px;float:left; }
+.grid-item-full h1 {margin: 0; border:none; padding: 20px 0px 0px 10px; }
+.gutter-sizer  { width: 0%;float:left; }
+@media (max-width: 980px) {
+    .grid-sizer { width:  50%;  margin-bottom: 0%;}
+    .grid-item-size  { width:  50%;  margin-bottom: 0%;}
+}
+
+
+
+
+
+.foliomenu {
+    position: fixed;
+    width:100%;
+    height:60px;
+    background-color: var(--colorbgbodydark) ;
+    z-index: 100000;
+    display:none;
+    padding-left:10px;
+    border-bottom: 1px solid var(--colorftbodydark);
+}
+
+.foliomenu .logo {  float:left; height:40px; margin-top:7px }
+.foliomenu .avatar { height: 20px; margin: 3px 3px 0px 0px; width: 20px; }
+.foliomenu div { padding: 10px; line-height:35px; float:left;}
+.foliomenu a {
+    color: var(--colorftbodydark);
+    font-size: 15px;
+}
+.foliomenu .float-right a:hover {
+    text-decoration: none;
+}
+
+.foliomenu .fa { font-size: 14px; color: var(--colorftbodydark);} 
+
+.foliotop {
+    float:right;
+    position:fixed;
+    bottom: 10px;
+    right:10px;
+    z-index: 100000;
+    background-color: var(--colorbgbodydark) ;
+    padding:10px;
+    border-radius: 100%;
+    width:55px;
+    height:55px;
+    text-align: center;
+    line-height: 28px;
+    border: 1px solid var(--colorbgbodylight);
+    display:none;
+}
+.foliotop a {
+    color: var(--colorftbodydark);
+    font-size: 25px;
+}
+
+@media (max-width: 980px) {
+    
+    .herofloatmenu {
+        display:none;
+    }
+    
+    .foliomenu {
+        display: block!important;
+    }
+
+    .foliomenu a {
+        font-size:30px;
+    }
+
+    .foliomenu .float-right a {
+        margin-top: -8px;
+    }
+    .foliomenu .float-right img {
+        height:35px;
+        width:35px;
+        margin-top:0px;
+    }
+    .foliomenu .float-right .fa  {
+        font-size:30px!important;
+    }
+}
+
+.linkurl a {
+    background-color: var(--colorbgbodylight) ;
+    color: var(--colorftbodylight)!important;
+    font-size: 14px;
+    padding: 5px;
+    display: inline-block;
+    margin: 0px 10px 10px 0px;
+}
+
+.contactdescription {
+    max-width:300px;
+    text-align:justify;
+}
--- a/src/nineskeletor-1.0/public/styles/fonts/ABeeZee-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/ABeeZee-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Acme-Regular-webfont.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Acme-Regular-webfont.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/AlfaSlabOne-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/AlfaSlabOne-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Anton-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Anton-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Baloo-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Baloo-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Bebas-webfont.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Bebas-webfont.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/CarterOne-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/CarterOne-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Chewy-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Chewy-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Courgette-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Courgette-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/FredokaOne-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/FredokaOne-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Grandstander-Black.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Grandstander-Black.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Justanotherhand-Regular-webfont.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Justanotherhand-Regular-webfont.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Lato-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Lato-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/LexendDeca-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/LexendDeca-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/LuckiestGuy-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/LuckiestGuy-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Overpass-Black.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Overpass-Black.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/PassionOne-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/PassionOne-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Peacesans-webfont.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Peacesans-webfont.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Redressed-webfont.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Redressed-webfont.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Righteous-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Righteous-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Roboto-Regular-webfont.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Roboto-Regular-webfont.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/RubikMonoOne-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/RubikMonoOne-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/SigmarOne-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/SigmarOne-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Signika-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Signika-Regular.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Snickles-webfont.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Snickles-webfont.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Teko-Bold.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Teko-Bold.ttf
--- a/src/nineskeletor-1.0/public/styles/fonts/Viga-Regular.ttf
+++ b/src/nineskeletor-1.0/public/styles/fonts/Viga-Regular.ttf
--- a/src/nineskeletor-1.0/public/themes/look.png
+++ b/src/nineskeletor-1.0/public/themes/look.png
--- a/src/nineskeletor-1.0/public/themes/look.xcf
+++ b/src/nineskeletor-1.0/public/themes/look.xcf
--- a/src/nineskeletor-1.0/public/themes/nineblue/info.yml
+++ b/src/nineskeletor-1.0/public/themes/nineblue/info.yml
@ -0,0 +1,3 @@
+name: Nineblue
+author: Arnaud Fornerot
+version: 1.0
--- a/src/nineskeletor-1.0/public/themes/nineblue/local.js
+++ b/src/nineskeletor-1.0/public/themes/nineblue/local.js
--- a/src/nineskeletor-1.0/public/themes/nineblue/look.png
+++ b/src/nineskeletor-1.0/public/themes/nineblue/look.png
--- a/src/nineskeletor-1.0/public/themes/nineblue/style.css
+++ b/src/nineskeletor-1.0/public/themes/nineblue/style.css
@ -0,0 +1,43 @@
+:root{
+    --colorbgbodydark: #3a539b;
+    --colorfttitlelight: #3a539b;
+    
+    /* Vous pouvez forcer l'ensemble de ces variables ou laisser la valeur par défaut
+    --colorbgbodylight: #;
+    --colorbgbodydark: #;
+    --colorfttitlelight: #;
+    --colorfttitledark: #;   
+    --colorftbodylight: #;
+    --colorftbodydark: #;       
+    --fontbody: "";
+    --fonttitle: "";
+    --fontsizeh1: px;
+    --fontsizeh2: px;
+    --fontsizeh3: px;
+    --fontsizeh4: px;
+
+    --colorbgbodylight-darker: #;
+    --colorfttitlelight-darker: #;
+}
+    */
+}
+
+/* Puis sur classer l'ensemble de la feuille de style */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/src/nineskeletor-1.0/public/themes/ninedark/info.yml
+++ b/src/nineskeletor-1.0/public/themes/ninedark/info.yml
@ -0,0 +1,3 @@
+name: Ninedark
+author: Arnaud Fornerot
+version: 1.0
--- a/src/nineskeletor-1.0/public/themes/ninedark/local.js
+++ b/src/nineskeletor-1.0/public/themes/ninedark/local.js
--- a/src/nineskeletor-1.0/public/themes/ninedark/look.png
+++ b/src/nineskeletor-1.0/public/themes/ninedark/look.png
--- a/src/nineskeletor-1.0/public/themes/ninedark/style.css
+++ b/src/nineskeletor-1.0/public/themes/ninedark/style.css
@ -0,0 +1,44 @@
+:root{
+    --colorbgbodydark: #2e3131;
+    --colorfttitlelight: #2e3131;
+    --colorfttitlelight-darker: #95a5a6;
+
+    /* Vous pouvez forcer l'ensemble de ces variables ou laisser la valeur par défaut
+    --colorbgbodylight: #;
+    --colorbgbodydark: #;
+    --colorfttitlelight: #;
+    --colorfttitledark: #;   
+    --colorftbodylight: #;
+    --colorftbodydark: #;       
+    --fontbody: "";
+    --fonttitle: "";
+    --fontsizeh1: px;
+    --fontsizeh2: px;
+    --fontsizeh3: px;
+    --fontsizeh4: px;
+
+    --colorbgbodylight-darker: #;
+    --colorfttitlelight-darker: #;
+}
+    */
+}
+
+/* Puis sur classer l'ensemble de la feuille de style */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/src/nineskeletor-1.0/public/themes/ninegray/info.yml
+++ b/src/nineskeletor-1.0/public/themes/ninegray/info.yml
@ -0,0 +1,3 @@
+name: Ninegray
+author: Arnaud Fornerot
+version: 1.0
--- a/src/nineskeletor-1.0/public/themes/ninegray/local.js
+++ b/src/nineskeletor-1.0/public/themes/ninegray/local.js
--- a/src/nineskeletor-1.0/public/themes/ninegray/look.png
+++ b/src/nineskeletor-1.0/public/themes/ninegray/look.png
--- a/src/nineskeletor-1.0/public/themes/ninegray/style.css
+++ b/src/nineskeletor-1.0/public/themes/ninegray/style.css
@ -0,0 +1,43 @@
+:root{
+    --colorbgbodydark: #6c7a89;
+    --colorfttitlelight: #6c7a89;
+    
+    /* Vous pouvez forcer l'ensemble de ces variables ou laisser la valeur par défaut
+    --colorbgbodylight: #;
+    --colorbgbodydark: #;
+    --colorfttitlelight: #;
+    --colorfttitledark: #;   
+    --colorftbodylight: #;
+    --colorftbodydark: #;       
+    --fontbody: "";
+    --fonttitle: "";
+    --fontsizeh1: px;
+    --fontsizeh2: px;
+    --fontsizeh3: px;
+    --fontsizeh4: px;
+
+    --colorbgbodylight-darker: #;
+    --colorfttitlelight-darker: #;
+}
+    */
+}
+
+/* Puis sur classer l'ensemble de la feuille de style */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/src/nineskeletor-1.0/public/themes/ninegreen/info.yml
+++ b/src/nineskeletor-1.0/public/themes/ninegreen/info.yml
@ -0,0 +1,3 @@
+name: Ninegreen
+author: Arnaud Fornerot
+version: 1.0
--- a/src/nineskeletor-1.0/public/themes/ninegreen/local.js
+++ b/src/nineskeletor-1.0/public/themes/ninegreen/local.js
--- a/src/nineskeletor-1.0/public/themes/ninegreen/look.png
+++ b/src/nineskeletor-1.0/public/themes/ninegreen/look.png
--- a/src/nineskeletor-1.0/public/themes/ninegreen/style.css
+++ b/src/nineskeletor-1.0/public/themes/ninegreen/style.css
@ -0,0 +1,43 @@
+:root{
+    --colorbgbodydark: #1e824c;
+    --colorfttitlelight: #1e824c;
+    
+    /* Vous pouvez forcer l'ensemble de ces variables ou laisser la valeur par défaut
+    --colorbgbodylight: #;
+    --colorbgbodydark: #;
+    --colorfttitlelight: #;
+    --colorfttitledark: #;   
+    --colorftbodylight: #;
+    --colorftbodydark: #;       
+    --fontbody: "";
+    --fonttitle: "";
+    --fontsizeh1: px;
+    --fontsizeh2: px;
+    --fontsizeh3: px;
+    --fontsizeh4: px;
+
+    --colorbgbodylight-darker: #;
+    --colorfttitlelight-darker: #;
+}
+    */
+}
+
+/* Puis sur classer l'ensemble de la feuille de style */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/src/nineskeletor-1.0/public/themes/nineorange/info.yml
+++ b/src/nineskeletor-1.0/public/themes/nineorange/info.yml
@ -0,0 +1,3 @@
+name: Nineorange
+author: Arnaud Fornerot
+version: 1.0
--- a/src/nineskeletor-1.0/public/themes/nineorange/local.js
+++ b/src/nineskeletor-1.0/public/themes/nineorange/local.js
--- a/src/nineskeletor-1.0/public/themes/nineorange/look.png
+++ b/src/nineskeletor-1.0/public/themes/nineorange/look.png
--- a/src/nineskeletor-1.0/public/themes/nineorange/style.css
+++ b/src/nineskeletor-1.0/public/themes/nineorange/style.css
@ -0,0 +1,43 @@
+:root{
+    --colorbgbodydark: #f15a22;
+    --colorfttitlelight: #f15a22;
+    
+    /* Vous pouvez forcer l'ensemble de ces variables ou laisser la valeur par défaut
+    --colorbgbodylight: #;
+    --colorbgbodydark: #;
+    --colorfttitlelight: #;
+    --colorfttitledark: #;   
+    --colorftbodylight: #;
+    --colorftbodydark: #;       
+    --fontbody: "";
+    --fonttitle: "";
+    --fontsizeh1: px;
+    --fontsizeh2: px;
+    --fontsizeh3: px;
+    --fontsizeh4: px;
+
+    --colorbgbodylight-darker: #;
+    --colorfttitlelight-darker: #;
+}
+    */
+}
+
+/* Puis sur classer l'ensemble de la feuille de style */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/src/nineskeletor-1.0/public/themes/ninered/info.yml
+++ b/src/nineskeletor-1.0/public/themes/ninered/info.yml
@ -0,0 +1,3 @@
+name: Ninered
+author: Arnaud Fornerot
+version: 1.0
--- a/src/nineskeletor-1.0/public/themes/ninered/local.js
+++ b/src/nineskeletor-1.0/public/themes/ninered/local.js
--- a/src/nineskeletor-1.0/public/themes/ninered/look.png
+++ b/src/nineskeletor-1.0/public/themes/ninered/look.png
--- a/src/nineskeletor-1.0/public/themes/ninered/style.css
+++ b/src/nineskeletor-1.0/public/themes/ninered/style.css
@ -0,0 +1,43 @@
+:root{
+    --colorbgbodydark: #96281b;
+    --colorfttitlelight: #96281b;
+    
+    /* Vous pouvez forcer l'ensemble de ces variables ou laisser la valeur par défaut
+    --colorbgbodylight: #;
+    --colorbgbodydark: #;
+    --colorfttitlelight: #;
+    --colorfttitledark: #;   
+    --colorftbodylight: #;
+    --colorftbodydark: #;       
+    --fontbody: "";
+    --fonttitle: "";
+    --fontsizeh1: px;
+    --fontsizeh2: px;
+    --fontsizeh3: px;
+    --fontsizeh4: px;
+
+    --colorbgbodylight-darker: #;
+    --colorfttitlelight-darker: #;
+}
+    */
+}
+
+/* Puis sur classer l'ensemble de la feuille de style */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/src/nineskeletor-1.0/public/themes/nineyellow/info.yml
+++ b/src/nineskeletor-1.0/public/themes/nineyellow/info.yml
@ -0,0 +1,3 @@
+name: Nineyellow
+author: Arnaud Fornerot
+version: 1.0
--- a/src/nineskeletor-1.0/public/themes/nineyellow/local.js
+++ b/src/nineskeletor-1.0/public/themes/nineyellow/local.js
--- a/src/nineskeletor-1.0/public/themes/nineyellow/look.png
+++ b/src/nineskeletor-1.0/public/themes/nineyellow/look.png
--- a/src/nineskeletor-1.0/public/themes/nineyellow/style.css
+++ b/src/nineskeletor-1.0/public/themes/nineyellow/style.css
@ -0,0 +1,43 @@
+:root{
+    --colorbgbodydark: #f7ca18;
+    --colorfttitlelight: #171717;
+    
+    /* Vous pouvez forcer l'ensemble de ces variables ou laisser la valeur par défaut
+    --colorbgbodylight: #;
+    --colorbgbodydark: #;
+    --colorfttitlelight: #;
+    --colorfttitledark: #;   
+    --colorftbodylight: #;
+    --colorftbodydark: #;       
+    --fontbody: "";
+    --fonttitle: "";
+    --fontsizeh1: px;
+    --fontsizeh2: px;
+    --fontsizeh3: px;
+    --fontsizeh4: px;
+
+    --colorbgbodylight-darker: #;
+    --colorfttitlelight-darker: #;
+}
+    */
+}
+
+/* Puis sur classer l'ensemble de la feuille de style */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/src/nineskeletor-1.0/src/Command/AppInitCommand.php
+++ b/src/nineskeletor-1.0/src/Command/AppInitCommand.php
@ -66,6 +66,7 @@ class AppInitCommand extends Command
            "appname",                                          // id
            "Titre de votre site",                              // title
            "",                                                 // value
+            "",                                                 // defalut
            "string",                                           // type,
            true,                                               // visible
            true,                                               // changeable
@ -80,6 +81,7 @@ class AppInitCommand extends Command
            "appsubname",                                       // id
            "Sous-titre de votre site",                         // title
            "",                                                 // value
+            "",                                                 // defalut
            "string",                                           // type,
            true,                                               // visible
            true,                                               // changeable
@ -94,6 +96,7 @@ class AppInitCommand extends Command
            "appdescription",                                   // id
            "Description de votre site",                        // title
            "",                                                 // value
+            "",                                                 // defalut
            "editor",                                           // type,
            true,                                               // visible
            true,                                               // changeable
@ -102,6 +105,22 @@ class AppInitCommand extends Command
            "Description de votre site"
        );

+        $this->insertConfig(
+            100,                                                // order
+            "site",                                             // category
+            "apptheme",                                         // id
+            "Thème de votre site",                              // title
+            "",                                                 // value
+            "",                                                 // defalut
+            "string",                                           // type,
+            false,                                              // visible
+            true,                                               // changeable
+            false,                                              // required
+            "",                                                 // grouped
+            "Thème de votre site"
+        );
+
+
        // colorbgbody = Couleur des fonds de page
        $this->insertConfig(
            1,                                                  // order
@ -109,6 +128,7 @@ class AppInitCommand extends Command
            "colorbgbodydark",                                  // id
            "Couleur de fond fonçée",                           // title
            "",                                                 // value
+            "#2574a9",                                          // defalut
            "color",                                            // type,
            true,                                               // visible
            true,                                               // changeable
@ -123,6 +143,7 @@ class AppInitCommand extends Command
            "colorbgbodylight",                                 // id
            "Couleur de fond claire",                           // title
            "",                                                 // value
+            "#ffffff",                                          // defalut
            "color",                                            // type,
            true,                                               // visible
            true,                                               // changeable
@ -138,6 +159,7 @@ class AppInitCommand extends Command
            "colorfttitledark",                                 // id
            "Couleur des titres sur fond fonçé",                // title
            "",                                                 // value
+            "#ffffff",                                          // defalut
            "color",                                            // type,
            true,                                               // visible
            true,                                               // changeable
@ -152,6 +174,7 @@ class AppInitCommand extends Command
            "colorfttitlelight",                                // id
            "Couleur des titres sur fond claire",               // title
            "",                                                 // value
+            "#2574a9",                                          // defalut
            "color",                                            // type,
            true,                                               // visible
            true,                                               // changeable
@ -167,6 +190,7 @@ class AppInitCommand extends Command
            "colorftbodydark",                                  // id
            "Couleur de la police sur fond fonçé",              // title
            "",                                                 // value
+            "#ffffff",                                          // defalut
            "color",                                            // type,
            true,                                               // visible
            true,                                               // changeable
@ -181,6 +205,7 @@ class AppInitCommand extends Command
            "colorftbodylight",                                 // id
            "Couleur de la police sur fond claire",             // title
            "",                                                 // value
+            "#343a40",                                          // defalut
            "color",                                            // type,
            true,                                               // visible
            true,                                               // changeable
@ -196,6 +221,7 @@ class AppInitCommand extends Command
            "fonttitle",                                        // id
            "Police pour les titres",                           // title
            "",                                                 // value
+            "FredokaOne-Regular",                               // defalut
            "font",                                             // type,
            true,                                               // visible
            true,                                               // changeable
@ -210,6 +236,7 @@ class AppInitCommand extends Command
            "fontbody",                                         // id
            "Police principale",                                // title
            "",                                                 // value
+            "Roboto-Regular",                                   // defalut
            "font",                                             // type,
            true,                                               // visible
            true,                                               // changeable
@ -218,6 +245,66 @@ class AppInitCommand extends Command
            "Nom de la police principale"
        );

+        $this->insertConfig(
+            3,                                                  // order
+            "font",                                             // category
+            "fontsizeh1",                                       // id
+            "Taille des titres h1",                             // title
+            "",                                                 // value
+            "40",                                               // defalut
+            "integer",                                          // type,
+            true,                                               // visible
+            true,                                               // changeable
+            false,                                              // required
+            "",                                                 // grouped
+            "Taille des titres h1 en px"
+        );
+
+        $this->insertConfig(
+            4,                                                  // order
+            "font",                                             // category
+            "fontsizeh2",                                       // id
+            "Taille des titres h2",                             // title
+            "",                                                 // value
+            "32",                                               // defalut
+            "integer",                                          // type,
+            true,                                               // visible
+            true,                                               // changeable
+            false,                                              // required
+            "",                                                 // grouped
+            "Taille des titres h2 en px"
+        );
+
+        $this->insertConfig(
+            5,                                                  // order
+            "font",                                             // category
+            "fontsizeh3",                                       // id
+            "Taille des titres h3",                             // title
+            "",                                                 // value
+            "28",                                               // defalut
+            "integer",                                          // type,
+            true,                                               // visible
+            true,                                               // changeable
+            false,                                              // required
+            "",                                                 // grouped
+            "Taille des titres h3 en px"
+        );
+
+        $this->insertConfig(
+            6,                                                  // order
+            "font",                                             // category
+            "fontsizeh4",                                       // id
+            "Taille des titres h4",                             // title
+            "",                                                 // value
+            "24",                                               // defalut
+            "integer",                                          // type,
+            true,                                               // visible
+            true,                                               // changeable
+            false,                                              // required
+            "",                                                 // grouped
+            "Taille des titres h4 en px"
+        );
+
        // logo = 
        $this->insertConfig(
            1,                                                  // order
@ -225,6 +312,7 @@ class AppInitCommand extends Command
            "logodark",                                         // id
            "Logo sur fond fonçé",                              // title
            "",                                                 // value
+            "",                                                 // defalut
            "logo",                                             // type,
            true,                                               // visible
            true,                                               // changeable
@ -239,6 +327,7 @@ class AppInitCommand extends Command
            "logolight",                                        // id
            "Logo sur fond clair",                              // title
            "",                                                 // value
+            "",                                                 // defalut
            "logo",                                             // type,
            true,                                               // visible
            true,                                               // changeable
@ -281,7 +370,7 @@ class AppInitCommand extends Command

    }

-    protected function insertConfig($order,$category,$id,$title,$value,$type,$visible,$changeable,$required,$grouped,$help) {
+    protected function insertConfig($order,$category,$id,$title,$value,$default,$type,$visible,$changeable,$required,$grouped,$help) {
        $entity=$this->em->getRepository("App:Config")->find($id);
        if(!$entity) {
            $entity= new Config();
@ -289,6 +378,7 @@ class AppInitCommand extends Command
            $entity->setValue($value);
        }

+        $entity->setDefault($default);
        $entity->setCategory($category);
        $entity->setOrder($order);
        $entity->setTitle($title);
--- a/src/nineskeletor-1.0/src/Controller/ThemeController.php
+++ b/src/nineskeletor-1.0/src/Controller/ThemeController.php
@ -0,0 +1,67 @@
+<?
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Form\FormError;
+use Symfony\Component\Finder\Finder;
+use Symfony\Component\Yaml\Yaml;
+
+use App\Entity\Config as Entity;
+use App\Form\ConfigType as Form;
+
+class ThemeController extends AbstractController
+{
+    private $data   = "config";
+    private $route  = "app_config";
+    private $render = "Config/";
+    private $entity = "App:Config";
+
+    public function list(Request $request)
+    {
+        $session=$this->get('session');
+        $finder = new Finder();
+
+        $dir = $this->getParameter('kernel.project_dir')."/public/themes";
+        $url="/".$this->getParameter('appAlias')."/themes";
+
+        $finder->in($dir)->directories()->depth('== 0');
+        $themes=[];
+        $themes[""]["dir"]="";
+        $themes[""]["url"]=$url;
+        $themes[""]["name"]="Thème par défaut";
+
+        foreach ($finder as $file) {
+            $key=$file->getRelativePathname();
+            $themes[$key]["dir"]=$key;
+            $themes[$key]["url"]=$url."/".$key;
+
+            $yml=Yaml::parseFile($dir.'/'.$key.'/info.yml');
+            $themes[$key]["name"]=$yml["name"];
+        }
+        
+        $current=$session->get("apptheme");
+        $currentheme=$themes[$current];
+        unset($themes[$current]);
+
+        return $this->render('Theme/list.html.twig',[
+            'useheader'     => true,
+            'usesidebar'    => true,
+            'currentheme'   => $currentheme,
+            'themes'        => $themes
+        ]);
+    }   
+
+    public function select(Request $request,$name)
+    {
+        $em = $this->getDoctrine()->getManager();
+        $config=$em->getRepository("App:Config")->findoneBy(["id"=>"apptheme"]);
+        $config->setValue($name);
+
+        $em->persist($config);
+        $em->flush();        
+
+        return $this->redirectToRoute("app_theme");
+    }
+}
--- a/src/nineskeletor-1.0/src/Entity/Config.php
+++ b/src/nineskeletor-1.0/src/Entity/Config.php
@ -27,6 +27,11 @@ class Config
     */
    protected $value;

+    /**
+     * @ORM\Column(name="defaultvalue", type="text")
+     */
+    protected $default;
+
    /**
     * @ORM\Column(name="roworder", type="string")
     */
@ -199,4 +204,16 @@ class Config
        return $this;
    }

+    public function getDefault(): ?string
+    {
+        return $this->default;
+    }
+
+    public function setDefault(string $default): self
+    {
+        $this->default = $default;
+
+        return $this;
+    }
+
 }
--- a/src/nineskeletor-1.0/src/Service/sessionInit.php
+++ b/src/nineskeletor-1.0/src/Service/sessionInit.php
@ -30,35 +30,52 @@

            // Valeur par defaut colorbgbodydark = #343a40
            if($this->session->get("colorbgbodydark")=="")
-                $this->session->set("colorbgbodydark", '#343a40');            
+                $this->session->set("colorbgbodydark", $this->em->getRepository("App:Config")->find("colorbgbodydark")->getDefault());            

            // Valeur par defaut colorbgbodydark = #ffffff
            if($this->session->get("colorbgbodylight")=="")
-                $this->session->set("colorbgbodylight", '#ffffff');            
+                $this->session->set("colorbgbodylight",$this->em->getRepository("App:Config")->find("colorbgbodylight")->getDefault());            

            // Valeur par defaut colorfttitledark = #ffffff
            if($this->session->get("colorfttitledark")=="")
-                $this->session->set("colorfttitledark", '#ffffff');  
+                $this->session->set("colorfttitledark", $this->em->getRepository("App:Config")->find("colorfttitledark")->getDefault());            

            // Valeur par defaut colorfttitlelight = #343a40
            if($this->session->get("colorfttitlelight")=="")
-                $this->session->set("colorfttitlelight", '#343a40');     
+                $this->session->set("colorfttitlelight", $this->em->getRepository("App:Config")->find("colorfttitlelight")->getDefault());            

            // Valeur par defaut colorftbodydark = #ffffff
            if($this->session->get("colorftbodydark")=="")
-                $this->session->set("colorftbodydark", '#ffffff');  
+                $this->session->set("colorftbodydark", $this->em->getRepository("App:Config")->find("colorftbodydark")->getDefault());            

            // Valeur par defaut colorftbodylight = #343a40
            if($this->session->get("colorftbodylight")=="")
-                $this->session->set("colorftbodylight", '#343a40');     
+                $this->session->set("colorftbodylight", $this->em->getRepository("App:Config")->find("colorftbodylight")->getDefault());            

            // Valeur par defaut fonttitle = FredokaOne-Regular
            if($this->session->get("fonttitle")=="")
-                $this->session->set("fonttitle", 'FredokaOne-Regular');  
+                $this->session->set("fonttitle", $this->em->getRepository("App:Config")->find("fonttitle")->getDefault());            
                
            // Valeur par defaut fontbody = Roboto-Regular
            if($this->session->get("fontbody")=="")
-                $this->session->set("fontbody", 'Roboto-Regular');
+                $this->session->set("fontbody", $this->em->getRepository("App:Config")->find("fontbody")->getDefault());            
+
+            // Valeur par defaut fontsizeh1 = 40
+            if($this->session->get("fontsizeh1")=="")
+                $this->session->set("fontsizeh1", $this->em->getRepository("App:Config")->find("fontsizeh1")->getDefault());            
+
+            // Valeur par defaut fontsizeh2 = 32
+            if($this->session->get("fontsizeh2")=="")
+                $this->session->set("fontsizeh2", $this->em->getRepository("App:Config")->find("fontsizeh2")->getDefault());            
+
+            // Valeur par defaut fontsizeh3 = 28
+            if($this->session->get("fontsizeh3")=="")
+                $this->session->set("fontsizeh3", $this->em->getRepository("App:Config")->find("fontsizeh3")->getDefault());            
+
+            // Valeur par defaut fontsizeh4 = 24
+            if($this->session->get("fontsizeh4")=="")
+                $this->session->set("fontsizeh4", $this->em->getRepository("App:Config")->find("fontsizeh4")->getDefault());            
+

            // Valeur par defaut logo
            if($this->session->get("logodark")==""&&$this->session->get("logolight")=="") {
@ -69,5 +86,33 @@
                $this->session->set("logodark", $this->session->get("logolight"));
            elseif($this->session->get("logolight")=="")
                $this->session->set("logolight", $this->session->get("logodark"));
+
+            // Calcul couleur
+            $this->session->set("colorbgbodylight-darker", $this->adjustBrightness($this->session->get("colorbgbodylight"),-10));          
+            $this->session->set("colorfttitlelight-darker", $this->adjustBrightness($this->session->get("colorfttitlelight"),-50));          
+
+        }
+
+        private function adjustBrightness($hex, $steps) {
+            // Steps should be between -255 and 255. Negative = darker, positive = lighter
+            $steps = max(-255, min(255, $steps));
+    
+            // Normalize into a six character long hex string
+            $hex = str_replace('#', '', $hex);
+            if (strlen($hex) == 3) {
+                $hex = str_repeat(substr($hex,0,1), 2).str_repeat(substr($hex,1,1), 2).str_repeat(substr($hex,2,1), 2);
+            }
+    
+            // Split into three parts: R, G and B
+            $color_parts = str_split($hex, 2);
+            $return = '';
+    
+            foreach ($color_parts as $color) {
+                $color   = hexdec($color); // Convert to decimal
+                $color   = max(0,min(255,$color + $steps)); // Adjust color
+                $return .= str_pad(dechex($color), 2, '0', STR_PAD_LEFT); // Make two char hex code
+            }
+    
+            return '#'.$return;
        }
    }
--- a/src/nineskeletor-1.0/templates/Config/render.html.twig
+++ b/src/nineskeletor-1.0/templates/Config/render.html.twig
@ -32,10 +32,10 @@
                        {% set otherstyle = "" %}
                        {% if config.id=='colorbgbodydark' %}
                            {% set bgcolor = val %}
-                            {% set color = app.session.get('colorfttitledark') %}
+                            {% set color = app.session.get('colorftbodydark') %}
                        {% elseif config.id=='colorbgbodylight' %}
                            {% set bgcolor = val %}
-                            {% set color = app.session.get('colorfttitlelight') %}
+                            {% set color = app.session.get('colorftbodylight') %}
                        {% elseif config.id=='colorfttitledark' %}
                            {% set bgcolor = app.session.get('colorbgbodydark') %}
                            {% set color = val %}
@ -48,6 +48,9 @@
                        {% elseif config.id=='colorftbodylight' %}
                            {% set bgcolor = app.session.get('colorbgbodylight') %}
                            {% set color = val %}
+                        {% elseif config.id=='fonttitle' %}
+                            {% set color = app.session.get('colorfttitlelight') %}
+                            {% set otherstyle = "font-family: "~val~";" %}                  
                        {% elseif config.id=='logodark' %}
                            {% set bgcolor = app.session.get('colorbgbodydark') %}
                            {% set otherstyle = "text-align: center;" %}
--- a/src/nineskeletor-1.0/templates/Crop/crop01.html.twig
+++ b/src/nineskeletor-1.0/templates/Crop/crop01.html.twig
@ -23,7 +23,7 @@

    Dropzone.options.MyDropZone = {
 	    maxFiles: 1,
-	    acceptedMimeTypes: 'image/*',
+	    acceptedMimeTypes: 'image/jpeg,image/png',
 	    //renameFilename: false,
 	    success: function(file, response){
            $(location).attr('href',"{{ path('app_crop02', {"type": type, "reportinput": reportinput }) }}?file="+response["file"]);
--- a/src/nineskeletor-1.0/templates/Include/sidebar.html.twig
+++ b/src/nineskeletor-1.0/templates/Include/sidebar.html.twig
@ -2,27 +2,36 @@
    <ul class="nav">
        {% if is_granted('ROLE_ADMIN') %}
        <br>
-        <li class="title">Administration</li>
+        <li class="title">Configuration</li>

        <li>
            <a href="{{path("app_config")}}">
-            <i class="fa fa-cog"></i>Configurations
+            <i class="fa fa-cog"></i>Générale
            </a>
        </li>
-        
+
+        <li class="last">
+            <a href="{{path("app_theme")}}">
+            <i class="fa fa-paint-brush"></i>Thème
+            </a>
+        </li>
+
+        <li class="title">Organisation</li>
+
        <li>
            <a href="{{path("app_user")}}">
            <i class="fa fa-user"></i>Utilisateurs
            </a>
        </li>

-        <li>
+        <li class="last">
            <a href="{{path("app_group")}}">
            <i class="fa fa-users"></i>Groupes
            </a>
        </li>

        {% if appCron %}
+        <li class="title">Outils</li>
        <li>
            <a href="{{path("app_cron")}}">
            <i class="fa fa-cogs"></i>Jobs
--- a/src/nineskeletor-1.0/templates/Include/style.css.twig
+++ b/src/nineskeletor-1.0/templates/Include/style.css.twig
@ -7,6 +7,13 @@
    --colorftbodydark: {{ app.session.get('colorftbodydark')|raw }};       
    --fontbody: "{{ app.session.get('fontbody')|raw }}";
    --fonttitle: "{{ app.session.get('fonttitle')|raw }}";
+    --fontsizeh1: {{ app.session.get('fontsizeh1')~"px"|raw }};
+    --fontsizeh2: {{ app.session.get('fontsizeh2')~"px"|raw }};
+    --fontsizeh3: {{ app.session.get('fontsizeh3')~"px"|raw }};
+    --fontsizeh4: {{ app.session.get('fontsizeh4')~"px"|raw }};
+
+    --colorbgbodylight-darker: {{ app.session.get('colorbgbodylight-darker')|raw }};
+    --colorfttitlelight-darker: {{ app.session.get('colorfttitlelight-darker')|raw }};
 }

 /* COLOR BODY  */
@ -16,10 +23,6 @@ body {
    color:  var(--colorftbodylight);
 }

-.card {
-    background-color: var(--colorbgbodylight);
-}
-
 body .navbar.bg-dark {
    background-color: var(--colorbgbodydark)!important;
 }
@ -36,7 +39,11 @@ body #sidebar .nav a {
    color: var(--colorfttitledark); 
 }

-body h1, body h2, body h3 {
+body #sidebar .nav .last {
+    border-color: var(--colorfttitledark); 
+}
+
+body h1, body h2, body h3, body .modal-header h4 {
    color: var(--colorfttitlelight); 
 }

@ -44,23 +51,50 @@ body a, body .btn-link {
    color: var(--colorfttitlelight); 
 }

+body a:hover, body .btn-link:hover {
+    color: var(--colorfttitlelight-darker);
+}
+
 body .nav a{
    color: var(--colorfttitledark); 
 }

+body .table {
+    color: var(--colorftbodylight);
+}
+
+body .card {
+    background-color: var(--colorbgbodylight);
+}
+
+body .card-header {
+    background-color: var(--colorbgbodylight-darker);
+    color: var(--colorfttitlelight);
+    font-size: 120%;
+}
+
+body .card-header .custom-control {
+    color:  var(--colorftbodylight);
+    font-size: 80%;
+}
+
+body .page-item.active .page-link,
+body .page-item.active .page-link:hover {
+    background-color: var(--colorfttitlelight); 
+    border-color: var(--colorfttitlelight); 
+}
+
+body .modal-title {
+
+}

 /* COLOR BODY HOME */

-
 body.monocolor {
    background-color: var(--colorbgbodydark);
    color:  var(--colorftbodydark);
 }

-body.monocolor .card {
-    background-color: var(--colorbgbodydark);
-}
-
 body.monocolor .navbar.bg-dark {
    background-color: var(--colorbgbodydark)!important;
 }
@ -77,7 +111,7 @@ body.monocolor #sidebar .nav a {
    color: var(--colorfttitledark); 
 }

-body.monocolor h1, body.monocolor h2, body.monocolor h3 {
+body.monocolor h1, body.monocolor h2, body.monocolor h3, body.monocolor .modal-header h4 {
    color: var(--colorfttitledark); 
 }

@ -89,20 +123,45 @@ body.monocolor .nav a{
    color: var(--colorfttitledark); 
 }

+body.monocolor .card {
+    background-color: var(--colorbgbodydark);
+}

+body.monocolor .card-header {
+    background-color: var(--colorbgbodydark);
+    color: var(--colorfttitledark);
+    font-size: 120%;
+}
+
+body.monocolor .card-header .custom-control {
+    color:  var(--colorftbodydark);
+    font-size: 80%;
+}

 /* FONT */
 body {
    font-family: var(--fontbody); 
 }

-h1,h2,h3, .navbar-brand {
+h1,h2,h3, .navbar-brand, .card-header, .modal-header h4 {
    font-family:  var(--fonttitle); 
 }

+h1 { font-size: var(--fontsizeh1); }
+h2 { font-size: var(--fontsizeh2); }
+h3 { font-size: var(--fontsizeh3); }
+h4 { font-size: var(--fontsizeh4); }
+
+.card-header .custom-control {
+    font-family:  var(--fontbody);
+}

 {% if not useheader is defined or not useheader %}
 #main {
    padding:0px;
 }
+{% else %}
+#main {
+    margin-bottom: 100px;
+}
 {%endif%}
--- a/src/nineskeletor-1.0/templates/Theme/list.html.twig
+++ b/src/nineskeletor-1.0/templates/Theme/list.html.twig
@ -0,0 +1,29 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+    <h1>Thèmes</h1>
+    
+    <h2>Thème en cours</h2>
+    <div class="text-center" style="width:330px">
+        <img src="{{currentheme.url}}/look.png" style="width:100%; background-color: {{app.session.get('colorbgbodydark') }}"><br>
+        {{currentheme.name}}
+    </div>
+
+    <h2 class="mt-5">Thèmes disponibles</h2>
+
+    <div>
+        {% for theme in themes %}
+            <div class="text-center mb-4" style="width:330px; display: inline-block">
+                <img src="{{theme.url}}/look.png" style="height:170px; background-color: {{app.session.get('colorbgbodydark') }}"><br>
+                {{theme.name}}<br>
+                <a href="{{ path("app_theme_select",{"name":theme.dir}) }}" class="btn btn-primary" role="button">Sélectionner</a>
+            </div>
+        {% endfor %}
+    </div>
+{% endblock %}
+
+
+
+
+
+
--- a/src/nineskeletor-1.0/templates/User/edit.html.twig
+++ b/src/nineskeletor-1.0/templates/User/edit.html.twig
@ -48,7 +48,7 @@
        <img id="user_avatar_img" src="{{ avatar|urlavatar }}" class="avatar big" >
        {{ form_widget(form.avatar) }}
        {% if appMasteridentity=="LDAP" or appMasteridentity=="SQL" %}
-        <a class="btn btn-info" style="width:100%; margin-bottom:15px;"  onClick="ModalLoad('mymodallarge','Avatar','{{ path('app_crop01', {"type": "avatar", "reportinput": "user_avatar" }) }}');" title='Ajouter un avatar'>Modifier</a>
+        <bouton class="btn btn-info" style="width:100%; margin-bottom:15px;"  onClick="ModalLoad('mymodallarge','Avatar','{{ path('app_crop01', {"type": "avatar", "reportinput": "user_avatar" }) }}');" title='Ajouter un avatar'>Modifier</bouton>
        {% endif %}
    </div>

--- a/src/nineskeletor-1.0/templates/base.html.twig
+++ b/src/nineskeletor-1.0/templates/base.html.twig
@ -22,7 +22,13 @@

    <style>
        {{ include('Include/style.css.twig') }}
+    </style>

+    {% if not app.session.get("apptheme") is empty %}
+    <link href="/{{ appAlias }}/themes/{{ app.session.get("apptheme") }}/style.css" rel="stylesheet" media="screen" />
+    {% endif %}
+
+    <style>
        {% block localstyle %}

        {% endblock %}
@ -159,6 +165,10 @@
            {% endblock %}
        </script>

+        {% if not app.session.get("apptheme") is empty %}
+            <script src="/{{ appAlias }}/themes/{{ app.session.get("apptheme") }}/local.js"></script>
+        {% endif %}
+
        {% if sondeUse %}
            {{ render(path("app_sonde")) }}
        {% endif %}