Update studio themes provision

client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue

@@ -120,19 +120,19 @@ export default {
   data () {
     return {
       themeInputs: [
-        'white',
-        'black',
         'primary',
+        'black',
+        'white',
         'secondary',
+        'gray-200',
         'success',
         'warning',
         'danger',
         'light',
         'extra-light',
         'dark',
-        'tertiary',
-        'gray-200',
         'body-bg',
+        'tertiary',
       ],
       lightModeVariables: {
         'white': '#FFFFFF',

client/web/compose/src/app.js

@@ -56,6 +56,11 @@ export default (options = {}) => {
             .setHeader('Content-Language', user.meta.preferredLanguage)
         }
 
+        // switch the webapp theme based on user preference
+        if (user.meta.theme) {
+          document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
+        }
+
         // ref to vue is needed inside compose helper
         // load and register bundle and list of client/server scripts
 

client/web/discovery/src/App.vue

@@ -28,6 +28,11 @@ export default {
         this.$i18n.i18next.changeLanguage(user.meta.preferredLanguage)
       }
 
+      // switch the webapp theme based on user preference
+      if (user.meta.theme) {
+        document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
+      }
+
       this.$Settings.init({ api: this.$SystemAPI }).then(() => {
         this.loaded = true
 

client/web/one/src/app.js

@@ -37,6 +37,11 @@ export default (options = {}) => {
           this.$i18n.i18next.changeLanguage(user.meta.preferredLanguage)
         }
 
+        // switch the webapp theme based on user preference
+        if (user.meta.theme) {
+          document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
+        }
+
         this.$store.dispatch('wfPrompts/update')
 
         return this.$Settings.init({ api: this.$SystemAPI }).finally(() => {

client/web/privacy/src/app.js

@@ -36,6 +36,11 @@ export default (options = {}) => {
           this.$i18n.i18next.changeLanguage(user.meta.preferredLanguage)
         }
 
+        // switch the webapp theme based on user preference
+        if (user.meta.theme) {
+          document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
+        }
+
         // Load effective permissions
         this.$store.dispatch('rbac/load')
 

client/web/reporter/src/app.js

@@ -44,6 +44,11 @@ export default (options = {}) => {
             .setHeader('Content-Language', user.meta.preferredLanguage)
         }
 
+        // switch the webapp theme based on user preference
+        if (user.meta.theme) {
+          document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
+        }
+
         // Load effective permissions
         this.$store.dispatch('rbac/load')
 

client/web/workflow/src/app.js

@@ -34,6 +34,11 @@ export default (options = {}) => {
           this.$i18n.i18next.changeLanguage(user.meta.preferredLanguage)
         }
 
+        // switch the webapp theme based on user preference
+        if (user.meta.theme) {
+          document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
+        }
+
         // Load effective permissions
         this.$store.dispatch('rbac/load')
 

server/pkg/provision/stylesheet.go

@@ -10,8 +10,8 @@ import (
 	"strconv"
 )
 
-// updateWebappTheme is a function that provisions webapp themes.
+// updateWebappTheme is a function that provisions new webapp themes,
-// It migrates the old custom css and branding sass settings to the new webapp themes setting.
+// and migrates the old custom css and branding sass settings to new webapp themes setting.
 func updateWebappTheme(ctx context.Context, log *zap.Logger, s store.Storer) (err error) {
 	vv, _, err := store.SearchSettingValues(ctx, s, types.SettingsFilter{})
 	if err != nil {
@@ -20,74 +20,159 @@ func updateWebappTheme(ctx context.Context, log *zap.Logger, s store.Storer) (er
 
 	oldCustomCSS := vv.FindByName("ui.custom-css")
 	oldBranding := vv.FindByName("ui.studio.branding-sass")
+	studioThemes := vv.FindByName("ui.studio.themes")
 
-	provisionTheme := func(name string, oldValue *types.SettingValue, themeIDs ...string) (err error) {
+	//provision new studio themes setting
-		oldValueStr, err := strconv.Unquote(oldValue.Value.String())
+	newThemes := processNewTheme()
+	if oldBranding.IsNull() && studioThemes.IsNull() {
+		err = provisionTheme(ctx, s, "ui.studio.themes", newThemes, log)
+		if err != nil {
+			return err
+		}
+	}
+
+	// provision old branding sass setting to studio themes setting
+	if !oldBranding.IsNull() {
+		themes, err := processOldTheme(oldBranding, sass.LightTheme, sass.DarkTheme)
 		if err != nil {
 			return err
 		}
 
-		var themes []types.Theme
+		//append dark mode from new themes
-		for _, themeID := range themeIDs {
+		themes = append(themes, newThemes[1])
-			if len(themeIDs) == 2 {
-				themes = append(themes, types.Theme{
-					ID:     themeID,
-					Values: oldValueStr,
-				})
-				continue
-			}
 
-			if themeID == sass.GeneralTheme {
+		err = provisionTheme(ctx, s, "ui.studio.themes", themes, log)
-				themes = append(themes, types.Theme{
-					ID:     themeID,
-					Values: oldValueStr,
-				})
-				continue
-			}
-
-			themes = append(themes, types.Theme{
-				ID:     themeID,
-				Values: "",
-			})
-		}
-
-		value, err := json.Marshal(themes)
 		if err != nil {
 			return err
 		}
 
-		newThemeSetting := &types.SettingValue{
-			Name:  name,
-			Value: value,
-		}
-
-		err = store.CreateSettingValue(ctx, s, newThemeSetting)
-		if err != nil {
-			log.Error("failed to provision webapp themes", zap.Error(err))
-			return err
-		}
-
 		// delete old custom css and branding sass settings from the database
-		err = store.DeleteSettingValue(ctx, s, oldValue)
+		err = store.DeleteSettingValue(ctx, s, oldBranding)
 		if err != nil {
 			return err
 		}
-
-		return nil
 	}
 
 	// provision custom CSS
 	if !oldCustomCSS.IsNull() {
-		err = provisionTheme("ui.studio.custom-css", oldCustomCSS, sass.GeneralTheme, sass.LightTheme, sass.DarkTheme)
+		themes, err := processOldTheme(oldCustomCSS, sass.GeneralTheme, sass.LightTheme, sass.DarkTheme)
+		if err != nil {
+			return err
+		}
+
+		err = provisionTheme(ctx, s, "ui.studio.custom-css", themes, log)
+		if err != nil {
+			return err
+		}
+
+		// delete old custom css and branding sass settings from the database
+		err = store.DeleteSettingValue(ctx, s, oldCustomCSS)
 		if err != nil {
 			return err
 		}
 	}
 
-	// provision branding sass
+	return nil
-	if !oldBranding.IsNull() {
+}
-		err = provisionTheme("ui.studio.themes", oldBranding, sass.LightTheme, sass.DarkTheme)
+
+func provisionTheme(ctx context.Context, s store.Storer, name string, themes []types.Theme, log *zap.Logger) (err error) {
+	value, err := json.Marshal(themes)
+	if err != nil {
+		return err
+	}
+
+	newThemeSetting := &types.SettingValue{
+		Name:  name,
+		Value: value,
+	}
+
+	err = store.CreateSettingValue(ctx, s, newThemeSetting)
+	if err != nil {
+		log.Error("failed to provision webapp themes", zap.Error(err))
+		return err
 	}
 
 	return nil
 }
+
+func processNewTheme() (themes []types.Theme) {
+	lightModeValues := `
+    {
+        "white":"#FFFFFF",
+        "black":"#162425",
+        "primary":"#2E15CCFF",
+        "secondary":"#758D9B",
+        "success":"#43AA8B",
+        "warning":"#E2A046",
+        "danger":"#E54122",
+        "light":"#E4E9EF",
+        "extra-light":"#F3F5F7",
+        "dark":"#162425",
+        "tertiary":"#5E727E",
+        "gray-200":"#F9FAFB",
+        "body-bg":"#F9FAFB"
+    }`
+
+	darkModeValues := `
+    {
+        "white":"#162425",
+        "black":"#FFFFFF",
+        "primary":"#2E15CCFF",
+        "secondary":"#758D9B",
+        "success":"#43AA8B",
+        "warning":"#E2A046",
+        "danger":"#E54122",
+        "light":"#E4E9EF",
+        "extra-light":"#F3F5F7",
+        "dark":"#162425",
+        "tertiary":"#5E727E",
+        "gray-200":"#F9FAFB",
+        "body-bg":"#F9FAFB"
+    }`
+
+	themes = []types.Theme{
+		{
+			ID:     "light",
+			Values: lightModeValues,
+		},
+		{
+			ID:     "dark",
+			Values: darkModeValues,
+		},
+	}
+
+	return themes
+}
+
+func processOldTheme(oldValue *types.SettingValue, themeIDs ...string) (themes []types.Theme, err error) {
+	oldValueStr, err := strconv.Unquote(oldValue.Value.String())
+	if err != nil {
+		return
+	}
+
+	for _, themeID := range themeIDs {
+		//append only light mode on studio themes
+		if len(themeIDs) == 2 {
+			themes = append(themes, types.Theme{
+				ID:     themeID,
+				Values: oldValueStr,
+			})
+			break
+		}
+
+		if themeID == sass.GeneralTheme {
+			themes = append(themes, types.Theme{
+				ID:     themeID,
+				Values: oldValueStr,
+			})
+			continue
+		}
+
+		themes = append(themes, types.Theme{
+			ID:     themeID,
+			Values: "",
+		})
+	}
+
+	return
+}

server/system/service/stylesheet.go

@@ -42,36 +42,19 @@ func GenerateCSS(settings *types.AppSettings, sassDirPath string, log *zap.Logge
 	transpiler := sass.DartSassTranspiler(log)
 
 	// transpile sass to css for each theme
-	if studio.Themes != nil {
+	for _, theme := range studio.Themes {
-		for _, theme := range studio.Themes {
+		if studio.CustomCSS == nil {
-			if studio.CustomCSS == nil {
+			err := sass.Transpile(transpiler, log, theme.ID, theme.Values, "", sassDirPath)
-				err := sass.Transpile(transpiler, log, theme.ID, theme.Values, "", sassDirPath)
-				if err != nil {
-					continue
-				}
-			}
-
-			customCSS := processCustomCSS(theme.ID, customCSSMap)
-			// transpile sass to css
-			err := sass.Transpile(transpiler, log, theme.ID, theme.Values, customCSS, sassDirPath)
 			if err != nil {
 				continue
 			}
 		}
-	} else {
-		if studio.CustomCSS != nil {
-			for key := range customCSSMap {
-				if key == sass.GeneralTheme {
-					continue
-				}
 
-				customCSS := processCustomCSS(key, customCSSMap)
+		customCSS := processCustomCSS(theme.ID, customCSSMap)
-				// transpile sass to css
+		// transpile sass to css
-				err := sass.Transpile(transpiler, log, key, "", customCSS, sassDirPath)
+		err := sass.Transpile(transpiler, log, theme.ID, theme.Values, customCSS, sassDirPath)
-				if err != nil {
+		if err != nil {
-					continue
+			continue
-				}
-			}
 		}
 	}