Website theme hue settings

pkg/config/enum.go

@@ -82,8 +82,40 @@ var (
 		"chat_moderation_rules",
 	}
 
+	// Website theme color hue choices.
+	WebsiteThemeHueChoices = []Option{
+		{
+			Label: "Default (no added color; classic nonshy theme)",
+			Value: "",
+		},
+		{
+			Label: "nonshy blue & pink",
+			Value: "blue-pink",
+		},
+		{
+			Label: "Pretty in pink",
+			Value: "pink",
+		},
+		{
+			Label: "Royal purple",
+			Value: "purple",
+		},
+		{
+			Label: "Cool blue",
+			Value: "blue",
+		},
+		{
+			Label: "Burnt red",
+			Value: "red",
+		},
+		{
+			Label: "Leafy green",
+			Value: "green",
+		},
+	}
+
 	// Choices for the Contact Us subject
-	ContactUsChoices = []ContactUs{
+	ContactUsChoices = []OptGroup{
 		{
 			Header: "Website Feedback",
 			Options: []Option{
@@ -146,8 +178,8 @@ var (
 	}
 )
 
-// ContactUs choices for the subject drop-down.
+// OptGroup choices for the subject drop-down.
-type ContactUs struct {
+type OptGroup struct {
 	Header  string
 	Options []Option
 }

pkg/controller/account/settings.go

@@ -42,7 +42,8 @@ func Settings() http.HandlerFunc {
 	var reHexColor = regexp.MustCompile(`^#[a-fA-F0-9]{6}$`)
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		vars := map[string]interface{}{
-			"Enum": config.ProfileEnums,
+			"Enum":                   config.ProfileEnums,
+			"WebsiteThemeHueChoices": config.WebsiteThemeHueChoices,
 		}
 
 		// Load the current user in case of updates.
@@ -186,12 +187,27 @@ func Settings() http.HandlerFunc {
 				for _, field := range []string{
 					"hero-text-dark",
 					"card-lightness",
-					"website-theme",
+					"website-theme", // light, dark, auto
 				} {
 					value := r.PostFormValue(field)
 					user.SetProfileField(field, value)
 				}
 
+				// Website theme color: constrain to available options.
+				for _, field := range []struct {
+					Name    string
+					Options []config.Option
+				}{
+					{"website-theme-hue", config.WebsiteThemeHueChoices},
+				} {
+					value := utility.StringInOptions(
+						r.PostFormValue(field.Name),
+						field.Options,
+						"",
+					)
+					user.SetProfileField(field.Name, value)
+				}
+
 				if err := user.Save(); err != nil {
 					session.FlashError(w, r, "Failed to save user to database: %s", err)
 				}

pkg/utility/enum.go

@@ -0,0 +1,15 @@
+package utility
+
+import "code.nonshy.com/nonshy/website/pkg/config"
+
+// StringInOptions constrains a string value (posted by the user) to only be one
+// of the available values in the Option list enum. Returns the string if OK, or
+// else the default string.
+func StringInOptions(v string, options []config.Option, orDefault string) string {
+	for _, option := range options {
+		if v == option.Value {
+			return v
+		}
+	}
+	return orDefault
+}

web/static/css/theme-blue-pink.css

@@ -0,0 +1,8 @@
+:root {
+    --bulma-primary-h: 300deg;
+    --bulma-primary-l: 80%;
+    --bulma-link-h: 204deg;
+    --bulma-link-l: 50%;
+    --bulma-scheme-h: 299;
+    --bulma-scheme-s: 22%;
+}

web/static/css/theme-blue.css

@@ -0,0 +1,7 @@
+:root {
+    --bulma-primary-h: 204deg;
+    --bulma-primary-l: 60%;
+    --bulma-link-h: 200deg;
+    --bulma-link-l: 34%;
+    --bulma-scheme-h: 173;
+}

web/static/css/theme-green.css

@@ -0,0 +1,7 @@
+:root {
+    --bulma-primary-h: 99deg;
+    --bulma-link-h: 112deg;
+    --bulma-link-l: 18%;
+    --bulma-scheme-h: 95;
+    --bulma-link-text: #009900;
+  }

web/static/css/theme-pink.css

@@ -0,0 +1,8 @@
+:root {
+  --bulma-primary-h: 300deg;
+  --bulma-primary-l: 80%;
+  --bulma-link-h: 293deg;
+  --bulma-scheme-h: 295;
+  --bulma-scheme-s: 39%;
+}
+

web/static/css/theme-purple.css

@@ -0,0 +1,8 @@
+:root {
+    --bulma-primary-h: 292deg;
+    --bulma-primary-l: 60%;
+    --bulma-link-h: 277deg;
+    --bulma-link-l: 45%;
+    --bulma-scheme-h: 293;
+    --bulma-scheme-s: 23%;
+}

web/static/css/theme-red.css

@@ -0,0 +1,7 @@
+:root {
+    --bulma-primary-h: 15deg;
+    --bulma-primary-l: 63%;
+    --bulma-link-h: 12deg;
+    --bulma-link-l: 30%;
+    --bulma-scheme-h: 0;
+}

web/templates/account/settings.html

@@ -402,6 +402,26 @@
                             </p>
                         </div>
 
+                        <div class="field">
+                            <label class="label" for="website-theme-hue">
+                                Accent color <span class="tag is-success">New!</span>
+                            </label>
+                            <div class="select is-fullwidth">
+                                <select name="website-theme-hue">
+                                    {{range .WebsiteThemeHueChoices}}
+                                    <option value="{{.Value}}"
+                                        {{if eq ($User.GetProfileField "website-theme-hue") .Value}}selected{{end}}>
+                                        {{.Label}}
+                                    </option>
+                                    {{end}}
+                                </select>
+                            </div>
+                            <p class="help">
+                                Select an "accent color" for the website theme. Mix and match these with
+                                the Light and Dark themes! Some accent colors really pop on the dark theme.
+                            </p>
+                        </div>
+
                         <hr>
 
                         <!--

web/templates/base.html

@@ -16,6 +16,11 @@
     {{- else -}}
     <link rel="stylesheet" type="text/css" href="/static/css/nonshy-prefers-dark.css?build={{.BuildHash}}">
     {{- end -}}
+
+    <!-- User theme hue -->
+    {{- if and .LoggedIn (.CurrentUser.GetProfileField "website-theme-hue") -}}
+    <link rel="stylesheet" type="text/css" href="/static/css/theme-{{.CurrentUser.GetProfileField "website-theme-hue"}}.css">
+    {{end}}
     <link rel="stylesheet" href="/static/fontawesome-free-6.6.0-web/css/all.css">
     <link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
     <link rel="manifest" href="/manifest.json">