diff --git a/package-lock.json b/package-lock.json
index 4854e38..b4ec7a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3326,13 +3326,12 @@
}
},
"color": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
- "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
- "dev": true,
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
+ "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
"requires": {
"color-convert": "^1.9.1",
- "color-string": "^1.5.2"
+ "color-string": "^1.5.4"
}
},
"color-convert": {
@@ -3349,10 +3348,9 @@
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
- "version": "1.5.3",
- "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
- "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
- "dev": true,
+ "version": "1.5.4",
+ "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz",
+ "integrity": "sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==",
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
@@ -11572,7 +11570,6 @@
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
- "dev": true,
"requires": {
"is-arrayish": "^0.3.1"
},
@@ -11580,8 +11577,7 @@
"is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
- "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
- "dev": true
+ "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
}
}
},
diff --git a/package.json b/package.json
index 99c7c1d..b2dd2dc 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
},
"homepage": "https://github.com/Serraniel/AniwatchPlus#readme",
"dependencies": {
+ "color": "^3.1.3",
"uuid": "^8.3.2"
},
"devDependencies": {
diff --git a/src/html/settings.html b/src/html/settings.html
index b63bf93..82d48c8 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -25,6 +25,9 @@
+
+
+
Anime
diff --git a/src/javascript/app.js b/src/javascript/app.js
index d34e051..a5966eb 100644
--- a/src/javascript/app.js
+++ b/src/javascript/app.js
@@ -5,6 +5,7 @@ import { initHelpers } from './utils/helpers';
// enhancements
import { init as anilyr } from './enhancements/anilyr';
import { init as animeRequests } from './enhancements/animeRequests';
+import { init as fontColor } from './enhancements/fontColor';
import { init as languageDisplay } from './enhancements/languageDisplay';
import { init as notifications } from './enhancements/notifications';
import { init as quickSearch } from './enhancements/quickSearch';
@@ -21,6 +22,7 @@ initHelpers();
// enhancements
anilyr();
animeRequests();
+fontColor();
languageDisplay();
notifications();
quickSearch();
diff --git a/src/javascript/configuration/configuration.js b/src/javascript/configuration/configuration.js
index 23ad4fd..a0939f6 100644
--- a/src/javascript/configuration/configuration.js
+++ b/src/javascript/configuration/configuration.js
@@ -6,6 +6,7 @@ export const SETTINGS_websiteDisplayQuickSearch = 'websiteDisplayQuickSearch';
export const SETTINGS_websiteShowNotificationsCountInTab = 'websiteShowNotificationsCountInTab';
export const SETTINGS_websiteHideUnusedTabs = 'websiteHideUnusedTabs';
export const SETTINGS_websiteOptimizeListAppearance = 'websiteOptimizeListAppearance';
+export const SETTINGS_websiteOptimizeFontColors = 'websiteOptimizeFontColors';
// anime
export const SETTINGS_animeLanguageDisplay = 'animeLanguageDisplay';
// requests
diff --git a/src/javascript/enhancements/fontColor.js b/src/javascript/enhancements/fontColor.js
new file mode 100644
index 0000000..6d3ddeb
--- /dev/null
+++ b/src/javascript/enhancements/fontColor.js
@@ -0,0 +1,82 @@
+import Color from 'color';
+import { getGlobalConfiguration, SETTINGS_websiteOptimizeFontColors } from '../configuration/configuration';
+import * as core from '../utils/aniwatchCore';
+import * as helper from '../utils/helpers';
+
+const BADGE_CLASS = 'label';
+const DARKCOLOR_CLASS = 'awp-fontColor-dark';
+const __observedBadges = [];
+
+export function init() {
+ getGlobalConfiguration().getProperty(SETTINGS_websiteOptimizeFontColors, value => {
+ if (value) {
+ core.runAfterLoad(() => {
+ checkRunColorOptimization(document.documentElement);
+ }, ".*");
+
+ core.runAfterLocationChange(() => {
+ checkRunColorOptimization(document.documentElement);
+ }, ".*");
+
+ core.registerScript(node => {
+ checkRunColorOptimization(node);
+ }, ".*");
+ }
+ });
+}
+
+function checkRunColorOptimization(node) {
+ // run the scripts
+ if (helper.isHtmlElement(node)) {
+ if (node.classList.contains(BADGE_CLASS)) {
+ tryRegisterObserverForBadge(node);
+ optimizeFontColorsBadges(node);
+ }
+ else {
+ node.querySelectorAll(`.${BADGE_CLASS}`).forEach(element => {
+ tryRegisterObserverForBadge(element);
+ optimizeFontColorsBadges(element);
+ });
+ }
+ }
+}
+
+function tryRegisterObserverForBadge(badge) {
+ // some badges change there color via late loading so we also have to observe the classlist
+ // example: Navigating from a list to an anime -> "Currently Airing" late loads the color badge
+ // this only happens when navigating from a list, direct loading works
+
+ if (__observedBadges.indexOf(badge) >= 0) {
+ return;
+ }
+
+ let obsever = new MutationObserver(mutations => {
+ mutations.forEach(mutation => {
+ // prevent recursive calls when our class is added / removed
+ if ((mutation.oldValue?.indexOf(DARKCOLOR_CLASS) ?? -1 ^ mutation.target?.classList?.indexOf(DARKCOLOR_CLASS) ?? -1) === 0) {
+ return;
+ }
+ else {
+ optimizeFontColorsBadges(mutation.target);
+ }
+ });
+ });
+
+ obsever.observe(badge, {
+ attributes: true,
+ attributeFilter: ['class'],
+ attributeOldValue: true,
+ });
+
+ __observedBadges.push(badge);
+}
+
+function optimizeFontColorsBadges(badge) {
+ let colorStr = window.getComputedStyle(badge, null).getPropertyValue('background-color');
+
+ // some elements do not have a computed background color
+ if (colorStr.length > 0) {
+ let color = new Color(colorStr)
+ badge.classList.toggle(DARKCOLOR_CLASS, color.isLight());
+ }
+}
\ No newline at end of file
diff --git a/src/stylesheets/aniwatchplus.scss b/src/stylesheets/aniwatchplus.scss
index 29ff151..ff84d01 100644
--- a/src/stylesheets/aniwatchplus.scss
+++ b/src/stylesheets/aniwatchplus.scss
@@ -2,6 +2,7 @@
@import "./vars/colors";
// enhancements
+@import "./enhancements/fontColor";
@import "./enhancements/lists";
@import "./enhancements/tabs";
@import "./enhancements/watch2gether";
diff --git a/src/stylesheets/enhancements/_fontColor.scss b/src/stylesheets/enhancements/_fontColor.scss
new file mode 100644
index 0000000..d209588
--- /dev/null
+++ b/src/stylesheets/enhancements/_fontColor.scss
@@ -0,0 +1,7 @@
+.awp{
+ &-fontColor{
+ &-dark{
+ color: $aniwatchDark !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/stylesheets/vars/_colors.scss b/src/stylesheets/vars/_colors.scss
index 4e6f2b7..afaf996 100644
--- a/src/stylesheets/vars/_colors.scss
+++ b/src/stylesheets/vars/_colors.scss
@@ -1,2 +1,5 @@
$aniwatchBlue: #348fff;
+$aniwatchDark: #282a39;
+
+
$gray: rgba(155, 155, 155, 0.2);