kendo-ui
Des thèmes

Mise en place d'un thème

Nous devons d'abord faire référence aux styles que nous voulons utiliser.

<link rel="stylesheet" href="[file path]/kendo.common.min.css" />
<link rel="stylesheet" href="[file path]/kendo.[Theme].min.css" />

Maintenant, la plupart des contrôles utilisent le [Theme] , donné dans la ressource de style ci-dessus.

Certains contrôles, tels que Chart, TreeMap, Diagram, StockChart, Sparkline, RadialGauge et LinearGauge, sont rendus avec des présentations JavaScript calculées et nécessitent une configuration supplémentaire lors de l'initialisation.

Par exemple le graphique:

$("#chart").kendoChart({
    theme: "blueOpal",
    //...
});

Liste de thèmes:

"black", "blueOpal", "bootstrap", "default", "flat", "highContrast", "material", "materialBlack", "metro", "metroBlack", "moonlight", "silver", "uniform", "fiori"(kendo ui pro), "nova"

Pour les définir globalement, vous pouvez remplacer Kendo de cette façon:

//The Themable Elements
var themable = ["Chart", "TreeMap", "Diagram", "StockChart", "Sparkline", "RadialGauge", "LinearGauge"];

//Check if kendo.dataviz is available
if (kendo.dataviz) {
  
  //Set for each control the default theme
  for (var i = 0; i < themable.length; i++) {
    var widget = kendo.dataviz.ui[themable[i]];

    if (widget) {
      widget.fn.options.theme = "blueOpal";
    }
  }
}