Iterate on color themes + Forum style fixes

* Move the forum box colors into dedicated styles that are easier to
  override for the new theme colors.
* Updated the themes so forums and comment thread background cards now
  match your chosen style.
* Add yellow and orange theme variants.

pkg/config/enum.go

@@ -83,7 +83,10 @@ var (
 	}
 
 	// Website theme color hue choices.
-	WebsiteThemeHueChoices = []Option{
+	WebsiteThemeHueChoices = []OptGroup{
+		{
+			Header: "Custom Themes",
+			Options: []Option{
 				{
 					Label: "Default (no added color; classic nonshy theme)",
 					Value: "",
@@ -92,6 +95,31 @@ var (
 					Label: "nonshy blue & pink",
 					Value: "blue-pink",
 				},
+			},
+		},
+		{
+			Header: "Just a Splash of Color",
+			Options: []Option{
+				{
+					Label: "Burnt red",
+					Value: "red",
+				},
+				{
+					Label: "Harvest orange",
+					Value: "orange",
+				},
+				{
+					Label: "Golden yellow",
+					Value: "yellow",
+				},
+				{
+					Label: "Leafy green",
+					Value: "green",
+				},
+				{
+					Label: "Cool blue",
+					Value: "blue",
+				},
 				{
 					Label: "Pretty in pink",
 					Value: "pink",
@@ -100,17 +128,7 @@ var (
 					Label: "Royal purple",
 					Value: "purple",
 				},
-		{
-			Label: "Cool blue",
-			Value: "blue",
 			},
-		{
-			Label: "Burnt red",
-			Value: "red",
-		},
-		{
-			Label: "Leafy green",
-			Value: "green",
 		},
 	}
 

pkg/controller/account/settings.go

@@ -196,11 +196,11 @@ func Settings() http.HandlerFunc {
 				// Website theme color: constrain to available options.
 				for _, field := range []struct {
 					Name    string
-					Options []config.Option
+					Options []config.OptGroup
 				}{
 					{"website-theme-hue", config.WebsiteThemeHueChoices},
 				} {
-					value := utility.StringInOptions(
+					value := utility.StringInOptGroup(
 						r.PostFormValue(field.Name),
 						field.Options,
 						"",

pkg/utility/enum.go

@@ -13,3 +13,17 @@ func StringInOptions(v string, options []config.Option, orDefault string) string
 	}
 	return orDefault
 }
+
+// StringInOptGroup 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 StringInOptGroup(v string, options []config.OptGroup, orDefault string) string {
+	for _, group := range options {
+		for _, option := range group.Options {
+			if v == option.Value {
+				return v
+			}
+		}
+	}
+	return orDefault
+}

web/static/css/dark-theme.css

@@ -78,3 +78,19 @@ a.has-text-dark:hover {
     background-color: #550;
     color: #FFC;
 }
+
+/*
+ * Forum Color overrides for dark theme.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #163b27;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #144225;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #2c2812;
+}

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

@@ -0,0 +1,15 @@
+/*
+ * Forum Color overrides for dark theme.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #18163b;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #142842;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #17122c;
+}

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

@@ -0,0 +1,15 @@
+/*
+ * Forum Color overrides for dark theme.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #3b1638;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #42143e;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #1e122c;
+}

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

@@ -6,3 +6,20 @@
     --bulma-scheme-h: 299;
     --bulma-scheme-s: 22%;
 }
+
+/*
+ * Forum Colors: with all the nested boxes, Bulma's default color scheme is
+ * too limited for a good experience.
+ */
+.nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #fbd1ff;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #ddd0f1;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #e7c2ff;
+}

web/static/css/theme-blue.css

@@ -5,3 +5,20 @@
     --bulma-link-l: 34%;
     --bulma-scheme-h: 173;
 }
+
+/*
+ * Forum Colors: with all the nested boxes, Bulma's default color scheme is
+ * too limited for a good experience.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #d1f0ff;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #d6d9ff;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #c2d2ff;
+}

web/static/css/theme-green-dark.css

@@ -0,0 +1,15 @@
+/*
+ * Forum Color overrides for dark theme.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #193b16;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #2e4214;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #122c1f;
+}

web/static/css/theme-green.css

@@ -4,4 +4,21 @@
     --bulma-link-l: 18%;
     --bulma-scheme-h: 95;
     --bulma-link-text: #009900;
-  }
+}
+
+/*
+ * Forum Colors: with all the nested boxes, Bulma's default color scheme is
+ * too limited for a good experience.
+ */
+ .nonshy-forum-box-1 {
+  /* Outermost box: Forum or Thread top-level wrappers */
+  background-color: #d1ffd1;
+}
+.nonshy-forum-box-2 {
+  /* Nested box: "Latest Post" on Forum-level views */
+  background-color: #e3f1d0;
+}
+.nonshy-forum-box-3 {
+  /* Nested box: Topics/Posts/Users/View counters */
+  background-color: #c2ffe8;
+}

web/static/css/theme-orange-dark.css

@@ -0,0 +1,15 @@
+/*
+ * Forum Color overrides for dark theme.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #3b2816;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #422a14;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #2c1912;
+}

web/static/css/theme-orange.css

@@ -0,0 +1,23 @@
+:root {
+    --bulma-primary-h: 39deg;
+    --bulma-link-h: 21deg;
+    --bulma-link-l: 39%;
+    --bulma-scheme-h: 34;
+}  
+
+/*
+ * Forum Colors: with all the nested boxes, Bulma's default color scheme is
+ * too limited for a good experience.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #ffe2d1;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #f1e8d0;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #ffcbc2;
+}

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

@@ -0,0 +1,15 @@
+/*
+ * Forum Color overrides for dark theme.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #3b1638;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #42143e;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #1e122c;
+}

web/static/css/theme-pink.css

@@ -6,3 +6,19 @@
   --bulma-scheme-s: 39%;
 }
 
+/*
+ * Forum Colors: with all the nested boxes, Bulma's default color scheme is
+ * too limited for a good experience.
+ */
+ .nonshy-forum-box-1 {
+  /* Outermost box: Forum or Thread top-level wrappers */
+  background-color: #fbd1ff;
+}
+.nonshy-forum-box-2 {
+  /* Nested box: "Latest Post" on Forum-level views */
+  background-color: #ddd0f1;
+}
+.nonshy-forum-box-3 {
+  /* Nested box: Topics/Posts/Users/View counters */
+  background-color: #e7c2ff;
+}

web/static/css/theme-purple-dark.css

@@ -0,0 +1,15 @@
+/*
+ * Forum Color overrides for dark theme.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #37163b;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #3e1442;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #1e122c;
+}

web/static/css/theme-purple.css

@@ -6,3 +6,20 @@
     --bulma-scheme-h: 293;
     --bulma-scheme-s: 23%;
 }
+
+/*
+ * Forum Colors: with all the nested boxes, Bulma's default color scheme is
+ * too limited for a good experience.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #f4d1ff;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #f1d0ef;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #d7c2ff;
+}

web/static/css/theme-red-dark.css

@@ -0,0 +1,15 @@
+/*
+ * Forum Color overrides for dark theme.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #3b1616;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #421d14;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #2c1912;
+}

web/static/css/theme-red.css

@@ -5,3 +5,20 @@
     --bulma-link-l: 30%;
     --bulma-scheme-h: 0;
 }
+
+/*
+ * Forum Colors: with all the nested boxes, Bulma's default color scheme is
+ * too limited for a good experience.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #ffd1d1;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #f1d8d0;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #ffd0c2;
+}

web/static/css/theme-yellow-dark.css

@@ -0,0 +1,15 @@
+/*
+ * Forum Color overrides for dark theme.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #3b3516;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #423714;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #2c2c12;
+}

web/static/css/theme-yellow.css

@@ -0,0 +1,25 @@
+:root {
+    --bulma-primary-h: 59deg;
+    --bulma-primary-l: 51%;
+    --bulma-link-h: 57deg;
+    --bulma-link-l: 26%;
+    --bulma-scheme-h: 62;
+    --bulma-link-text: #999900;
+}
+
+/*
+ * Forum Colors: with all the nested boxes, Bulma's default color scheme is
+ * too limited for a good experience.
+ */
+ .nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #ffe2d1;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #f1e8d0;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #ffcbc2;
+}

web/static/css/theme.css

@@ -251,3 +251,20 @@ nav.navbar {
     top: 4px;
     right: 4px;
 }
+
+/*
+ * Forum Colors: with all the nested boxes, Bulma's default color scheme is
+ * too limited for a good experience.
+ */
+.nonshy-forum-box-1 {
+    /* Outermost box: Forum or Thread top-level wrappers */
+    background-color: #d1fff8;
+}
+.nonshy-forum-box-2 {
+    /* Nested box: "Latest Post" on Forum-level views */
+    background-color: #d0f1e2;
+}
+.nonshy-forum-box-3 {
+    /* Nested box: Topics/Posts/Users/View counters */
+    background-color: #ffedc2;
+}

web/templates/account/settings.html

@@ -14,7 +14,7 @@
     <div class="columns mt-4">
         <div class="column is-one-quarter">
             <div class="card">
-                <div class="card-header has-background-info">
+                <div class="card-header has-background-link">
                     <p class="card-header-title has-text-light">
                         <i class="fa fa-gear mr-2"></i>
                         Settings Menu
@@ -344,29 +344,30 @@
             </div>
 
             <!-- Look & Feel -->
-            <div class="card mb-5" id="look">
+            <div id="look">
+                <form method="POST" action="/settings">
+                    {{InputCSRF}}
+                    <input type="hidden" name="intent" value="look">
+
+                    <div class="card mb-5">
                         <header class="card-header has-background-link">
                             <p class="card-header-title has-text-light">
                                 <i class="fa fa-palette pr-2"></i>
-                        Look &amp; Feel
+                                Website Theme
                             </p>
                         </header>
 
                         <div class="card-content">
-                    <form method="POST" action="/settings">
-                        <input type="hidden" name="intent" value="look">
-                        {{InputCSRF}}
-
-                        <p class="block">
-                            On this screen, you may customize the visual appearance of your profile
-                            page. You may set a custom color gradient for your header bar and personalize
-                            the colors of your profile cards.
-                        </p>
-
                             <!--
                             -- Website Theme Section
                             -->
-                        <h2 class="subtitle">Website Theme <span class="tag is-success">New!</span></h2>
+                            <p class="block">
+                                You may set a custom theme to change the way the {{PrettyTitle}} website looks to you.
+                                Choose between a Light and Dark variant, and set an optional accent color to apply a
+                                new style to the entire website.
+                            </p>
+
+                            <h2 class="subtitle">Light or Dark Mode</h2>
 
                             <div class="field">
                                 <label class="checkbox">
@@ -398,7 +399,6 @@
                                     This setting controls how the website theme will appear to you while logged in.
                                     By default, the dark theme is used if your device prefers dark, but you can
                                     manually override it to the Light or Dark themes above.
-                                Remember to click "Save Look & Feel" below to see the change!
                                 </p>
                             </div>
 
@@ -409,11 +409,15 @@
                                 <div class="select is-fullwidth">
                                     <select name="website-theme-hue">
                                         {{range .WebsiteThemeHueChoices}}
+                                        <optgroup label="{{.Header}}">
+                                            {{range .Options}}
                                             <option value="{{.Value}}"
                                                 {{if eq ($User.GetProfileField "website-theme-hue") .Value}}selected{{end}}>
                                                 {{.Label}}
                                             </option>
                                             {{end}}
+                                        </optgroup>
+                                        {{end}}
                                     </select>
                                 </div>
                                 <p class="help">
@@ -422,7 +426,29 @@
                                 </p>
                             </div>
 
-                        <hr>
+                            <div class="field">
+                                <button type="submit" class="button is-primary">
+                                    <i class="fa fa-save mr-2"></i> Apply Website Theme
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card mb-5">
+                        <header class="card-header has-background-link">
+                            <p class="card-header-title has-text-light">
+                                <i class="fa fa-palette pr-2"></i>
+                                My Profile Page Look &amp; Feel
+                            </p>
+                        </header>
+
+                        <div class="card-content">
+
+                            <p class="block">
+                                On this screen, you may customize the visual appearance of your profile
+                                page. You may set a custom color gradient for your header bar and personalize
+                                the colors of your profile cards.
+                            </p>
 
                             <!--
                             -- Profile Header Section
@@ -604,9 +630,10 @@
                                     <i class="fa fa-save mr-2"></i> Save Look &amp; Feel
                                 </button>
                             </div>
-                    </form>
                         </div>
                     </div>
+                </form>
+            </div>
 
             <!-- Website Preferences -->
             <div class="card mb-5" id="prefs">

web/templates/base.html

@@ -8,6 +8,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css?build={{.BuildHash}}">
+    <link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
     <!-- Bulma theme CSS -->
     {{- if eq .WebsiteTheme "light" -}}
     <link rel="stylesheet" type="text/css" href="/static/css/bulma-no-dark-mode.min.css?build={{.BuildHash}}">
@@ -17,12 +18,18 @@
     <link rel="stylesheet" type="text/css" href="/static/css/nonshy-prefers-dark.css?build={{.BuildHash}}">
     {{- end -}}
 
-    <!-- User theme hue -->
+<!-- User theme hue -->
-    {{- if and .LoggedIn (.CurrentUser.GetProfileField "website-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">
+    {{- $WebsiteThemeHue := .CurrentUser.GetProfileField "website-theme-hue" }}
-    {{end}}
+    <link rel="stylesheet" type="text/css" href="/static/css/theme-{{$WebsiteThemeHue}}.css">
+
+    <!-- Dark theme mixin -->
+    {{- if or (eq .WebsiteTheme "dark") (ne .WebsiteTheme "light") -}}
+    <link rel="stylesheet" type="text/css" href="/static/css/theme-{{$WebsiteThemeHue}}-dark.css" {{if ne .WebsiteTheme "dark"}}media="(prefers-color-scheme: dark)"{{end}}>
+    {{- end -}}
+{{- 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">
     <title>{{template "title" .}} - {{ .Title }}</title>
 </head>

web/templates/chat.html

@@ -1,7 +1,7 @@
 {{define "title"}}Chat Rooms{{end}}
 {{define "content"}}
 <div class="block">
-    <section class="hero is-light is-bold">
+    <section class="hero is-link is-bold">
         <div class="hero-body">
             <div class="container">
                 <div class="level">

web/templates/forum/board_index.html

@@ -1,7 +1,7 @@
 {{define "title"}}{{.Forum.Title}}{{end}}
 {{define "content"}}
 <div class="block">
-    <section class="hero is-light is-success">
+    <section class="hero is-link is-bold">
         <div class="hero-body">
             <div class="container">
                 <div class="level">
@@ -108,7 +108,7 @@
 <div class="block p-2">
 {{range .Threads}}
     {{$Stats := $Root.ThreadMap.Get .ID}}
-    <div class="box has-background-success-light has-text-dark">
+    <div class="box nonshy-forum-box-1 has-text-dark">
         <div class="columns">
             <div class="column is-2 has-text-centered pt-0 pb-1">
                 <!-- Thread starter is blocked? -->
@@ -171,7 +171,7 @@
             <div class="column is-narrow pb-1 pt-0 px-1">
                 <div class="columns is-mobile">
                     <div class="column has-text-centered pr-1">
-                        <div class="box p-2">
+                        <div class="box nonshy-forum-box-3 p-2">
                             <p class="is-size-7">Replies</p>
                             {{if $Stats}}
                                 {{$Stats.Replies}}
@@ -181,7 +181,7 @@
                         </div>
                     </div>
                     <div class="column has-text-centered pl-1">
-                        <div class="box p-2">
+                        <div class="box nonshy-forum-box-3 p-2">
                             <p class="is-size-7">Views</p>
                             {{if $Stats}}
                                 {{$Stats.Views}}

web/templates/forum/index.html

@@ -1,7 +1,7 @@
 {{define "title"}}Forums{{end}}
 {{define "content"}}
 <div class="block">
-    <section class="hero is-light is-success">
+    <section class="hero is-link is-bold">
         <div class="hero-body">
             <div class="container">
                 <div class="level">
@@ -154,7 +154,7 @@
         {{else}}
             {{range .Forums}}
             {{$Stats := $Root.ForumMap.Get .ID}}
-            <div class="card block has-background-primary-light has-text-dark">
+            <div class="card block nonshy-forum-box-1 has-text-dark">
                 <div class="card-content">
                     <div class="columns">
                         <div class="column is-3 pt-0 pb-1">
@@ -230,7 +230,7 @@
 
                         </div>
                         <div class="column py-1">
-                            <div class="box has-background-success-light has-text-dark">
+                            <div class="box nonshy-forum-box-2 has-text-dark">
                                 <h2 class="subtitle mb-1 has-text-dark">Latest Post</h2>
                                 {{if $Stats.RecentThread}}
                                 <a href="/go/comment?id={{$Stats.RecentPost.ID}}">
@@ -253,7 +253,7 @@
                         <div class="column is-3 py-1">
                             <div class="columns is-mobile is-gapless">
                                 <div class="column has-text-centered mr-1">
-                                    <div class="box has-background-warning-light has-text-dark p-2">
+                                    <div class="box nonshy-forum-box-3 has-text-dark p-2">
                                         <p class="is-size-7 has-text-dark">Topics</p>
                                         {{if $Stats}}
                                             {{$Stats.Threads}}
@@ -263,7 +263,7 @@
                                     </div>
                                 </div>
                                 <div class="column has-text-centered mx-1">
-                                    <div class="box has-background-warning-light has-text-dark p-2">
+                                    <div class="box nonshy-forum-box-3 has-text-dark p-2">
                                         <p class="is-size-7 has-text-dark">Posts</p>
                                         {{if $Stats}}
                                             {{$Stats.Posts}}
@@ -273,7 +273,7 @@
                                     </div>
                                 </div>
                                 <div class="column has-text-centered ml-1">
-                                    <div class="box has-background-warning-light has-text-dark p-2">
+                                    <div class="box nonshy-forum-box-3 has-text-dark p-2">
                                         <p class="is-size-7 has-text-dark">Users</p>
                                         {{if $Stats}}
                                             {{$Stats.Users}}

web/templates/forum/newest.html

@@ -1,7 +1,7 @@
 {{define "title"}}Newest Posts - Forums{{end}}
 {{define "content"}}
 <div class="block">
-    <section class="hero is-light is-success">
+    <section class="hero is-link is-bold">
         <div class="hero-body">
             <h1 class="title">
                 <span class="icon mr-4"><i class="fa fa-comments"></i></span>
@@ -91,7 +91,7 @@
 <div class="p-4">
     {{range .RecentPosts}}
     {{$User := .Thread.Comment.User}}
-    <div class="card block has-background-link-light">
+    <div class="card block nonshy-forum-box-1">
         <div class="card-content">
             <div class="columns">
                 <div class="column is-narrow has-text-centered pt-0 pb-1">

web/templates/forum/search.html

@@ -1,7 +1,7 @@
 {{define "title"}}Newest Posts - Forums{{end}}
 {{define "content"}}
 <div class="block">
-    <section class="hero is-light is-success">
+    <section class="hero is-link is-bold">
         <div class="hero-body">
             <h1 class="title">
                 <span class="icon mr-4"><i class="fa fa-comments"></i></span>

web/templates/forum/thread.html

@@ -1,7 +1,7 @@
 {{define "title"}}{{.Thread.Title}} - {{.Forum.Title}}{{end}}
 {{define "content"}}
 <div class="block">
-    <section class="hero is-light is-success">
+    <section class="hero is-link is-bold">
         <div class="hero-body">
             <div class="container">
                 <div class="level">
@@ -130,7 +130,7 @@
 {{$Root := .}}
 <div class="block p-2">
 {{range $i, $c := .Comments}}
-    <div class="box has-background-link-light has-text-dark" id="p{{.ID}}">
+    <div class="box nonshy-forum-box-1 has-text-dark" id="p{{.ID}}">
         <div class="columns">
             <div class="column is-2 has-text-centered">
                 <!-- Thread starter is blocked? -->

web/templates/photo/permalink.html

@@ -277,7 +277,7 @@
                 </p>
                 {{else}}
                     {{range .Comments}}
-                        <div class="box has-background-link-light has-text-dark" id="p{{.ID}}">
+                        <div class="box nonshy-forum-box-1 has-text-dark" id="p{{.ID}}">
                             <div class="columns">
                                 <div class="column is-2 has-text-centered">
                                     <!-- User has no display name distinct from their username? -->