186 lines
5.1 KiB
TypeScript
Raw Normal View History

2019-11-18 02:04:13 +00:00
import hexToHSL from "scripts/Utils/hexToHSL"
2018-04-02 05:34:16 +00:00
import AnimeNotifier from "../AnimeNotifier"
2017-11-16 13:57:49 +00:00
2018-04-23 14:51:11 +00:00
let currentThemeName = "light"
let previewTimeoutID: number = 0
2018-11-16 07:46:56 +00:00
// let themeWheel: HTMLElement
// let themeWheelTimeoutID: number = 0
2018-04-23 14:51:11 +00:00
const themes = {
2019-11-18 02:04:13 +00:00
light: {},
dark: {
2018-04-23 14:51:11 +00:00
"link-color-h": "45",
"link-color-s": "100%",
"link-color-l": "66%",
"text-color-l": "90%",
"bg-color-l": "18%",
"bg-color-s": "0%",
"ui-background-l": "14%",
"reverse-light-color": "rgba(255, 255, 255, 0.1)",
"reverse-light-hover-color": "rgba(255, 255, 255, 0.2)",
"sidebar-background": "hsla(0, 0%, 0%, 0.2)",
"sidebar-opaque-background": "hsl(0, 0%, 18%)",
"table-row-hover-background": "hsla(0, 0%, 100%, 0.01)",
"theme-white": "var(--bg-color)",
"theme-black": "var(--text-color)",
"link-active-color": "var(--link-hover-color)",
"button-hover-color": "var(--link-hover-color)",
"button-hover-background": "hsl(var(--bg-color-h), var(--bg-color-s), 10%)",
"tab-background": "hsla(0, 0%, 0%, 0.1)",
"tab-hover-background": "hsla(0, 0%, 0%, 0.2)",
"tab-active-color": "hsl(0, 0%, 95%)",
"tab-active-background": "hsla(0, 0%, 2%, 0.5)",
"loading-anim-color": "var(--link-color)",
"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%)",
2018-11-24 06:59:30 +00:00
"ui-disabled-color": "hsla(0, 0%, 100%, 0.1)",
2018-04-23 14:51:11 +00:00
// "tip-bg-color": "hsl(var(--bg-color-h), var(--bg-color-s), 10%)",
2018-11-15 03:42:10 +00:00
"like-color": "var(--link-color)",
"unlike-color": "var(--link-color)",
"permalink-color": "var(--link-color)",
2018-04-23 14:51:11 +00:00
"quote-color": "var(--text-color)",
"calendar-hover-color": "var(--reverse-light-color)"
2017-11-16 14:15:35 +00:00
}
2018-04-23 14:51:11 +00:00
// "crimson": {
// "base-theme": "dark",
// "link-color-h": "0",
// "link-color-l": "78%",
// "bg-color-s": "70%"
// },
// "sakura": {
// "base-theme": "light",
// "link-color-h": "348",
// "link-color-s": "100%",
// "link-color-l": "53%",
// "bg-color-h": "348",
// "bg-color-s": "100%",
// "bg-color-l": "86%",
// "ui-background-l": "91%",
// "tab-active-color": "var(--text-color)",
// "tab-active-background": "hsla(0, 0%, 98%, 0.25)",
// "button-hover-background": "hsl(var(--bg-color-h), var(--bg-color-s), 53%)"
// }
2017-11-16 14:15:35 +00:00
}
2018-04-23 14:51:11 +00:00
// Next theme
export function nextTheme(arn: AnimeNotifier) {
// if(!themeWheel) {
// themeWheel = document.createElement("div")
// themeWheel.classList.add("theme-wheel")
// themeWheel.classList.add("fade")
// themeWheel.classList.add("fade-out")
// document.body.appendChild(themeWheel)
// }
// // Show theme wheel
// themeWheel.classList.remove("fade-out")
// // Clear theme wheel timeout
// clearTimeout(themeWheelTimeoutID)
// themeWheelTimeoutID = setTimeout(() => {
// // Hide theme wheel
// themeWheel.classList.add("fade-out")
// }, 2000)
// Sort themes by name
const themesSorted = [
"light",
"dark"
// "crimson",
// "sakura"
]
// Find current index and apply theme of next index
for(let i = 0; i < themesSorted.length; i++) {
if(themesSorted[i] === currentThemeName) {
2019-11-17 09:25:14 +00:00
const newIndex = (i + 1) % themesSorted.length
2018-11-23 07:05:48 +00:00
applyThemeAndPreview(arn, themesSorted[newIndex])
2018-04-23 14:51:11 +00:00
break
2017-11-16 13:57:49 +00:00
}
}
2018-11-23 07:05:48 +00:00
}
// Apply theme and check for PRO accounts
export function applyThemeAndPreview(arn: AnimeNotifier, themeName: string) {
applyTheme(themeName)
2017-11-16 14:15:35 +00:00
2018-04-23 14:51:11 +00:00
// Clear preview timeout
clearTimeout(previewTimeoutID)
2017-11-16 13:57:49 +00:00
2018-11-23 07:05:48 +00:00
// If it's the free light theme or a PRO user, nothing to do here
2019-11-18 02:04:13 +00:00
if(currentThemeName === "light" || (arn.user && arn.user.IsPro())) {
2018-11-23 07:05:48 +00:00
return
}
2018-11-23 07:05:48 +00:00
// Show preview message
arn.statusMessage.showInfo(`Previewing "${currentThemeName}" theme for 30 seconds. If you would like to use it permanently, please support us.`, 5000)
// After 30 seconds, switch back to default theme if the user doesn't own a PRO account
previewTimeoutID = setTimeout(() => {
if(currentThemeName !== "light") {
applyTheme("light")
arn.statusMessage.showInfo("Theme preview time has ended. If you would like to use it permanently, please support us.", 5000)
}
}, 30000)
2018-04-23 14:51:11 +00:00
}
// Apply theme
export function applyTheme(themeName: string) {
2019-11-17 09:25:14 +00:00
const rootStyle = document.documentElement.style
const theme = themes[themeName]
2018-04-23 14:51:11 +00:00
// Apply base theme
if(theme["base-theme"]) {
applyTheme(theme["base-theme"])
}
2019-11-17 09:25:14 +00:00
for(const property in theme) {
2018-04-23 14:51:11 +00:00
if(!theme.hasOwnProperty(property)) {
continue
}
2018-03-13 15:45:40 +00:00
2018-04-23 14:51:11 +00:00
if(property === "base-theme") {
2017-11-16 13:57:49 +00:00
continue
}
2018-04-23 14:51:11 +00:00
if(themes.light[property] === undefined) {
2018-11-23 10:11:46 +00:00
themes.light[property] = rootStyle.getPropertyValue(`--${property}`)
2017-11-16 14:15:35 +00:00
}
2018-11-23 10:11:46 +00:00
rootStyle.setProperty(`--${property}`, theme[property])
2017-11-16 13:57:49 +00:00
}
2017-11-16 14:15:35 +00:00
2018-04-23 14:51:11 +00:00
currentThemeName = themeName
2018-11-23 10:11:46 +00:00
}
// Color picker
2019-04-22 09:06:50 +00:00
export function pickColor(_: AnimeNotifier, element: HTMLElement) {
2019-11-17 09:25:14 +00:00
const rootStyle = document.documentElement.style
const variableName = `--${element.dataset.variable}`
const input = document.createElement("input")
2018-11-23 10:11:46 +00:00
input.type = "color"
2018-11-23 10:12:07 +00:00
2018-11-23 10:11:46 +00:00
input.oninput = () => {
2019-11-17 09:25:14 +00:00
const color = hexToHSL(input.value)
2019-06-18 08:47:01 +00:00
if(!color) {
return
}
rootStyle.setProperty(variableName+"-h", (color.h * 360).toString())
rootStyle.setProperty(variableName+"-s", (color.s * 100).toString() + "%")
rootStyle.setProperty(variableName+"-l", (color.l * 100).toString() + "%")
2018-11-23 10:11:46 +00:00
}
2018-11-23 10:12:07 +00:00
input.click()
2018-11-23 10:11:46 +00:00
}