From fef162aabb5d9cca161a269009bad394f8b9b9a6 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 23 Jun 2025 01:09:20 -0700
Subject: feat(settings): Custom CSS

---
 src/app.html                             | 17 ++++++++++++++++-
 src/lib/Settings/Categories/Debug.svelte |  5 +++++
 src/stores/settings.ts                   |  2 ++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/app.html b/src/app.html
index 6e3a5db3..9f318135 100644
--- a/src/app.html
+++ b/src/app.html
@@ -84,8 +84,23 @@
 
       document.addEventListener('DOMContentLoaded', () => {
         const mai = document.getElementById('mai');
+        const settings = JSON.parse(localStorage.getItem('settings'));
+        const customCSS = settings.displayCustomCSS;
 
-        aoButa = JSON.parse(localStorage.getItem('settings')).displayAoButa;
+        if (customCSS && customCSS.length > 0) {
+          const style = document.createElement('style');
+          const head = document.head || document.getElementsByTagName('head')[0];
+
+          style.type = 'text/css';
+          style.id = 'custom-css';
+
+          if (style.styleSheet) style.styleSheet.cssText = customCSS;
+          else style.appendChild(document.createTextNode(customCSS));
+
+          head.appendChild(style);
+        }
+
+        aoButa = settings.displayAoButa;
         mai.style.display = 'block';
 
         if (aoButa === 'random') {
diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
index 847d3908..b27123f8 100644
--- a/src/lib/Settings/Categories/Debug.svelte
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -62,3 +62,8 @@
   <br />
   {$locale().debug.clearLocalStorage.hint2}
 </SettingHint>
+
+<p></p>
+
+Custom CSS
+<textarea bind:value={$settings.displayCustomCSS}></textarea>
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 4076a991..5436761e 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -70,6 +70,7 @@ export interface Settings {
   displayReverseSort: boolean;
   displayAnimeSort: 'difference' | 'start_date' | 'end_date' | 'time_remaining';
   displayMediaListFilter: boolean;
+  displayCustomCSS: string;
 }
 
 const defaultSettings: Settings = {
@@ -115,6 +116,7 @@ const defaultSettings: Settings = {
   displayReverseSort: false,
   displayAnimeSort: 'time_remaining',
   displayMediaListFilter: false,
+  displayCustomCSS: '',
 
   // Debug
   debugDummyLists: false,
-- 
cgit v1.2.3