Merge pull request #59 from accusitive/patch-1

Update README.md to the new Jellyfin link

Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html

@@ -433,7 +433,19 @@
                 for (var i = 0; i < inputs.length; i++) {
                     var element = inputs[i]
                     var values = $("#" + element.name).spectrum("get")
-                    var color = "rgba(" + values._r + "," + values._g + "," + values._b + "," + values._a + ")"
+                    var mode = element.getAttribute("data-mode");
+                    var color = "";
+                    switch (mode) {
+                        case "hex":
+                            color = "#" + values.toHex();
+                            break;
+                        case "only_numbers":
+                            color = values._r + "," + values._g + "," + values._b ;
+                            break;
+                        default:
+                            color = "rgba(" + values._r + "," + values._g + "," + values._b + "," + values._a + ")";
+                            break;
+                    }
                     css += element.getAttribute("data-css").replaceAll("$", color) + "\n";
                 }
 

Jellyfin.Plugin.SkinManager/Jellyfin.Plugin.SkinManager.csproj

@@ -3,8 +3,8 @@
   <PropertyGroup>
     <TargetFramework>netstandard2.1</TargetFramework>
     <IsPackable>true</IsPackable>
-    <AssemblyVersion>1.5.0</AssemblyVersion>
+    <AssemblyVersion>2.0.1</AssemblyVersion>
-    <FileVersion>1.5.0</FileVersion>
+    <FileVersion>2.0.1</FileVersion>
     <Authors />
     <Company />
   </PropertyGroup>

README.md

@@ -1,5 +1,5 @@
 <h1 align="center">Jellyfin Skin Manager Plugin</h1>
-<h3 align="center">Part of the <a href="https://jellyfin.media">Jellyfin Project</a></h3>
+<h3 align="center">Part of the <a href="https://jellyfin.org">Jellyfin Project</a></h3>
 
 <p align="center">
 Jellyfin Skin Manager is a plugin that helps you to download and install skins;

skins-3.0.json

@@ -29,22 +29,22 @@
     "name": "JellySkin",
     "author": "prayagprajapati17",
     "description": "A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
-        "defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.css');",
+    "defaultCss": "@import url('https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css');",
     "previews": [{
             "name": "Login Page",
-                "url": "https://prayag17.github.io/JellySkin/img/login.jpg"
+            "url": "https://cdn.jsdelivr.net/gh/prayag17/JellySkin/img/login.jpg"
         },
         {
             "name": "Home/Index Page",
-                "url": "https://prayag17.github.io/JellySkin/img/Home.jpg"
+            "url": "https://cdn.jsdelivr.net/gh/prayag17/JellySkin/img/Home.jpg"
         },
         {
             "name": "Library Page",
-                "url": "https://prayag17.github.io/JellySkin/img/Movies.jpg"
+            "url": "https://cdn.jsdelivr.net/gh/prayag17/JellySkin/img/Movies.jpg"
         },
         {
             "name": "Title page",
-                "url": "https://prayag17.github.io/JellySkin/img/Title%20Page-Movie.jpg"
+            "url": "https://cdn.jsdelivr.net/gh/prayag17/JellySkin/img/Title%20Page-Movie.jpg"
         }
     ],
     "categories": [{
@@ -53,33 +53,33 @@
                 "type": "selector",
                 "name": "Gradient",
                 "description": "Changes the Jellyfin themed Hover gradient",
-                    "css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
+                "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/$.css');",
                 "selections": [{
                         "name": "Default",
                         "value": "",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/default.css');"
+                        "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/default.css');"
                     },
                     {
                         "name": "Sea Gradient",
                         "value": "seaGradient",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/seaGradient.css');"
+                        "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Gradients/seaGradient.css');"
                     },
                     {
                         "name": "Sunset Gradient",
                         "value": "sunsetGradient",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');"
+                        "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Gradients/sunsetGradient.css');"
+
+                    },
+                    {
+                        "name": "Mauve Gradient",
+                        "value": "morningGradient",
+                        "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Gradients/mauveGradient.css');"
 
                     },
                     {
                         "name": "Night Sky Gradient",
                         "value": "nightSkyGradient",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');"
+                        "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Gradients/nightSkyGradient.css');"
-
-                        },
-                        {
-                            "name": "Morning Gradient",
-                            "value": "morningGradient",
-                            "css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
 
                     }                    
                 ]
@@ -88,7 +88,19 @@
                 "type": "checkBox",
                 "name": "Theme Logo",
                 "description": "Styles title page in such a way in which logos are used instead of Names.",
-                    "css": "@import url('https://prayag17.github.io/JellySkin/Logo.css');"
+                "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Logo.css');"
+            },
+            {
+                "type": "checkBox",
+                "name": "Compact Posters",
+                "description": "If you want to display your posters to be compact.",
+                "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/compact-poster.css');"
+            },
+            {
+                "type": "checkBox",
+                "name": "Improve Performance",
+                "description": "Removes all gradient transparecy due to performance issues on older devices.",
+                "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/imp-per.css');"
             }
         ]
     }]
@@ -97,22 +109,22 @@
     "name": "JellyFlix",
     "author": "prayagprajapati17",
     "description": "A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.",
-        "defaultCss": "@import url(https://prayag17.github.io/JellyFlix/default.css);",
+    "defaultCss": "@import url(https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/default.css);",
     "previews": [{
             "name": "Login Page",
-                "url": "https://prayag17.github.io/JellyFlix/img/Login.jpg"
+            "url": "https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/img/Login.jpg"
         },
         {
             "name": "Home/Index Page",
-                "url": "https://prayag17.github.io/JellyFlix/img/Home.jpg"
+            "url": "https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/img/Home.jpg"
         },
         {
             "name": "Library Page",
-                "url": "https://prayag17.github.io/JellyFlix/img/Movies.jpg"
+            "url": "https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/img/Movies.jpg"
         },
         {
             "name": "Title page",
-                "url": "https://prayag17.github.io/JellyFlix/img/Title%20Page-TV.jpg"
+            "url": "https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/img/Title%20Page-TV.jpg"
         }
     ],
     "categories": [{
@@ -121,15 +133,304 @@
             "type": "checkBox",
             "name": "Theme Logo",
             "description": "Styles title page in such a way in which logos are used instead of Names.",
-                "css": "@import url('https://prayag17.github.io/JellyFlix/Logo.css');"
+            "css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/addons/Logo.css');"
         }]
     }]
 },
+{
+    "name": "Ultrachromic",
+    "author": "Casper Talvio",
+    "description": "The final form, the true evolution of the chromic theme saga! The old trilogy of chromic themes are deprecated, as their appearances can be replicated using Ultrachromic.",
+    "defaultCss": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');",
+    "previews": [{
+            "name": "Login Page",
+            "url": "https://user-images.githubusercontent.com/4365015/127768970-e827c7e4-f4ce-4229-a68a-b2e87a723ef0.png"
+        },
+        {
+            "name": "Home/Index Page",
+            "url": "https://user-images.githubusercontent.com/4365015/127774204-03957527-7178-4ea2-8674-d83fe6a97d1c.png"
+        },
+        {
+            "name": "Library Page",
+            "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Monochromic/Lib.jpg"
+        },
+        {
+            "name": "Title page",
+            "url": "https://user-images.githubusercontent.com/4365015/127778994-ddee8235-6bb2-42ae-a8b1-f9023dc69398.png"
+        }
+    ],
+    "categories": [{
+			"name": "Customization Details",
+			"description": "Recommended only with the Custom theme. Not guaranteed to work with the presets.",
+			"options": [{
+					"type": "checkBox",
+					"name": "Recommended Fixes",
+					"description": "Contains various small tweaks all over the JF UI, an alignment here, a size tweak there.",
+					"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');"
+				},
+				{
+					"type": "checkBox",
+					"name": "Jellyfin Fonts",
+					"description": "Make Jellyfin use the same font as its logo, for everything.",
+					"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');"
+				},
+				{
+					"type": "selector",
+					"name": "Rounding",
+					"description": "Circlehover keeps the stock circle accent when hovering over things, otherwise the accent will be a rounded square like everythig else.",
+					"css": "/* Rounding */",
+					"selections": [{
+							"name": "Default",
+							"value": "default",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');"
+						},
+						{
+							"name": "Circlehover",
+							"value": "circlehover",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding_circlehover.css');"
+						}
+					]
+				},
+				{
+					"type": "checkBox",
+					"name": "Smaller Cast List",
+					"description": "A smaller, square aspect ratio style cast list.",
+					"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css');"
+				},
+				{
+					"type": "selector",
+					"name": "Compact episode list",
+					"description": "A more easily scrolled episode list, there is the option to keep it as a list that is more compact, or turning the episode list into a grid menu.",
+					"css": "/* Compact list */",
+					"selections": [{
+							"name": "Compact List",
+							"value": "compactlist",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css');"
+						},
+						{
+							"name": "Grid",
+							"value": "grid",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_grid.css');"
+						}
+					]
+				},
+				{
+					"type": "checkBox",
+					"name": "Transparent Top Bar",
+					"description": "Transparent top bar.",
+					"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css');"
+				},
+				{
+					"type": "selector",
+					"name": "Login Screen",
+					"description": "Login screen styles. The minimalistic option has no frame or prompt text.",
+					"css": "/* Login frame */",
+					"selections": [{
+							"name": "Login Frame",
+							"value": "loginframe",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');"
+						},
+						{
+							"name": "Login Minimalistic",
+							"value": "loginminimalistic",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css');"
+						}
+					]
+				},
+				{
+					"type": "selector",
+					"name": "Input fields",
+					"description": "Input field styles, with borders that highlight when selected, or with no borders, and the background highlights, when selected.",
+					"css": "/* Input fields */",
+					"selections": [{
+							"name": "Border",
+							"value": "fieldsborder",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_border.css');"
+						},
+						{
+							"name": "No Border",
+							"value": "fieldsnoborder",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');"
+						}
+					]
+				},
+				{
+					"type": "selector",
+					"name": "Watched/Unwatched indicators",
+					"description": "Two options, should the indicator be floating, or attached to the corner of the title card.",
+					"css": "/* Watched/Unwatched */",
+					"selections": [{
+							"name": "Floating",
+							"value": "indicatorfloating",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_floating.css');"
+						},
+						{
+							"name": "Corner",
+							"value": "indicatorcorner",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');"
+						}
+					]
+				},
+				{
+					"type": "selector",
+					"name": "Theme",
+					"description": "Dark, light, and colorful type.",
+					"css": "/* Theme */",
+					"selections": [{
+							"name": "Dark",
+							"value": "darktheme",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css');"
+						},
+						{
+							"name": "White",
+							"value": "whitetheme",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/light.css');"
+						},
+						{
+							"name": "Colorful",
+							"value": "colorfultheme",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/colorful.css');"
+						},
+						{
+							"name": "Dark with Accent",
+							"value": "darkwithaccenttheme",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css');"
+						}
+					]
+				},
+				{
+					"type": "selector",
+					"name": "Title Page",
+					"description": "Four options, two versions, each version can be used with or without a logo replacing title text.",
+					"css": "/* Title page */",
+					"selections": [{
+							"name": "Simple",
+							"value": "titlesimple",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css');"
+						},
+						{
+							"name": "Simple with Logo",
+							"value": "titlesimplelogo",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.css');"
+						},
+						{
+							"name": "Banner",
+							"value": "titlebanner",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner.css');"
+						},
+						{
+							"name": "Banner with Logo",
+							"value": "titlebannerlogo",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner-logo.css');"
+						}
+					]
+				},
+				{
+					"type": "selector",
+					"name": "Progress bar",
+					"description": "Default, overlay or floating style progress indicator for library items.",
+					"css": "/* Progress bar */",
+					"selections": [{
+							"name": "Overlay",
+							"value": "overlayprogress",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css');"
+						},
+						{
+							"name": "Bottom Bar",
+							"value": "bottombarprogress",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/bottombarprogress.css');"
+						},
+						{
+							"name": "Floating",
+							"value": "floatingprogress",
+							"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');"
+						}
+					]
+				},
+				{
+					"type": "checkBox",
+					"name": "Hoverglow Effect",
+					"description": "",
+					"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css');"
+				},
+				{
+					"type": "checkBox",
+					"name": "Glassy Effect",
+					"description": "",
+					"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');"
+				},
+				{
+					"type": "checkBox",
+					"name": "Pan-Animation Effect",
+					"description": "Caution: Pan-animation can cause flickering on chromium based browsers when the backdrop is also modified",
+					"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/pan-animation.css');"
+				},
+				{
+					"type": "checkBox",
+					"name": "Backdrop-Hack Effect",
+					"description": "",
+					"css": "@import url('https://ctalvio.github.io/Monochromic/backdrop-hack_style.css');"
+				},
+                {
+                    "type": "number",
+                    "name": "Modify Backdrop Blur",
+                    "css": ".backdropImage {filter: blur($px);}",
+                    "default": "18",			
+					"description": ""
+
+                },
+                {
+                    "type": "number",
+                    "name": "Modify Backdrop Saturation",
+                    "css": ".backdropImage {filter: saturate($%);}",
+                    "default": "120",			
+					"description": ""
+                },
+                {
+                    "type": "number",
+                    "name": "Modify Backdrop Contrast",
+                    "css": ".backdropImage {filter: contrast($%);}",
+                    "default": "120",			
+					"description": ""
+                },
+                {
+                    "type": "number",
+                    "name": "Modify Backdrop Brightness",
+                    "css": ".backdropImage {filter: brightness($%);}",
+                    "default": "40",			
+					"description": ""
+                },
+                {
+                    "type": "text",
+                    "name": "Modify Login Background url",
+                    "css": "#loginPage {background: url($) !important;}",
+                    "default": "https://i.imgur.com/9vL4iNf.png",			
+					"description": ""
+                },
+				{
+					"type": "colorPicker",
+					"name": "Modify Accent Color",
+					"css": ":root {--accent: $;}",
+					"mode":"only_numbers",
+					"default": "#6279cd",			
+					"description": ""
+				},
+				{
+					"type": "number",
+					"name": "Modify Rounding",
+					"css": ":root {--rounding: $px;}",
+					"default": "12",			
+					"description": ""
+				}
+			]
+		}
+	]
+},
 {
     "name": "Monochromic",
     "author": "EdgeMentality",
     "description": "This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
-        "defaultCss": "@import url('https://ctalvio.github.io/Monochromic/default_style.css');",
+    "defaultCss": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css');",
     "previews": [{
             "name": "Login Page",
             "url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Monochromic/login.jpg?raw=true"
@@ -177,8 +478,9 @@
             {
                 "type": "colorPicker",
                 "name": "Accent color",
+				"mode":"only_numbers",
                 "description": "Choose a custom accent color to use with the theme.",
-                    "css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}",
+                "css": "@import url('https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css');:root {--accent: $;}",
                 "default": ""
             }
         ]
@@ -230,6 +532,7 @@
             {
                 "type": "colorPicker",
                 "name": "Accent color",
+				"mode":"only_numbers",
                 "description": "Choose a custom accent color to use with the theme.",
                 "css": ":root {--accent: $;}",
                 "default": "#6279cd"
@@ -279,6 +582,7 @@
             {
                 "type": "colorPicker",
                 "name": "Accent color",
+				"mode":"only_numbers",
                 "description": "Choose a custom accent color to use with the theme.",
                 "css": ":root {--accent: $;}",
                 "default": "#ffffff"
@@ -286,6 +590,121 @@
         ]
     }]
 },
+{
+    "name": "Dark And Green",
+    "author": "mbcooper83",
+    "description": "A Dark And Green Theme for Jellyfin.",
+    "defaultCss": "@import url('https://mbcooper83.github.io/jfcssdrkgrn/jellyfin-darkangreen.css');",
+    "previews": [
+        {
+            "name": "Home/Index Page",
+            "url": "https://camo.githubusercontent.com/6dd10c355679d68222c4bed4889be5e7c453e623acc0308bf0e5cab464fc5e66/68747470733a2f2f6d62636f6f70657238332e6769746875622e696f2f6a6663737364726b67726e2f6a6663737330312e706e673f7261773d74727565"
+        },
+        {
+            "name": "Settings Page",
+            "url": "https://camo.githubusercontent.com/fe309944755cf16b8a78ded952c28758bbf2fa8a2cd4a9f035953e9404747a50/68747470733a2f2f6d62636f6f70657238332e6769746875622e696f2f6a6663737364726b67726e2f6a6663737330322e706e673f7261773d74727565"
+        },
+        {
+            "name": "Episode/season page",
+            "url": "https://camo.githubusercontent.com/6d8dd75114e06bffbc9ea87f4fb2845dc8a49b9408b5f79322a6d4ce80b4ee50/68747470733a2f2f6d62636f6f70657238332e6769746875622e696f2f6a6663737364726b67726e2f6a6663737330332e706e673f7261773d74727565"
+        },
+        {
+            "name": "Player",
+            "url": "https://camo.githubusercontent.com/fcef7d4e498abf47f9dc44337436b2664ee2ce63195b93ec6ea564f1f689300c/68747470733a2f2f6d62636f6f70657238332e6769746875622e696f2f6a6663737364726b67726e2f6a6663737330342e706e673f7261773d74727565"
+        }
+    ],
+    "categories": [{
+        "name": "Default",
+        "options": []
+    }]
+},
+{
+    "name": "JellyTheme",
+    "author": "ShiniGandhi",
+    "description": "A heavily modified theme for Jellyfin with a very original name.",
+    "defaultCss": "/* JellyTheme */",
+    "previews": [
+        {
+            "name": "Main page, with resized cards (optional)",
+            "url": "https://github.com/ShiniGandhi/JellyTheme/raw/main/screenshots/Index-Resized-Cards.png"
+        },
+        {
+            "name": "Main page, no resized cards",
+            "url": "https://github.com/ShiniGandhi/JellyTheme/raw/main/screenshots/Index.png"
+        },
+        {
+            "name": "Movie page with a single version and no trailer playing",
+            "url": "https://github.com/ShiniGandhi/JellyTheme/raw/main/screenshots/Movie-No-Trailer_Single-Version.png"
+        },
+        {
+            "name": "Movie page with multiple versions and a trailer playing",
+            "url": "https://github.com/ShiniGandhi/JellyTheme/raw/main/screenshots/Movie-Trailer-and-Versions.png"
+        },
+        {
+            "name": "TV show page",
+            "url": "https://github.com/ShiniGandhi/JellyTheme/raw/main/screenshots/Show.png"
+        },
+        {
+            "name": "TV show - compact seasons list (optional)",
+            "url": "https://github.com/ShiniGandhi/JellyTheme/raw/main/screenshots/Season-List-Compact.png"
+        },
+        {
+            "name": "TV show - episodes in season",
+            "url": "https://github.com/ShiniGandhi/JellyTheme/raw/main/screenshots/Season.png"
+        },
+        {
+            "name": "TV show - episode entry",
+            "url": "https://github.com/ShiniGandhi/JellyTheme/raw/main/screenshots/Episode.png"
+        },
+        {
+            "name": "Cleaner user settings (optional)",
+            "url": "https://github.com/ShiniGandhi/JellyTheme/blob/main/screenshots/User-Settings.png?raw=true"
+        }
+    ],
+    "categories": [{
+        "name": "Default",
+        "options": [{
+                    "type": "selector",
+                    "name": "Mode",
+                    "description": "Select cleaner for a slightly cleaner UI, with no backdrop in the main menu and a few more things .",
+                    "css": "/*mode*/",
+                    "selections": [{
+                            "name": "Normal",
+                            "css": "@import url('https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/JellyTheme.css'); "
+                        },
+                        {
+                            "name": "Cleaner",
+                            "css": "@import url('https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Cleaner-UI.css');"
+                        }
+                    ]
+                },
+				{
+                    "type": "colorPicker",
+                    "mode": "rgba",
+                    "name": "Accent color",
+                    "description": "Change the accent color.",
+                    "css": ":root {--accent:$!important;}",
+                    "default": "#6279cd"
+                },
+				{
+                "type": "checkBox",
+                "name": "Resize Some Elements",
+                "description": "If you want Continue Watching, Next Up and the list of seasons to be smaller, as shown in my screenshots, check this",
+                "css": "@import url('https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/Resize-Cards.css');",
+				"default":"false"	
+				},
+				{
+                "type": "checkBox",
+                "name": "Right-to-Left Support",
+                "description": "If your server's metadata is in Hebrew, Arabic (or any other language that is written right-to-left, check this:",
+                "css": "@import url('https://cdn.jsdelivr.net/gh/ShiniGandhi/JellyTheme@latest/latest/RTL-Fix.css');",
+				"default":"false"	
+				}
+				
+				
+				]
+    }]
+},
 {
     "name": "Custom",
     "author": "you",