Default text/selected color (change color globally)

Question

Hello,On every component iam getting #e3165b color set.Who to change it globally?Few examples below:Thanks!

Ponmani Murugaiyan · Accepted Answer

Hi Mantas, 

Greetings from Syncfusion support. 

You can override the styles to change the selected text or date color in the individual component. Please find the styles below for reference. 

1.DateTimePicker component:  

Sample: https://stackblitz.com/edit/angular-bynv8t-mmbh1w?file=app.component.ts 





/* Change selected date color when focusing */ 
.e-calendar .e-content td.e-selected span.e-day, 
.e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day { 
  background-color: #20e316; 
} 
/* Change selected date color when hovering */ 
.e-calendar .e-content td.e-today.e-selected:hover span.e-day, 
.e-calendar .e-content td.e-selected:hover span.e-day, 
.e-calendar .e-content td.e-selected.e-focused-date span.e-day, 
.e-bigger.e-small .e-calendar .e-content td.e-today.e-selected:hover span.e-day, 
.e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day, 
.e-bigger.e-small .e-calendar .e-content td.e-selected.e-focused-date span.e-day { 
  background-color: #34b511; 
} 





  

2.DropDownList component:  
 
Sample: https://stackblitz.com/edit/angular-xa9sgz-zqhwsa?file=app.component.ts 





.e-dropdownbase .e-list-item.e-active, 
.e-dropdownbase .e-list-item.e-active.e-hover { 
  background-color: #eee; 
  border-color: #fff; 
  color: #16e34d; 
} 





  

Also we suggest you to check with the theme Studio which can be used to customize a new theme from an existing theme. 

Documentation: https://ej2.syncfusion.com/documentation/appearance/theme-studio/ 

Link: https://ej2.syncfusion.com/themestudio/?theme=material 

Please get back us if you need further assistance. 

Regards, 
Ponmani M

Francis Lapointe Boutin · Answer

Thanks Ponmani, thats excellent. On the same topic, how can I hide the circle around the current day? The 5 April on your picture.Thanks

Sureshkumar P · Answer

Mantas, 
 
As per your requirement, we have modified the today date selected background color with circle styles. Please find the modified code example here 




/* Change selected today date color when focusing */ 
.e-calendar .e-content td.e-today.e-selected span.e-day, 
.e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day { 
  background-color: #20e316; 
  border: none; 
  box-shadow: none; 
} 
 
 
Find the modified already provided sample here: https://stackblitz.com/edit/angular-bynv8t-degm9z?file=app.component.css  
 
Regards, 
Sureshkumar P