Added experimental theme color picker

scripts/Actions/Serialization.ts

@@ -41,6 +41,9 @@ export async function save(arn: AnimeNotifier, input: HTMLElement) {
 		} else if(apiEndpoint.startsWith("/api/settings/") && input.dataset.field === "Theme") {
 			// Apply theme instantly
 			applyTheme((input as HTMLInputElement).value)
+
+			// Reload to update theme settings
+			return arn.reloadContent()
 		} else {
 			return arn.reloadContent()
 		}

scripts/Actions/Theme.ts

@@ -39,6 +39,7 @@ const themes = {
 		"anime-alternative-title-color": "hsla(0, 0%, 100%, 0.5)",
 		"anime-list-item-name-color": "var(--text-color)",
 		"tip-bg-color": "hsl(0, 0%, 10%)",
+		"ui-disabled-color": "hsla(0, 0%, 100%, 0.1)"
 		// "tip-bg-color": "hsl(var(--bg-color-h), var(--bg-color-s), 10%)",
 
 		"like-color": "var(--link-color)",
@@ -137,7 +138,7 @@ export function applyThemeAndPreview(arn: AnimeNotifier, themeName: string) {
 
 // Apply theme
 export function applyTheme(themeName: string) {
-	let root = document.documentElement
+	let rootStyle = document.documentElement.style
 	let theme = themes[themeName]
 
 	// Apply base theme
@@ -155,11 +156,24 @@ export function applyTheme(themeName: string) {
 		}
 
 		if(themes.light[property] === undefined) {
-			themes.light[property] = root.style.getPropertyValue(`--${property}`)
+			themes.light[property] = rootStyle.getPropertyValue(`--${property}`)
 		}
 
-		root.style.setProperty(`--${property}`, theme[property])
+		rootStyle.setProperty(`--${property}`, theme[property])
 	}
 
 	currentThemeName = themeName
-}
+}
+
+// Color picker
+export function pickColor(arn: AnimeNotifier, element: HTMLElement) {
+	let rootStyle = document.documentElement.style
+	let variableName = `--${element.dataset.variable}`
+
+	let input = document.createElement("input")
+	input.type = "color"
+	input.click()
+	input.oninput = () => {
+		rootStyle.setProperty(variableName, input.value)
+	}
+}

scripts/AnimeNotifier.ts

@@ -164,7 +164,7 @@ export default class AnimeNotifier {
 			Promise.resolve().then(() => this.assignActions()),
 			Promise.resolve().then(() => this.updatePushUI()),
 			Promise.resolve().then(() => this.dragAndDrop()),
-			Promise.resolve().then(() => this.colorStripes()),
+			Promise.resolve().then(() => this.colorBoxes()),
 			Promise.resolve().then(() => this.loadCharacterRanking()),
 			Promise.resolve().then(() => this.assignTooltipOffsets()),
 			Promise.resolve().then(() => this.countUp())
@@ -597,12 +597,12 @@ export default class AnimeNotifier {
 		}
 	}
 
-	colorStripes() {
-		if(!this.app.currentPath.includes("/explore/color/")) {
+	colorBoxes() {
+		if(!this.app.currentPath.includes("/explore/color/") && !this.app.currentPath.includes("/settings")) {
 			return
 		}
 
-		for(let element of findAll("color-stripe")) {
+		for(let element of findAll("color-box")) {
 			Diff.mutations.queue(() => {
 				element.style.backgroundColor = element.dataset.color
 			})