diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go
index 88a694f542a..1314d2d94ac 100644
--- a/pkg/api/dtos/index.go
+++ b/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"`
diff --git a/pkg/api/index.go b/pkg/api/index.go
index efc0fd7a69a..5620d5726cd 100644
--- a/pkg/api/index.go
+++ b/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.
diff --git a/pkg/plugins/models.go b/pkg/plugins/models.go
index 14a4407adad..8438e96f227 100644
--- a/pkg/plugins/models.go
+++ b/pkg/plugins/models.go
@@ -37,7 +37,8 @@ type ExternalPluginRoute struct {
 }
 
 type ExternalPluginJs struct {
-	Module string `json:"module"`
+	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 {
diff --git a/public/views/index.html b/public/views/index.html
index 2932276c62f..73d57bb2d9a 100644
--- a/public/views/index.html
+++ b/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">
+		  [[ range $css := .PluginCss ]]
+			<link rel="stylesheet" href="[[$.AppSubUrl]]/[[ $css.Dark ]]">
+		  [[ end ]]
 		[[end]]
 
-		[[ range $css := .PluginCss ]]
-			<link rel="stylesheet" href="[[$.AppSubUrl]]/[[ $css ]]">
-		[[ end ]]
+		
 
     <link rel="icon" type="image/png" href="[[.AppSubUrl]]/img/fav32.png">
 		<base href="[[.AppSubUrl]]/" />