Allow to customize the application

[pgiraud]

At least change some colors (by adding a custom css file) or change title.

[pgiraud]

Overriding theme colors without using sass seems to be very painful. The easier would be to change the theme colors, but this would require the integrator to compile assets (npm run build). Currently built assets are shipped with the application to make installation easier.

Loading the following custom.css file via a <link /> in the layout.html seem to work.

:root {                                               
  --bs-dark-rgb: 12, 89, 165;                         
  --explain-blue: #318ce7;                            
  --explain-blue-rgb: 49, 140, 321;                   
  --explain-blue-1: #1c78d4;                          
  --explain-blue-2: #0965c2;                          
}                                                     
                                                      
.nav-pills {                                          
  --bs-nav-pills-link-active-bg: var(--explain-blue); 
}                                                     
.nav-link:focus-visible {                             
  box-shadow: 0 0 0 .25rem #318ce740;                 
}                                                     
                                                      
.btn-primary {                                        
  --bs-btn-color: var(--bs-white);                    
  --bs-btn-bg: var(--explain-blue);                   
  --bs-btn-border-color: var(--explain-blue);         
  --bs-btn-hover-color: var(--bs-white);              
  --bs-btn-hover-bg: var(--explain-blue-1);           
  --bs-btn-hover-border-color: var(--explain-blue-1); 
  --bs-btn-focus-shadow-rgb: var(--explain-blue-rgb); 
  --bs-btn-active-color: var(--bs-btn-hover-color);   
  --bs-btn-active-bg: var(--explain-blue-2);          
  --bs-btn-active-border-color: var(--explain-blue-2);
}                                                     
                                                      
.btn-outline-primary {                                
  --bs-btn-color: var(--explain-blue);                
  --bs-btn-border-color: var(--explain-blue);         
  --bs-btn-hover-bg: var(--explain-blue);             
  --bs-btn-hover-border-color: var(--explain-blue);   
  --bs-btn-focus-shadow-rgb: var(--explain-blue-rgb); 
  --bs-btn-active-bg: var(--explain-blue);            
  --bs-btn-active-border-color: var(--explain-blue);  
  --bs-btn-disabled-color: var(--explain-blue);       
  --bs-btn-disabled-border-color: var(--explain-blue);
}                                                     

But:

• it's most probably incomplete,
• it contains a lot of rules to override a few colors.

Also, in an ideal world, the custom styles would be defined in the instance folder where the configuration sits.