Added experimental theme color picker

mixins/Input.pixy

@@ -5,7 +5,7 @@ component InputText(id string, value string, label string, placeholder string)
 
 component InputBool(id string, value bool, label string, title string)
 	.widget-section
-		label(for=id)= label + ":"
+		label= label + ":"
 		if value
 			button.action(id=id, data-action="disable", data-trigger="click", data-field=id, title=title)
 				Icon("toggle-on")
@@ -45,7 +45,7 @@ component InputSelection(id string, value string, label string, placeholder stri
 
 component InputFileUpload(id string, label string, uploadType string, endpoint string)
 	.widget-section
-		label(for=id)= label + ":"
+		label= label + ":"
 		button.action(id=id, data-action="selectFile", data-trigger="click", data-endpoint=endpoint, data-type=uploadType)
 			Icon("upload")
 			span Select file

pages/explore/explorecolor/explorecolor.pixy

@@ -4,7 +4,7 @@ component ExploreColor(animes []*arn.Anime, nextIndex int, totalCount int, color
 	for saturation := 0.75; saturation >= 0.25; saturation -= 0.25
 		.tabs.color-stripes
 			for hue := 0.0; hue < 1.0; hue += 0.05
-				a.tab.color-stripe.action(href=fmt.Sprintf("/explore/color/hsl:%.3f,%.2f,0.5/anime", hue, saturation), data-action="diff", data-trigger="click", data-color=fmt.Sprintf("hsl(%.0f, %.0f%%, 50%%)", hue * 360, saturation * 100))
+				a.tab.color-stripe.color-box.action(href=fmt.Sprintf("/explore/color/hsl:%.3f,%.2f,0.5/anime", hue, saturation), data-action="diff", data-trigger="click", data-color=fmt.Sprintf("hsl(%.0f, %.0f%%, 50%%)", hue * 360, saturation * 100))
 
 	.explore-anime
 		if totalCount == 0

pages/settings/style.pixy

@@ -23,4 +23,28 @@ component SettingsStyle(user *arn.User)
 					option(value="romaji") Romaji
 					option(value="japanese") 日本語
 
-			InputNumber("Format.RatingsPrecision", float64(user.Settings().Format.RatingsPrecision), "Ratings precision", "How many decimals after the comma would you like to display in ratings on anime pages?", "0", "2", "1")
+			InputNumber("Format.RatingsPrecision", float64(user.Settings().Format.RatingsPrecision), "Ratings precision", "How many decimals after the comma would you like to display in ratings on anime pages?", "0", "2", "1")
+		
+		if arn.IsDevelopment()
+			.widget.mountable(data-api="/api/settings/" + user.ID)
+				h3.widget-title
+					Icon("paint-brush")
+					span= stringutils.Capitalize(user.Settings().Theme)
+				
+				.widget-section
+					label(for="LinkColor")= "Link color:"
+
+					.color-picker-container
+						.widget-ui-element.color-picker.color-box.action(data-color="var(--link-color)", data-variable="link-color", data-action="pickColor", data-trigger="click")
+
+						button.tip(aria-label="Reset", disabled)
+							RawIcon("power-off")
+
+				.widget-section
+					label(for="BackgroundColor")= "Background color:"
+
+					.color-picker-container
+						.widget-ui-element.color-picker.color-box.action(data-color="var(--bg-color)", data-variable="bg-color", data-action="pickColor", data-trigger="click")
+
+						button.tip(aria-label="Reset", disabled)
+							RawIcon("power-off")

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
 			})

styles/input.scarlet

@@ -45,6 +45,21 @@ input
 	:active
 		transform translateY(3px)
 
+.color-picker-container
+	horizontal
+
+.color-picker
+	ui-element
+	flex 1
+	height input-height
+	margin-right content-padding-half
+
+	:hover
+		cursor pointer
+
+	:active
+		transform translateY(3px)
+
 button, .button
 	horizontal
 	padding 0rem 1rem
@@ -55,6 +70,9 @@ button, .button
 
 	button-hover
 
+	:disabled
+		ui-disabled
+
 select
 	appearance none
 	-webkit-appearance none

styles/mixins/ui.scarlet

@@ -9,5 +9,6 @@ mixin ui-element
 		// box-shadow outline-shadow-medium
 
 mixin ui-disabled
-	background-color ui-disabled-color
-	cursor not-allowed
+	color button-color !important
+	background-color ui-disabled-color !important
+	cursor not-allowed !important