From 90662cd66dbab8f37ae96851fa6429e5d2b9cd50 Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Sun, 14 Nov 2021 22:41:08 +0100 Subject: [PATCH 01/10] first shot (in the dark) --- package.json | 2 +- src/js/main.js | 31 +++++++++---------------------- 2 files changed, 10 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 8644f70..49edad8 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,6 @@ "markdown-it": "^12.2.0", "markdown-it-attrs": "^4.1.0", "moment": "^2.29.1", - "node-vibrant": "3.1.4" + "colorthief": "^2.3.2" } } diff --git a/src/js/main.js b/src/js/main.js index 3e0e2d3..94d716f 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,4 +1,4 @@ -import * as Vibrant from "node-vibrant"; +import ColorThief from "colorthief"; import chroma from "chroma-js"; import $ from "jquery"; import moment from "moment"; @@ -15,6 +15,7 @@ const Dribbblish = { config: new ConfigMenu(), info: new Info() }; +const colorThief = new ColorThief(); // To expose to external scripts window.Dribbblish = Dribbblish; @@ -440,9 +441,7 @@ async function getAlbumRelease(uri) { } function isLight(hex) { - var [r, g, b] = chroma(hex).rgb().map(Number); - const brightness = (r * 299 + g * 587 + b * 114) / 1000; - return brightness > 128; + return chroma(hex).luminance() > 0.5; } // From: https://stackoverflow.com/a/13763063/12126879 @@ -472,7 +471,7 @@ function getImageLightness(img) { return brightness; } -// parse to hex beacuse "--spice-sidebar" is `rgb()` +// parse to hex because "--spice-sidebar" is `rgb()` let textColor = chroma($("html").css("--spice-text")).hex(); let textColorBg = chroma($("html").css("--spice-main")).hex(); let sidebarColor = chroma($("html").css("--spice-sidebar")).hex(); @@ -699,24 +698,12 @@ async function pickCoverColor(img) { $("html").css("--image-brightness", getImageLightness(img) / 255); - var swatches = await new Promise((resolve, reject) => new Vibrant(img, 5).getPalette().then(resolve).catch(reject)); - var lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"]; - var darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"]; + if (img.complete) { + textColor = sidebarColor = chroma(colorThief.getColor(img)).hex(); + } else { + textColor = sidebarColor = "#509bf5"; + } - var mainCols = isLight(textColorBg) ? lightCols : darkCols; - textColor = "#509bf5"; - for (var col in mainCols) - if (swatches[mainCols[col]]) { - textColor = swatches[mainCols[col]].getHex(); - break; - } - - sidebarColor = "#509bf5"; - for (var col in lightCols) - if (swatches[lightCols[col]]) { - sidebarColor = swatches[lightCols[col]].getHex(); - break; - } updateColors(textColor, sidebarColor); } From dfc2c799219fcdcd6ca6ef256f987d3210511cdf Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Mon, 15 Nov 2021 21:22:18 +0100 Subject: [PATCH 02/10] IMP: increase luminance of text --- src/js/main.js | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index 94d716f..604f56f 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -472,7 +472,6 @@ function getImageLightness(img) { } // parse to hex because "--spice-sidebar" is `rgb()` -let textColor = chroma($("html").css("--spice-text")).hex(); let textColorBg = chroma($("html").css("--spice-main")).hex(); let sidebarColor = chroma($("html").css("--spice-sidebar")).hex(); @@ -493,7 +492,7 @@ function toggleDark(setDark) { setRootColor("subtext", setDark ? "#EAEAEA" : "#3D3D3D"); setRootColor("notification", setDark ? "#303030" : "#DDDDDD"); - updateColors(textColor, sidebarColor, false); + updateColors(sidebarColor, false); } function checkDarkLightMode(colors) { @@ -588,27 +587,27 @@ Dribbblish.config.register({ ] }); -var currentColor; var currentSideColor; -function updateColors(textColHex, sideColHex, checkDarkMode = true) { - if (textColHex && sideColHex) { - currentColor = textColHex; +function updateColors(sideColHex, checkDarkMode = true) { + if (sideColHex) { currentSideColor = sideColHex; } else { - if (!(currentColor && currentSideColor)) return; // If `updateColors()` is called early these vars are undefined and would break - textColHex = currentColor; + if (!currentSideColor) return; // If `updateColors()` is called early these vars are undefined and would break sideColHex = currentSideColor; } if (!Dribbblish.config.get("dynamicColors")) { - const col = Dribbblish.config.get("colorOverride"); - textColHex = col; - sideColHex = col; + sideColHex = Dribbblish.config.get("colorOverride"); } let isLightBg = isLight(textColorBg); - if (isLightBg) textColHex = chroma(textColHex).darken(0.15).hex(); // vibrant color is always too bright for white bg mode + let textColHex = sideColHex; + if (isLightBg && chroma(textColHex).luminance() > 0.2) { + textColHex = chroma(textColHex).luminance(0.2).hex(); + } else if (!isLightBg && chroma(textColHex).luminance() < 0.1) { + textColHex = chroma(textColHex).luminance(0.1).hex(); + } let darkColHex = chroma(textColHex) .brighten(isLightBg ? 0.12 : -0.2) @@ -654,8 +653,7 @@ async function songchange() { let bgImage = Spicetify.Player.data.track.metadata.image_url; if (bgImage === undefined) { bgImage = "/images/tracklist-row-song-fallback.svg"; - textColor = "#509bf5"; - updateColors(textColor, textColor); + updateColors("#509bf5"); } if (album_uri !== undefined && !album_uri.includes("spotify:show")) { @@ -699,12 +697,12 @@ async function pickCoverColor(img) { $("html").css("--image-brightness", getImageLightness(img) / 255); if (img.complete) { - textColor = sidebarColor = chroma(colorThief.getColor(img)).hex(); + sidebarColor = chroma(colorThief.getColor(img)).hex(); } else { - textColor = sidebarColor = "#509bf5"; + sidebarColor = "#509bf5"; } - updateColors(textColor, sidebarColor); + updateColors(sidebarColor); } var coverListener; From b610a0dd8b11a953417a8a6c2570a87b6ce347bd Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Tue, 16 Nov 2021 18:45:47 +0100 Subject: [PATCH 03/10] IMP: try to avoid black/white colors extracted from cover --- src/js/main.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index 604f56f..a20bf4e 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -696,12 +696,20 @@ async function pickCoverColor(img) { $("html").css("--image-brightness", getImageLightness(img) / 255); + sidebarColor = "#509bf5"; if (img.complete) { - sidebarColor = chroma(colorThief.getColor(img)).hex(); - } else { - sidebarColor = "#509bf5"; + const dominant = colorThief.getColor(img); + let palette = colorThief.getPalette(img); + palette.unshift(dominant); + sidebarColor = chroma(dominant).hex(); + for (const col of palette) { + const chrmCol = chroma(col); + if (chrmCol.luminance() > 0.05 && chrmCol.luminance() < 0.9) { + sidebarColor = chrmCol.hex(); + break; + } + } } - updateColors(sidebarColor); } From fd01cc02ce53e9c8b8d86cabdd84d0c79da6b0ba Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Tue, 16 Nov 2021 22:15:46 +0100 Subject: [PATCH 04/10] changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a32e6f..12e531a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,4 +13,5 @@ Improved: - Checkbox / Switch input styles are now more in line with other input styles - Available updates are now shown as a clickable button next to your user icon instead of having to open the user menu - The "offline" icon is now handled by dribbblish and fits in with the other info icons -- Hovering over the release date in the album info now shows the full date \ No newline at end of file +- Hovering over the release date in the album info now shows the full date +- Better color extraction from the cover image \ No newline at end of file From 784947e3a507debc81757412fed9ca1e3c8c3564 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Wed, 17 Nov 2021 03:40:09 +0100 Subject: [PATCH 05/10] add option to select color extraction method --- src/js/Util.js | 4 ++ src/js/main.js | 103 +++++++++++++++++++++++++++++-------------------- 2 files changed, 66 insertions(+), 41 deletions(-) diff --git a/src/js/Util.js b/src/js/Util.js index 5d8a6cf..248a6f5 100644 --- a/src/js/Util.js +++ b/src/js/Util.js @@ -33,3 +33,7 @@ export function copyToClipboard(text) { export function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } + +export function getClosestToNum(arr, num) { + return arr.reduce((prev, curr) => (Math.abs(curr - num) < Math.abs(prev - num) ? curr : prev)); +} diff --git a/src/js/main.js b/src/js/main.js index a20bf4e..3154934 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -3,7 +3,7 @@ import chroma from "chroma-js"; import $ from "jquery"; import moment from "moment"; -import { waitForElement, copyToClipboard, capitalizeFirstLetter } from "./Util"; +import { waitForElement, copyToClipboard, capitalizeFirstLetter, getClosestToNum } from "./Util"; import ConfigMenu from "./ConfigMenu"; import Info from "./Info"; @@ -492,10 +492,10 @@ function toggleDark(setDark) { setRootColor("subtext", setDark ? "#EAEAEA" : "#3D3D3D"); setRootColor("notification", setDark ? "#303030" : "#DDDDDD"); - updateColors(sidebarColor, false); + updateColors(false); } -function checkDarkLightMode(colors) { +function checkDarkLightMode() { const theme = Dribbblish.config.get("theme"); if (theme == "time") { const start = 60 * parseInt(Dribbblish.config.get("darkModeOnTime").split(":")[0]) + parseInt(Dribbblish.config.get("darkModeOnTime").split(":")[1]); @@ -508,23 +508,53 @@ function checkDarkLightMode(colors) { if (end < start) dark = start <= time || time < end; else dark = start <= time && time < end; toggleDark(dark); - } else if (theme == "color") { - if (colors && colors.length > 0) toggleDark(isLight(colors[0])); } } + // Run every Minute to check time and set dark / light mode setInterval(checkDarkLightMode, 60000); Dribbblish.config.register({ area: "Theme", - type: "checkbox", - key: "dynamicColors", - name: "Dynamic", - description: "If the Theme's Color should be extracted from Albumart", - defaultValue: true, - onChange: (val) => updateColors(), - showChildren: (val) => !val, + type: "select", + key: "colorSelectionMode", + name: "Color Selection Mode", + description: "Method of selecting colors from the albumart", + data: { dynamic: "Dynamic", dynamicLuminance: "Dynamic (Luminance)", static: "Static" }, + defaultValue: "dynamic", + onChange: () => updateColors(), + showChildren: (val) => { + if (val == "dynamicLuminance") return ["lightModeLuminance", "darkModeLuminance"]; + if (val == "static") return ["colorOverride"]; + return false; + }, children: [ + { + type: "number", + key: "lightModeLuminance", + name: "Desired Light Mode Luminance", + description: ` + Set desired luminance in light mode. + *the selected color will be the one who's luminance is closest to the desired luminance*{.muted} + `, + defaultValue: 0.6, + data: { min: 0, max: 1, step: 0.05 }, + fireInitialChange: false, + onChange: () => updateColors() + }, + { + type: "number", + key: "darkModeLuminance", + name: "Desired Dark Mode Luminance", + description: ` + Set desired luminance in dark mode. + *the selected color will be the one who's luminance is closest to the desired luminance*{.muted} + `, + defaultValue: 0.2, + data: { min: 0, max: 1, step: 0.05 }, + fireInitialChange: false, + onChange: () => updateColors() + }, { type: "color", key: "colorOverride", @@ -532,7 +562,7 @@ Dribbblish.config.register({ description: "The Color of the Theme", defaultValue: "#1ed760", fireInitialChange: false, - onChange: (val) => updateColors() + onChange: () => updateColors() } ] }); @@ -540,7 +570,7 @@ Dribbblish.config.register({ Dribbblish.config.register({ area: "Theme", type: "select", - data: { dark: "Dark", light: "Light", time: "Based on Time", color: "Based on Color" }, + data: { dark: "Dark", light: "Light", time: "Based on Time" }, key: "theme", name: "Theme", description: "Select Dark / Bright mode", @@ -560,9 +590,6 @@ Dribbblish.config.register({ case "time": checkDarkLightMode(); break; - case "color": - checkDarkLightMode(); - break; } }, children: [ @@ -587,19 +614,8 @@ Dribbblish.config.register({ ] }); -var currentSideColor; - -function updateColors(sideColHex, checkDarkMode = true) { - if (sideColHex) { - currentSideColor = sideColHex; - } else { - if (!currentSideColor) return; // If `updateColors()` is called early these vars are undefined and would break - sideColHex = currentSideColor; - } - - if (!Dribbblish.config.get("dynamicColors")) { - sideColHex = Dribbblish.config.get("colorOverride"); - } +function updateColors(checkDarkMode = true, sideColHex) { + if (sideColHex == undefined) return registerCoverListener(); let isLightBg = isLight(textColorBg); let textColHex = sideColHex; @@ -653,7 +669,6 @@ async function songchange() { let bgImage = Spicetify.Player.data.track.metadata.image_url; if (bgImage === undefined) { bgImage = "/images/tracklist-row-song-fallback.svg"; - updateColors("#509bf5"); } if (album_uri !== undefined && !album_uri.includes("spotify:show")) { @@ -698,19 +713,25 @@ async function pickCoverColor(img) { sidebarColor = "#509bf5"; if (img.complete) { - const dominant = colorThief.getColor(img); - let palette = colorThief.getPalette(img); - palette.unshift(dominant); - sidebarColor = chroma(dominant).hex(); - for (const col of palette) { - const chrmCol = chroma(col); - if (chrmCol.luminance() > 0.05 && chrmCol.luminance() < 0.9) { - sidebarColor = chrmCol.hex(); - break; + const palette = Object.fromEntries([colorThief.getColor(img), ...colorThief.getPalette(img, 24, 5)].map((c) => chroma(c)).map((c) => [c.luminance(), c])); + const colorSelectionMode = Dribbblish.config.get("colorSelectionMode"); + if (colorSelectionMode == "dynamic") { + sidebarColor = Object.values(palette)[0]; + for (const col of Object.values(palette)) { + if (col.luminance() > 0.05 && col.luminance() < 0.9) { + sidebarColor = col.hex(); + break; + } } + } else if (colorSelectionMode == "dynamicLuminance") { + const wantedLuminance = $("html").css("--is_light") == "1" ? Dribbblish.config.get("lightModeLuminance") : Dribbblish.config.get("darkModeLuminance"); + sidebarColor = palette[getClosestToNum(Object.keys(palette), wantedLuminance)].hex(); + } else if (colorSelectionMode == "static") { + sidebarColor = Dribbblish.config.get("colorOverride"); } } - updateColors(sidebarColor); + + updateColors(false, sidebarColor); } var coverListener; From e1d393e2a00826b3f63a232fbb2e59b12f978f33 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Wed, 17 Nov 2021 20:22:53 +0100 Subject: [PATCH 06/10] Improve color settings UX and re-add vibrant as option --- package.json | 3 +- src/js/main.js | 126 ++++++++++++++++++++++++++++++++----------------- 2 files changed, 84 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index 49edad8..6313c79 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,11 @@ }, "dependencies": { "chroma-js": "^2.1.2", + "colorthief": "^2.3.2", "jquery": "^3.6.0", "markdown-it": "^12.2.0", "markdown-it-attrs": "^4.1.0", "moment": "^2.29.1", - "colorthief": "^2.3.2" + "node-vibrant": "^3.1.6" } } diff --git a/src/js/main.js b/src/js/main.js index 3154934..42f0881 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,3 +1,4 @@ +import * as Vibrant from "node-vibrant"; import ColorThief from "colorthief"; import chroma from "chroma-js"; import $ from "jquery"; @@ -473,7 +474,6 @@ function getImageLightness(img) { // parse to hex because "--spice-sidebar" is `rgb()` let textColorBg = chroma($("html").css("--spice-main")).hex(); -let sidebarColor = chroma($("html").css("--spice-sidebar")).hex(); function setRootColor(name, color) { $("html").css(`--spice-${name}`, chroma(color).hex()); @@ -517,44 +517,22 @@ setInterval(checkDarkLightMode, 60000); Dribbblish.config.register({ area: "Theme", type: "select", - key: "colorSelectionMode", - name: "Color Selection Mode", - description: "Method of selecting colors from the albumart", - data: { dynamic: "Dynamic", dynamicLuminance: "Dynamic (Luminance)", static: "Static" }, - defaultValue: "dynamic", + key: "colorSelectionAlgorithm", + name: "Color Selection Algorithm", + description: ` + Algorithm of selecting colors from the albumart + - **Colorthief:** Gets more fitting colors{.muted} + - **Vibrant:** Gets more vibrant colors (was the default up to v3.1.1){.muted} + - **Static:** Select a static color to be used{.muted} + `, + data: { colorthief: "Colorthief", vibrant: "Vibrant", static: "Static" }, + defaultValue: "colorthief", onChange: () => updateColors(), showChildren: (val) => { - if (val == "dynamicLuminance") return ["lightModeLuminance", "darkModeLuminance"]; if (val == "static") return ["colorOverride"]; - return false; + return ["colorSelectionMode"]; }, children: [ - { - type: "number", - key: "lightModeLuminance", - name: "Desired Light Mode Luminance", - description: ` - Set desired luminance in light mode. - *the selected color will be the one who's luminance is closest to the desired luminance*{.muted} - `, - defaultValue: 0.6, - data: { min: 0, max: 1, step: 0.05 }, - fireInitialChange: false, - onChange: () => updateColors() - }, - { - type: "number", - key: "darkModeLuminance", - name: "Desired Dark Mode Luminance", - description: ` - Set desired luminance in dark mode. - *the selected color will be the one who's luminance is closest to the desired luminance*{.muted} - `, - defaultValue: 0.2, - data: { min: 0, max: 1, step: 0.05 }, - fireInitialChange: false, - onChange: () => updateColors() - }, { type: "color", key: "colorOverride", @@ -563,6 +541,52 @@ Dribbblish.config.register({ defaultValue: "#1ed760", fireInitialChange: false, onChange: () => updateColors() + }, + { + area: "Theme", + type: "select", + key: "colorSelectionMode", + name: "Color Selection Mode", + description: ` + Method of selecting colors from the albumart + - **Default:** Choose closest matching{.muted} + - **Luminance:** Choose matching current theme (lighter/darker){.muted} + `, + data: { default: "Default", luminance: "Luminance" }, + defaultValue: "default", + onChange: () => updateColors(), + showChildren: (val) => { + if (val == "dynamicLuminance") return ["lightModeLuminance", "darkModeLuminance"]; + return false; + }, + children: [ + { + type: "number", + key: "lightModeLuminance", + name: "Desired Light Mode Luminance", + description: ` + Set desired luminance in light mode. + *the selected color will be the one who's luminance is closest to the desired luminance*{.muted} + `, + defaultValue: 0.6, + data: { min: 0, max: 1, step: 0.05 }, + fireInitialChange: false, + onChange: () => updateColors() + }, + { + type: "number", + key: "darkModeLuminance", + name: "Desired Dark Mode Luminance", + description: ` + Set desired luminance in dark mode. + *the selected color will be the one who's luminance is closest to the desired luminance*{.muted} + `, + defaultValue: 0.2, + data: { min: 0, max: 1, step: 0.05 }, + fireInitialChange: false, + onChange: () => updateColors() + } + ] } ] }); @@ -711,27 +735,41 @@ async function pickCoverColor(img) { $("html").css("--image-brightness", getImageLightness(img) / 255); - sidebarColor = "#509bf5"; + let color = "#509bf5"; if (img.complete) { - const palette = Object.fromEntries([colorThief.getColor(img), ...colorThief.getPalette(img, 24, 5)].map((c) => chroma(c)).map((c) => [c.luminance(), c])); + const colorSelectionAlgorithm = Dribbblish.config.get("colorSelectionAlgorithm"); const colorSelectionMode = Dribbblish.config.get("colorSelectionMode"); - if (colorSelectionMode == "dynamic") { - sidebarColor = Object.values(palette)[0]; + let palette = {}; + + if (colorSelectionAlgorithm == "colorthief") { + palette = Object.fromEntries([colorThief.getColor(img), ...colorThief.getPalette(img, 24, 5)].map((c) => chroma(c)).map((c) => [c.luminance(), c])); + } else if (colorSelectionAlgorithm == "vibrant") { + const swatches = await new Promise((resolve, reject) => new Vibrant(img, 5).getPalette().then(resolve).catch(reject)); + for (var col of ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"]) { + if (swatches[col]) { + const c = chroma(swatches[col].getHex()); + palette[c.luminance()] = c; + } + } + } else if (colorSelectionAlgorithm == "static") { + palette[1] = chroma(Dribbblish.config.get("colorOverride")); + } + + if (colorSelectionMode == "default") { + color = Object.values(palette)[0]; for (const col of Object.values(palette)) { if (col.luminance() > 0.05 && col.luminance() < 0.9) { - sidebarColor = col.hex(); + color = col.hex(); break; } } - } else if (colorSelectionMode == "dynamicLuminance") { + } else if (colorSelectionMode == "luminance") { const wantedLuminance = $("html").css("--is_light") == "1" ? Dribbblish.config.get("lightModeLuminance") : Dribbblish.config.get("darkModeLuminance"); - sidebarColor = palette[getClosestToNum(Object.keys(palette), wantedLuminance)].hex(); - } else if (colorSelectionMode == "static") { - sidebarColor = Dribbblish.config.get("colorOverride"); + color = palette[getClosestToNum(Object.keys(palette), wantedLuminance)].hex(); } } - updateColors(false, sidebarColor); + updateColors(false, color); } var coverListener; From 884ca0baea86a6f9b037d8c5ee0035f0b6bbe7b6 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Wed, 17 Nov 2021 21:04:39 +0100 Subject: [PATCH 07/10] reorder markdown-it plugins --- src/js/ConfigMenu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/ConfigMenu.js b/src/js/ConfigMenu.js index f3e5ebb..529ff81 100644 --- a/src/js/ConfigMenu.js +++ b/src/js/ConfigMenu.js @@ -1,7 +1,7 @@ import $ from "jquery"; import MarkdownIt from "markdown-it"; import MarkdownItAttrs from "markdown-it-attrs"; -import markdownItBracketedSpans from "markdown-it-bracketed-spans"; +import MarkdownItBracketedSpans from "markdown-it-bracketed-spans"; import svgUndo from "svg/undo"; @@ -82,8 +82,8 @@ export default class ConfigMenu { linkify: true, typographer: true }); + this.#md.use(MarkdownItBracketedSpans); this.#md.use(MarkdownItAttrs); - this.#md.use(markdownItBracketedSpans); const container = document.createElement("div"); container.id = "dribbblish-config"; From 055510a7adbc28dc0268bfaa35cccbd38e08628e Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Wed, 17 Nov 2021 21:05:25 +0100 Subject: [PATCH 08/10] change markdownn muted styles to only affect text, not links and stuff --- src/styles/Markdown.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/Markdown.scss b/src/styles/Markdown.scss index bc8aa29..347dcce 100644 --- a/src/styles/Markdown.scss +++ b/src/styles/Markdown.scss @@ -6,6 +6,6 @@ } .muted { - opacity: 0.5; + color: spiceColor("subtext", 0.5); } } From 58324a3ff22f68c8225556092b51351e86208cc4 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Wed, 17 Nov 2021 21:09:01 +0100 Subject: [PATCH 09/10] update `Color Selection Algorithm` description --- src/js/main.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index a794005..5e857db 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -540,10 +540,11 @@ Dribbblish.config.register({ key: "colorSelectionAlgorithm", name: "Color Selection Algorithm", description: ` - Algorithm of selecting colors from the albumart - - **Colorthief:** Gets more fitting colors{.muted} - - **Vibrant:** Gets more vibrant colors (was the default up to v3.1.1){.muted} - - **Static:** Select a static color to be used{.muted} + [Algorithm of selecting colors from the albumart] + - **Colorthief [(see)](https://lokeshdhakar.com/projects/color-thief/):** Gets more fitting colors + - **Vibrant [(see)](https://jariz.github.io/vibrant.js/):** Gets more vibrant colors *(was the default up to v3.1.1)* + - **Static:** Select a static color to be used + {.muted} `, data: { colorthief: "Colorthief", vibrant: "Vibrant", static: "Static" }, defaultValue: "colorthief", From 3448e7cffc3642922b7f8e7d203a9976b6a58746 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Wed, 17 Nov 2021 21:20:01 +0100 Subject: [PATCH 10/10] add `Request Feature` button to about --- CHANGELOG.md | 2 +- src/js/main.js | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 518ea0e..286b705 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,5 @@ Added: -- `Report Bugs` and `Changelog` buttons to `Settings > About` +- `Report Bugs`, `Request Feature` and `Changelog` buttons to `Settings > About` - Markdown parsing for settings descriptions - Option to have a button to open the settings next to your profile picture diff --git a/src/js/main.js b/src/js/main.js index 5e857db..3501439 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -389,7 +389,7 @@ waitForElement(["#main"], () => { type: "button", key: "aboutDribbblishBugs", name: "Report Bugs", - description: "Open new issue on GitHub", + description: "Open new issue on GitHub to report a bug", data: "Create Report", onChange: () => { const reportBody = ` @@ -444,6 +444,22 @@ waitForElement(["#main"], () => { } }); + Dribbblish.config.register({ + area: "About", + type: "button", + key: "aboutDribbblishFeature", + name: "Request Feature", + description: "Open new issue on GitHub to request a feature", + data: "Request Feature", + onChange: () => { + const reportURL = new URL("https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/new"); + reportURL.searchParams.set("labels", "enhancement"); + reportURL.searchParams.set("template", "feature_request.md"); + + window.open(reportURL.toString(), "_blank"); + } + }); + Dribbblish.config.register({ area: "About", type: "button",