support separate css files for light/dark themes.

pkg/api/dtos/index.go

@@ -8,11 +8,16 @@ type IndexViewData struct {
 	GoogleAnalyticsId  string
 	GoogleTagManagerId string
 
-	PluginCss    []string
+	PluginCss    []*PluginCss
 	PluginJs     []string
 	MainNavLinks []*NavLink
 }
 
+type PluginCss struct {
+	Light string `json:"light"`
+	Dark  string `json:"dark"`
+}
+
 type NavLink struct {
 	Text string `json:"text"`
 	Icon string `json:"icon"`

pkg/api/index.go

@@ -67,7 +67,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 			data.PluginJs = append(data.PluginJs, js.Module)
 		}
 		for _, css := range plugin.Css {
-			data.PluginCss = append(data.PluginCss, css.Href)
+			data.PluginCss = append(data.PluginCss, &dtos.PluginCss{Light: css.Light, Dark: css.Dark})
 		}
 		for _, item := range plugin.MainNavLinks {
 			// only show menu items for the specified roles.

pkg/plugins/models.go

@@ -38,6 +38,7 @@ type ExternalPluginRoute struct {
 
 type ExternalPluginJs struct {
 	Module    string `json:"module"`
+	Directive string `json:"Directive"`
 }
 
 type ExternalPluginNavLink struct {
@@ -48,7 +49,8 @@ type ExternalPluginNavLink struct {
 }
 
 type ExternalPluginCss struct {
-	Href string `json:"href"`
+	Light string `json:"light"`
+	Dark  string `json:"dark"`
 }
 
 type ExternalPlugin struct {

public/views/index.html

@@ -10,13 +10,17 @@
 
 		[[if .User.LightTheme]]
 		  <link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css">
+		  [[ range $css := .PluginCss ]]
+			<link rel="stylesheet" href="[[$.AppSubUrl]]/[[ $css.Light ]]">
+		  [[ end ]]
 		[[else]]
 		  <link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.dark.min.css">
-		[[end]]
-
 		  [[ range $css := .PluginCss ]]
-			<link rel="stylesheet" href="[[$.AppSubUrl]]/[[ $css ]]">
+			<link rel="stylesheet" href="[[$.AppSubUrl]]/[[ $css.Dark ]]">
 		  [[ end ]]
+		[[end]]
+
+		
 
     <link rel="icon" type="image/png" href="[[.AppSubUrl]]/img/fav32.png">
 		<base href="[[.AppSubUrl]]/" />