From d8593d89c0649504269730e300fddf0495c591b6 Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Sun, 24 Nov 2024 13:22:28 -0800 Subject: [PATCH] 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 | 68 ++-- pkg/controller/account/settings.go | 4 +- pkg/utility/enum.go | 14 + web/static/css/dark-theme.css | 16 + web/static/css/theme-blue-dark.css | 15 + web/static/css/theme-blue-pink-dark.css | 15 + web/static/css/theme-blue-pink.css | 17 + web/static/css/theme-blue.css | 17 + web/static/css/theme-green-dark.css | 15 + web/static/css/theme-green.css | 19 +- web/static/css/theme-orange-dark.css | 15 + web/static/css/theme-orange.css | 23 ++ web/static/css/theme-pink-dark.css | 15 + web/static/css/theme-pink.css | 16 + web/static/css/theme-purple-dark.css | 15 + web/static/css/theme-purple.css | 17 + web/static/css/theme-red-dark.css | 15 + web/static/css/theme-red.css | 17 + web/static/css/theme-yellow-dark.css | 15 + web/static/css/theme-yellow.css | 25 ++ web/static/css/theme.css | 17 + web/templates/account/settings.html | 503 +++++++++++++----------- web/templates/base.html | 17 +- web/templates/chat.html | 2 +- web/templates/forum/board_index.html | 8 +- web/templates/forum/index.html | 12 +- web/templates/forum/newest.html | 4 +- web/templates/forum/search.html | 2 +- web/templates/forum/thread.html | 4 +- web/templates/photo/permalink.html | 2 +- 30 files changed, 656 insertions(+), 288 deletions(-) create mode 100644 web/static/css/theme-blue-dark.css create mode 100644 web/static/css/theme-blue-pink-dark.css create mode 100644 web/static/css/theme-green-dark.css create mode 100644 web/static/css/theme-orange-dark.css create mode 100644 web/static/css/theme-orange.css create mode 100644 web/static/css/theme-pink-dark.css create mode 100644 web/static/css/theme-purple-dark.css create mode 100644 web/static/css/theme-red-dark.css create mode 100644 web/static/css/theme-yellow-dark.css create mode 100644 web/static/css/theme-yellow.css diff --git a/pkg/config/enum.go b/pkg/config/enum.go index 06ae4cc..44d0445 100644 --- a/pkg/config/enum.go +++ b/pkg/config/enum.go @@ -83,34 +83,52 @@ var ( } // Website theme color hue choices. - WebsiteThemeHueChoices = []Option{ + WebsiteThemeHueChoices = []OptGroup{ { - Label: "Default (no added color; classic nonshy theme)", - Value: "", + Header: "Custom Themes", + Options: []Option{ + { + Label: "Default (no added color; classic nonshy theme)", + Value: "", + }, + { + Label: "nonshy blue & pink", + Value: "blue-pink", + }, + }, }, { - 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", + 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", + }, + { + Label: "Royal purple", + Value: "purple", + }, + }, }, } diff --git a/pkg/controller/account/settings.go b/pkg/controller/account/settings.go index 39c2a69..9687953 100644 --- a/pkg/controller/account/settings.go +++ b/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, "", diff --git a/pkg/utility/enum.go b/pkg/utility/enum.go index 35c56e2..44d1b70 100644 --- a/pkg/utility/enum.go +++ b/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 +} diff --git a/web/static/css/dark-theme.css b/web/static/css/dark-theme.css index 3330247..6646972 100644 --- a/web/static/css/dark-theme.css +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-blue-dark.css b/web/static/css/theme-blue-dark.css new file mode 100644 index 0000000..0422854 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-blue-pink-dark.css b/web/static/css/theme-blue-pink-dark.css new file mode 100644 index 0000000..354226f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-blue-pink.css b/web/static/css/theme-blue-pink.css index 84d9a1f..9907d6d 100644 --- a/web/static/css/theme-blue-pink.css +++ b/web/static/css/theme-blue-pink.css @@ -5,4 +5,21 @@ --bulma-link-l: 50%; --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; } \ No newline at end of file diff --git a/web/static/css/theme-blue.css b/web/static/css/theme-blue.css index a0921d8..df1e669 100644 --- a/web/static/css/theme-blue.css +++ b/web/static/css/theme-blue.css @@ -4,4 +4,21 @@ --bulma-link-h: 200deg; --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; } \ No newline at end of file diff --git a/web/static/css/theme-green-dark.css b/web/static/css/theme-green-dark.css new file mode 100644 index 0000000..5fdc104 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-green.css b/web/static/css/theme-green.css index f4467b7..e9c91ce 100644 --- a/web/static/css/theme-green.css +++ b/web/static/css/theme-green.css @@ -4,4 +4,21 @@ --bulma-link-l: 18%; --bulma-scheme-h: 95; --bulma-link-text: #009900; - } \ No newline at end of file +} + +/* + * 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; +} \ No newline at end of file diff --git a/web/static/css/theme-orange-dark.css b/web/static/css/theme-orange-dark.css new file mode 100644 index 0000000..a757123 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-orange.css b/web/static/css/theme-orange.css new file mode 100644 index 0000000..0c92985 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-pink-dark.css b/web/static/css/theme-pink-dark.css new file mode 100644 index 0000000..354226f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-pink.css b/web/static/css/theme-pink.css index 7b8f09f..46a8a45 100644 --- a/web/static/css/theme-pink.css +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-purple-dark.css b/web/static/css/theme-purple-dark.css new file mode 100644 index 0000000..3b9f69b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-purple.css b/web/static/css/theme-purple.css index fca8665..5b4b5db 100644 --- a/web/static/css/theme-purple.css +++ b/web/static/css/theme-purple.css @@ -5,4 +5,21 @@ --bulma-link-l: 45%; --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; } \ No newline at end of file diff --git a/web/static/css/theme-red-dark.css b/web/static/css/theme-red-dark.css new file mode 100644 index 0000000..cc24fb2 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-red.css b/web/static/css/theme-red.css index bb3d85f..b2cb2f9 100644 --- a/web/static/css/theme-red.css +++ b/web/static/css/theme-red.css @@ -4,4 +4,21 @@ --bulma-link-h: 12deg; --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; } \ No newline at end of file diff --git a/web/static/css/theme-yellow-dark.css b/web/static/css/theme-yellow-dark.css new file mode 100644 index 0000000..7d442f0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme-yellow.css b/web/static/css/theme-yellow.css new file mode 100644 index 0000000..9e521c0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/static/css/theme.css b/web/static/css/theme.css index 3883965..4a5af74 100644 --- a/web/static/css/theme.css +++ b/web/static/css/theme.css @@ -250,4 +250,21 @@ nav.navbar { position: absolute; 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; } \ No newline at end of file diff --git a/web/templates/account/settings.html b/web/templates/account/settings.html index c28b6ed..b500f03 100644 --- a/web/templates/account/settings.html +++ b/web/templates/account/settings.html @@ -14,7 +14,7 @@
-
+

Settings Menu @@ -344,268 +344,295 @@

-
-
-

- - Look & Feel -

-
+
+
+ {{InputCSRF}} + -
- - - {{InputCSRF}} - -

- 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. -

- - -

Website Theme New!

- -
- -
-
- -
-
- -

- 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! +

+
+

+ + Website Theme

-
+ -
- -
- +
+ +

+ 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. +

+ +

Light or Dark Mode

+ +
+
-

- 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. +

+ +
+
+ +

+ 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. +

+
+ +
+ +
+ +
+

+ 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. +

+
+ +
+ +
+
+
+ +
+
+

+ + My Profile Page Look & Feel

-
+ -
+
- -

Profile Header

+

+ 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. +

-
- -
+ +

Profile Header

- -