Added theme setting

layout/layout.pixy

@@ -28,7 +28,7 @@ component Layout(app *aero.Application, ctx *aero.Context, user *arn.User, openG
 				LoadingAnimation
 				StatusMessage
 			if user != nil
-				#user(data-id=user.ID)
+				#user(data-id=user.ID, data-theme=user.Settings().Theme)
 			script(src="/scripts")
 
 component Content(content string)

pages/settings/settings.pixy

@@ -120,6 +120,12 @@ component SettingsFormatting(user *arn.User)
 			h3.widget-title
 				Icon("font")
 				span Formatting
+
+			.widget-section
+				label(for="Theme")= "Theme:"
+				select.widget-ui-element.action(id="Theme", data-field="Theme", value=user.Settings().Theme, title="Language of anime titles", data-action="save", data-trigger="change")
+					option(value="light") Light
+					option(value="dark") Dark
 			
 			.widget-section
 				label(for="TitleLanguage")= "Title language:"

patches/add-shop-items/add-shop-items.go

@@ -14,6 +14,7 @@ var items = []*arn.Item{
 Includes:
 
 * Chrome extension for quick list access
+* Dark theme for the site (persistent)
 * Special highlight on the forums
 * Access to the VIP channel on Discord
 * PRO star on your profile
@@ -35,6 +36,7 @@ Includes:
 Includes:
 
 * Chrome extension for quick list access
+* Dark theme for the site (persistent)
 * Special highlight on the forums
 * Access to the VIP channel on Discord
 * PRO star on your profile
@@ -56,6 +58,7 @@ Includes:
 Includes:
 
 * Chrome extension for quick list access
+* Dark theme for the site (persistent)
 * Special highlight on the forums
 * Access to the VIP channel on Discord
 * PRO star on your profile
@@ -77,6 +80,7 @@ Includes:
 Includes:
 
 * Chrome extension for quick list access
+* Dark theme for the site (persistent)
 * Special highlight on the forums
 * Access to the VIP channel on Discord
 * PRO star on your profile

patches/add-theme/add-theme.go

@@ -0,0 +1,21 @@
+package main
+
+import (
+	"github.com/animenotifier/arn"
+)
+
+func main() {
+	defer arn.Node.Close()
+
+	for user := range arn.StreamUsers() {
+		settings := user.Settings()
+
+		if user.IsPro() {
+			settings.Theme = "dark"
+		} else {
+			settings.Theme = "light"
+		}
+
+		settings.Save()
+	}
+}

scripts/AnimeNotifier.ts

@@ -11,6 +11,7 @@ import { ServiceWorkerManager } from "./ServiceWorkerManager"
 import { displayAiringDate, displayDate } from "./DateView"
 import { findAll, delay, canUseWebP, swapElements } from "./Utils"
 import * as actions from "./Actions"
+import { darkTheme } from "./Actions";
 
 export class AnimeNotifier {
 	app: Application
@@ -115,6 +116,11 @@ export class AnimeNotifier {
 		this.app.content = this.app.find("content")
 		this.app.loading = this.app.find("loading")
 
+		// Theme
+		if(this.user.dataset.theme !== "light") {
+			darkTheme()
+		}
+
 		// Status message
 		this.statusMessage = new StatusMessage(
 			this.app.find("status-message"),