Linus-Enjoyer/Freedom-Loader
1
0
Fork 0
mirror of https://github.com/MasterAcnolo/Freedom-Loader.git synced 2026-07-29 18:25:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Custom Theme features and clean the old one

Browse Source
This commit is contained in:
MasterAcnolo
2026-04-11 18:10:51 +02:00
parent 9f88fe19c3
commit 23d11d8933
26 changed files with 400 additions and 657 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/images/Chirac.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 MiB

BIN
public/assets/images/Drift.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 967 KiB

BIN
public/assets/images/NF.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 139 KiB

BIN
public/assets/images/Songbird.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 620 KiB

BIN
public/assets/images/Spicy.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.3 MiB

145
public/script/customthemes.js
View File

@@ -1,62 +1,111 @@
const themes = {
dark: { label: "Sombre", subtitle: "Darkness is my ally" },
light: { label: "Clair", subtitle: "Qui aime ce thème ?" },
neon: { label: "Purple", subtitle: "How was your day ?"},
nf: { label: "NF", subtitle: "You call it music, i call it my Therapist" },
songbird: { label: "Songbird", subtitle: "From Her to Eternity" },
drift: { label: "Drift", subtitle: "Si la route t'appelle, contre appel" },
fanatic: { label: "Fanatic", subtitle: "Always Fnatic !" },
chirac: { label: "Chirac", subtitle: "J'aime les pommes" },
spicy: { label: "Spicy", subtitle: "The Spiciest One" },
};
const themeSelect = document.getElementById("themeSelect");
let loadedThemes = [];
function populateThemeSelect() {
for (const [themeKey, themeInfo] of Object.entries(themes)) {
function applyTheme(theme) {
const root = document.documentElement;
const style = theme.style;
// Background
if (theme.image) {
document.body.style.backgroundImage = `url('${theme.image}')`;
document.body.style.backgroundSize = style.background?.size || "cover";
document.body.style.backgroundPosition = style.background?.position || "center";
document.body.style.backgroundAttachment = style.background?.attachment || "fixed";
} else {
document.body.style.backgroundImage = "";
}
// Colors
root.style.setProperty("--background-color", style.colors?.background || "");
root.style.setProperty("--default-text-color", style.colors?.text?.default || "");
root.style.setProperty("--subtitle-color", style.colors?.text?.subtitle || "");
root.style.setProperty("--audio-only-label-color", style.colors?.text?.audioOnly || "");
// Form
root.style.setProperty("--form-bg-color", style.form?.background || "");
root.style.setProperty("--form-input-bg-color", style.form?.input?.background || "");
root.style.setProperty("--form-input-border-color", style.form?.input?.border || "");
root.style.setProperty("--form-input-border-focus-color", style.form?.input?.borderFocus || "");
root.style.setProperty("--form-input-text-color", style.form?.input?.text || "");
root.style.setProperty("--form-input-placeholder-color", style.form?.input?.placeholder || "");
root.style.setProperty("--form-button-bg-color", style.form?.button?.background || "");
root.style.setProperty("--form-button-text-color", style.form?.button?.text || "");
root.style.setProperty("--form-button-bg-hover-color", style.form?.button?.hover || "");
root.style.setProperty("--paste-button-icon-color", style.form?.pasteButtonIcon || "");
// Checkbox
root.style.setProperty("--checkbox-unchecked-bg-color", style.checkbox?.background?.unchecked || "");
root.style.setProperty("--checkbox-checked-bg-color", style.checkbox?.background?.checked || "");
root.style.setProperty("--checkbox-checkmark-border-color", style.checkbox?.checkmarkBorder || "");
root.style.setProperty("--checkbox-pulse-color", style.checkbox?.pulse || "");
// Download
root.style.setProperty("--download-status-color", style.download?.status || "");
// Progress bar
root.style.setProperty("--progress-bar-bg-color", style.progressBar?.background || "");
root.style.setProperty("--progress-bar-fill-color", style.progressBar?.fill || "");
// Video info
root.style.setProperty("--video-info-bg-color", style.videoInfo?.background || "");
root.style.setProperty("--video-info-text-color", style.videoInfo?.text || "");
root.style.setProperty("--video-info-heading-color", style.videoInfo?.heading || "");
root.style.setProperty("--video-info-list-color", style.videoInfo?.list || "");
root.style.setProperty("--video-info-list-strong-color", style.videoInfo?.strong || "");
root.style.setProperty("--video-info-link-color", style.videoInfo?.link || "");
root.style.setProperty("--video-info-link-hover-color", style.videoInfo?.linkHover || "");
// Playlist
root.style.setProperty("--playlist-background-color", style.playlist?.background || "");
// Settings
root.style.setProperty("--settings-button-bg-color", style.settings?.button?.background || "");
root.style.setProperty("--settings-button-text-color", style.settings?.button?.text || "");
root.style.setProperty("--settings-modal-bg-color", style.settings?.background?.modal || "");
root.style.setProperty("--settings-section-bg-color", style.settings?.background?.section || "");
root.style.setProperty("--settings-text-color", style.settings?.text || "");
root.style.setProperty("--settings-subtitle-color", style.settings?.subtitle || "");
// Subtitle
const subtitleEl = document.getElementById("subtitle");
if (subtitleEl) subtitleEl.textContent = theme.subtitle || theme.name;
}
function saveTheme(themeId) {
window.electronAPI.setFeature("theme", themeId);
}
function populateThemeSelect(themes) {
themeSelect.innerHTML = "";
for (const theme of themes) {
const option = document.createElement("option");
option.value = themeKey;
option.textContent = themeInfo.label;
option.value = theme.id;
option.textContent = theme.name;
themeSelect.appendChild(option);
}
}
function applyTheme(themeKey) {
document.body.classList.remove(...Object.keys(themes));
document.body.classList.add(themeKey);
async function initThemes() {
loadedThemes = await window.electronAPI.getThemes();
const subtitleElement = document.getElementById("subtitle");
if (subtitleElement && themes[themeKey]) {
subtitleElement.textContent = themes[themeKey].subtitle;
}
if (!loadedThemes.length) return;
populateThemeSelect(loadedThemes);
const features = await window.electronAPI.getFeatures();
const savedId = features.theme;
const theme = loadedThemes.find(t => t.id === savedId) || loadedThemes[0];
themeSelect.value = theme.id;
applyTheme(theme);
}
function saveTheme(themeKey) {
localStorage.setItem("selectedTheme", themeKey);
}
function loadTheme() {
const savedTheme = localStorage.getItem("selectedTheme");
if (savedTheme && themes[savedTheme]) {
applyTheme(savedTheme);
themeSelect.value = savedTheme;
} else {
applyTheme("dark");
themeSelect.value = "dark";
}
}
// When the user changes the theme from the select
themeSelect.addEventListener("change", (event) => {
const selectedTheme = event.target.value;
if (themes[selectedTheme]) {
applyTheme(selectedTheme);
saveTheme(selectedTheme);
themeSelect.addEventListener("change", (e) => {
const theme = loadedThemes.find(t => t.id === e.target.value);
if (theme) {
applyTheme(theme);
saveTheme(theme.id);
}
});
// Initialisation
populateThemeSelect();
loadTheme();
initThemes();

3
public/styles/styles.css
View File

@@ -12,9 +12,6 @@
@import url("components/editpathbutton.css");
@import url("components/progressBar.css");
/* Themes */
@import url("theme/themeimport.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#app {

108
public/styles/theme/chirac-theme.css
View File

@@ -1,108 +0,0 @@
body.chirac {
background-image: url('../../assets/images/Chirac.png');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
--background-color: rgba(255, 255, 255, 0.85);
--default-text-color: #002395;
--subtitle-color: #EF4135;
--audio-only-label-color: #002395;
/* Formulaire */
--form-bg-color: rgba(255, 255, 255, 0.9);
--form-input-bg-color: #f5f5f5;
--form-input-border-color: #002395;
--form-input-border-focus-color: #EF4135;
--form-input-text-color: #002395;
--form-input-placeholder-color: #999999;
--form-button-bg-color: #002395;
--form-button-text-color: #ffffff;
--form-button-bg-hover-color: #EF4135;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--checkbox-unchecked-bg-color: #cccccc;
--checkbox-checked-bg-color: #002395;
--checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(0, 35, 149, 0.5);
/* Download status */
--download-status-color: #002395;
/* Progress bar */
--progress-bar-bg-color: #d0d0d0;
--progress-bar-fill-color: #EF4135;
/* Video Info Box */
--video-info-bg-color: rgba(255, 255, 255, 0.9);
--video-info-text-color: #000000;
--video-info-heading-color: #EF4135;
--video-info-list-color: #444444;
--video-info-list-strong-color: #000000;
--video-info-link-color: #002395;
--video-info-link-hover-color: #EF4135;
/* Playlist Color */
--playlist-background-color: #d1d1d1ca;
/* Settings */
--settings-button-bg-color: #00196a;
--settings-button-text-color: #dcdcdc;
--settings-modal-bg-color: #0b0528;
--settings-section-bg-color: #1c1055;
--settings-text-color: #cecece;
--settings-subtitle-color: #adadad;
}
/*
Je serai le président de tous les Français
Tous les Français
Tous les Français
Tous les Français
Tous les Français
Tous les Français
Tous les Français
Tous les Français
Tous les Français
Tous les Français
Mes chers compatriotes
Je serai le président de tous les Français, de tous les Français
Je mesure la difficulté de la tâche qui nous attend
Tous les Français
Tous les Français
Je veux un État, je veux les Français
Je veux un État, je veux
Je veux un État-tat-tat-tat vigoureux
Un État-tat-tat-tat impartial
Un État-tat-tat-tat vigoureux
Un État-tat-tat-tat exigeant
Un État-tat-tat-tat
Je serai le président de tous les Français
Tous les Français
Tous les Français
Tous les Français
Un État qui n'isole pas, tous, pas, pas
Tous, pas, tous, pas, pas
Tous, pas, tous, pas, pas (les Français)
Tous, tous, pas, tous, tous, pas, pas
Tous, tous, pas, tous, tous, pas, pas
Tous, tous, tous, pas, tous, pas, pas (les Français)
Tous, pas, tous, tous, pas, pas
Tous, tous, tous, pas, tous, tous, pas, pas
Tous, tous, pas, tous, tous, pas, pas
Tous, tous, tous-tous, tous-tous, pas, pas
Tous, tous-tous, tous-tous, pas, pas
Un État-tat-tat-tat vigoureux
Un État-tat-tat-tat impartial
Un État-tat-tat-tat exigeant
Un État-tat-tat-tat
Je serai le président de tous les Français
*/

54
public/styles/theme/dark-theme.css
View File

@@ -1,54 +0,0 @@
body.dark {
/* Couleurs générales */
--background-color: #121212; /* noir/gris très foncé */
--default-text-color: #e0e0e0; /* texte clair */
--subtitle-color: #2196f3; /* bleu accent */
--audio-only-label-color: #f5f5f5; /* texte checkbox */
/* Formulaire */
--form-bg-color: #1e1e1e; /* fond formulaire */
--form-input-bg-color: #2a2a2a; /* fond inputs */
--form-input-border-color: #444444; /* bordure */
--form-input-border-focus-color: #2196f3; /* focus bleu */
--form-input-text-color: #f5f5f5; /* texte clair */
--form-input-placeholder-color: #888888; /* placeholder gris */
--form-button-bg-color: #2196f3; /* bouton bleu */
--form-button-text-color: #ffffff; /* texte bouton */
--form-button-bg-hover-color: #1976d2; /* hover bleu plus foncé */
--paste-button-icon-color: #ffffff;
/* Checkbox */
--checkbox-unchecked-bg-color: #555555; /* gris moyen */
--checkbox-checked-bg-color: #2196f3; /* bleu accent */
--checkbox-checkmark-border-color: #ffffff; /* blanc */
--checkbox-pulse-color: rgba(33, 150, 243, 0.5);
/* Download status */
--download-status-color: #2196f3;
/* Progress bar */
--progress-bar-bg-color: #444444;
--progress-bar-fill-color: #2196f3;
/* Video Info Box */
--video-info-bg-color: #1a1a1a;
--video-info-text-color: #e0e0e0;
--video-info-heading-color: #2196f3;
--video-info-list-color: #cccccc;
--video-info-list-strong-color: #ffffff;
--video-info-link-color: #2196f3;
--video-info-link-hover-color: #1976d2;
/* Playlist Color */
--playlist-background-color: #303030;
/* Settings */
--settings-button-bg-color: #1e1e1e;
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #1e1e1e;
--settings-section-bg-color: #2a2a2a;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #aaa;
}

66
public/styles/theme/drift-theme.css
View File

@@ -1,66 +0,0 @@
body.drift {
background-image: url('../../assets/images/Drift.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
/* Palette principale */
--background-color: #0f1218;
--default-text-color: #3d4b61;
--subtitle-color: #1a1a1a;
--audio-only-label-color: #c0d4ff;
/* Formulaire */
--form-bg-color: #1e222a;
--form-input-bg-color: #13171d;
--form-input-border-color: #3b4b6d;
--form-input-border-focus-color: #6ea8ff;
--form-input-text-color: #f0f4ff;
--form-input-placeholder-color: #7a8fae;
--form-button-bg-color: #2a2979;
--form-button-text-color: #ffffff;
--form-button-bg-hover-color: #353393;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--checkbox-unchecked-bg-color: #2a2e38;
--checkbox-checked-bg-color: #2a2979;
--checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(76,108,255,0.3);
/* Download status */
--download-status-color: #ff8e8e;
/* Progress bar */
--progress-bar-bg-color: #3b4b6d;
--progress-bar-fill-color: #ff8e8e;
/* Video Info Box */
--video-info-bg-color: #1e222ad0;
--video-info-text-color: #e8e8f0;
--video-info-heading-color: #9ab6ff;
--video-info-list-color: #c0d4ff;
--video-info-list-strong-color: #ffffff;
--video-info-link-color: #4c6cff;
--video-info-link-hover-color: #6c8dff;
/* Playlist Color */
--playlist-background-color: #424b5cc2;
/* Settings */
--settings-button-bg-color: #1e222ace;
--settings-button-text-color: #b3b3b4;
--settings-modal-bg-color: #1e222a;
--settings-section-bg-color: #272d38;
--settings-text-color: #bababa;
--settings-subtitle-color: #cacaca;
}
body.drift .download-path{
color: #ededed;
}

54
public/styles/theme/fanatic-theme.css
View File

@@ -1,54 +0,0 @@
body.fanatic{
/* Couleurs générales */
--background-color: #121212;
--default-text-color: #eee;
--subtitle-color: #FF5900;
--audio-only-label-color: #ffffff;
/* Formulaire */
--form-bg-color: #1e1e1e;
--form-input-bg-color: #2b2b2b;
--form-input-border-color: #333333;
--form-input-border-focus-color: #FF5900;
--form-input-text-color: #eeeeee;
--form-input-placeholder-color: #666666;
--form-button-bg-color: #FF5900;
--form-button-text-color: #121212;
--form-button-bg-hover-color: #e65500;
--paste-button-icon-color: #f1f1f1;
/* Checkbox */
--checkbox-unchecked-bg-color: #555555;
--checkbox-checked-bg-color: #ff6600;
--checkbox-checkmark-border-color: #eee;
--checkbox-pulse-color: rgba(255, 102, 0, 0.5);
/* Download status */
--download-status-color: #FF5900;
/* Progress bar */
--progress-bar-bg-color: #444444;
--progress-bar-fill-color: #FF5900;
/* Video Info Box */
--video-info-bg-color: #222222;
--video-info-text-color: #eee;
--video-info-heading-color: #FF5900;
--video-info-list-color: #ccc;
--video-info-list-strong-color: #fff;
--video-info-link-color: #FF5900;
--video-info-link-hover-color: #e65500;
/* Playlist Color */
--playlist-background-color: #2b2b2b;
/* Settings */
--settings-button-bg-color: #1e1e1e;
--settings-button-text-color: #dcdcdc;
--settings-modal-bg-color: #1e1e1e;
--settings-section-bg-color: #2d2d2d;
--settings-text-color: #cecece;
--settings-subtitle-color: #adadad;
}

53
public/styles/theme/light-theme.css
View File

@@ -1,53 +0,0 @@
body.light {
/* Couleurs générales */
--background-color: #dadada;
--default-text-color: #222222;
--subtitle-color: #007bff;
--audio-only-label-color: #000000;
/* Formulaire */
--form-bg-color: #ffffff;
--form-input-bg-color: #fafafa;
--form-input-border-color: #cccccc;
--form-input-border-focus-color: #007bff;
--form-input-text-color: #333333;
--form-input-placeholder-color: #888888;
--form-button-bg-color: #007bff;
--form-button-text-color: #ffffff;
--form-button-bg-hover-color: #0056b3;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--checkbox-unchecked-bg-color: #cccccc;
--checkbox-checked-bg-color: #007bff;
--checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(0, 123, 255, 0.4);
/* Download status */
--download-status-color: #007bff;
/* Progress bar */
--progress-bar-bg-color: #e0e0e0;
--progress-bar-fill-color: #007bff;
/* Video Info Box */
--video-info-bg-color: #ffffff;
--video-info-text-color: #222222;
--video-info-heading-color: #007bff;
--video-info-list-color: #444444;
--video-info-list-strong-color: #000000;
--video-info-link-color: #007bff;
--video-info-link-hover-color: #0056b3;
/* Playlist Color */
--playlist-background-color: #c5c5c5b2;
/* Settings */
--settings-button-bg-color: #e4e4e4;
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #cbcbcb;
--settings-section-bg-color: #b8b8b8;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #656565;
}

64
public/styles/theme/neon-theme.css
View File

@@ -1,64 +0,0 @@
body.neon {
background: (url("../../assets/images/drift.jpg"));
background-image: linear-gradient(135deg, #0f0c29, #302b63, #24243e); /* dégradé sombre violet/bleu */
background-size: cover;
background-position: center;
background-attachment: fixed;
/* Couleurs générales */
--background-color: #1b1b2f;
--default-text-color: #e0e0ff;
--subtitle-color: #a3a3ff;
--audio-only-label-color: #c0c0ff;
/* Formulaire */
--form-bg-color: #2c2c4a;
--form-input-bg-color: #1f1f3a;
--form-input-border-color: #5858f0;
--form-input-border-focus-color: #a3a3ff;
--form-input-text-color: #ffffff;
--form-input-placeholder-color: #8888ff;
--form-button-bg-color: #5858f0;
--form-button-text-color: #ffffff;
--form-button-bg-hover-color: #7a7aff;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--checkbox-unchecked-bg-color: #302b63;
--checkbox-checked-bg-color: #5858f0;
--checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(88,88,240,0.3);
/* Download status */
--download-status-color: #a3a3ff;
/* Progress bar */
--progress-bar-bg-color: #302b63;
--progress-bar-fill-color: #a3a3ff;
/* Video Info Box */
--video-info-bg-color: #2c2c4a;
--video-info-text-color: #e0e0ff;
--video-info-heading-color: #a3a3ff;
--video-info-list-color: #c0c0ff;
--video-info-list-strong-color: #ffffff;
--video-info-link-color: #5858f0;
--video-info-link-hover-color: #7a7aff;
/* Playlist Color */
--playlist-background-color: #3e3e64;
/* Settings */
--settings-button-bg-color: #202038;
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #242454;
--settings-section-bg-color: #2f2f6f;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #d2d2d2;
}
body.neon .download-path {
color: var(--default-text-color);
}

63
public/styles/theme/nf-theme.css
View File

@@ -1,63 +0,0 @@
body.nf {
background-image: url('../../assets/images/NF.jpg');
background-size: cover;
background-position: 70% center;
background-attachment: fixed;
/* Couleurs générales */
--background-color: #1a1a1a;
--default-text-color: #e6dfd5;
--subtitle-color: #f5f0e6;
--audio-only-label-color: #d8cfc2;
/* Formulaire */
--form-bg-color: #2a2a2a;
--form-input-bg-color: #222222;
--form-input-border-color: #4a4036;
--form-input-border-focus-color: #cbb89d;
--form-input-text-color: #f0e8dd;
--form-input-placeholder-color: #9a8f80;
--form-button-bg-color: #cbb89d;
--form-button-text-color: #1a1a1a;
--form-button-bg-hover-color: #b7a588;
--paste-button-icon-color: #1a1a1a;
/* Checkbox */
--checkbox-unchecked-bg-color: #4a4036;
--checkbox-checked-bg-color: #cbb89d;
--checkbox-checkmark-border-color: #1a1a1a;
--checkbox-pulse-color: rgba(203,184,157,0.3);
/* Download status */
--download-status-color: #cbb89d;
/* Progress bar */
--progress-bar-bg-color: #4a4036;
--progress-bar-fill-color: #cbb89d;
/* Video Info Box */
--video-info-bg-color: #2a2a2a;
--video-info-text-color: #e6dfd5;
--video-info-heading-color: #f5f0e6;
--video-info-list-color: #d8cfc2;
--video-info-list-strong-color: #ffffff;
--video-info-link-color: #cbb89d;
--video-info-link-hover-color: #b7a588;
/* Playlist Color */
--playlist-background-color: #4f4f4f;
/* Settings */
--settings-button-bg-color: #2a2a2a;
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #2a2a2a;
--settings-section-bg-color: #313131;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #7a7979;
}
body.nf .download-path {
color: var(--default-text-color);
}

63
public/styles/theme/songbird-theme.css
View File

@@ -1,63 +0,0 @@
body.songbird {
background-image: url('../../assets/images/Songbird.webp');
background-size: cover;
background-position: center center;
background-attachment: fixed;
/* Couleurs générales */
--background-color: #0a0a0a; /* noir profond */
--default-text-color: #ff2a2a; /* rouge néon */
--subtitle-color: #f2f2f2; /* rouge sombre */
--audio-only-label-color: #ff4d4d; /* rouge un peu plus clair */
/* Formulaire */
--form-bg-color: rgba(20,0,0,0.85); /* noir semi-transparent avec rouge */
--form-input-bg-color: #1a0a0a;
--form-input-border-color: #ff2a2a;
--form-input-border-focus-color: #b30000;
--form-input-text-color: #ffffff;
--form-input-placeholder-color: #950404;
--form-button-bg-color: #b30000;
--form-button-text-color: #ffffff;
--form-button-bg-hover-color: #ff2a2a;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--checkbox-unchecked-bg-color: #630000;
--checkbox-checked-bg-color: #ff2a2a;
--checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(255,42,42,0.3);
/* Download status */
--download-status-color: #ff2a2a;
/* Progress bar */
--progress-bar-bg-color: #630000;
--progress-bar-fill-color: #ff2a2a;
/* Video Info Box */
--video-info-bg-color: rgba(30,0,0,0.9);
--video-info-text-color: #ff4d4d;
--video-info-heading-color: #ff2a2a;
--video-info-list-color: #b30000;
--video-info-list-strong-color: #ffffff;
--video-info-link-color: #ff2a2a;
--video-info-link-hover-color: #b30000;
/* Playlist Color */
--playlist-background-color: #3f0000;
/* Settings */
--settings-button-bg-color: rgba(29, 0, 0, 0.784);
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #121212;
--settings-section-bg-color: #1a1a1a;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #7a7979;
}
body.cyberpunk .download-path {
color: var(--default-text-color);
}

64
public/styles/theme/spicy-theme.css
View File

@@ -1,64 +0,0 @@
body.spicy {
/* Couleurs générales */
--background-color: #121212; /* fond noir profond */
--default-text-color: #ffffff; /* texte clair */
--subtitle-color: #f87918; /* accent rouge piment */
--audio-only-label-color: #ffffff; /* texte checkbox inline */
/* Formulaire */
--form-bg-color: #1a1a1a; /* fond formulaire gris très foncé */
--form-input-bg-color: #2b2b2b; /* fond inputs gris foncé */
--form-input-border-color: #444444; /* bordure gris */
--form-input-border-focus-color: #ff1a1a; /* focus rouge piment */
--form-input-text-color: #eeeeee; /* texte inputs */
--form-input-placeholder-color: #888888; /* placeholder gris moyen */
--form-button-bg-color: #ff1a1a; /* bouton rouge vif */
--form-button-text-color: #ffffff; /* texte bouton blanc */
--form-button-bg-hover-color: #cc0000; /* hover rouge foncé */
--paste-button-icon-color: #ffffff;
/* Checkbox */
--checkbox-unchecked-bg-color: #555555; /* gris moyen */
--checkbox-checked-bg-color: #ff1a1a; /* rouge piment */
--checkbox-checkmark-border-color: #f5f5f5; /* blanc cassé */
--checkbox-pulse-color: rgba(255, 26, 26, 0.5); /* pulse rouge translucide */
/* Download status */
--download-status-color: #ffffff; /* rouge vif */
/* Progress bar */
--progress-bar-bg-color: #444444;
--progress-bar-fill-color: #ff1a1a;
/* Video Info Box */
--video-info-bg-color: #1a1a1a; /* fond infos gris foncé */
--video-info-text-color: #f5f5f5; /* texte clair */
--video-info-heading-color: #ff1a1a; /* titres rouges */
--video-info-list-color: #cccccc; /* texte liste gris clair */
--video-info-list-strong-color: #ffffff; /* texte important blanc */
--video-info-link-color: #ff1a1a; /* liens rouges */
--video-info-link-hover-color: #cc0000; /* liens hover rouge foncé */
/* Playlist Color */
--playlist-background-color: #353232;
/* Settings */
--settings-button-bg-color: #1a1a1a;
--settings-button-text-color: #dcdcdc;
--settings-modal-bg-color: #1a1a1a;
--settings-section-bg-color: #292929;
--settings-text-color: #cecece;
--settings-subtitle-color: #adadad;
}
/* Optionnel: background piments */
body.spicy {
background-image: url('../../assets/images/Spicy.png');
background-size:cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}

9
public/styles/theme/themeimport.css vendored
View File

@@ -1,9 +0,0 @@
@import url("chirac-theme.css");
@import url("dark-theme.css");
@import url("fanatic-theme.css");
@import url("light-theme.css");
@import url("nf-theme.css");
@import url("drift-theme.css");
@import url("neon-theme.css");
@import url("songbird-theme.css");
@import url("spicy-theme.css")

3
public/styles/variables.css
View File

@@ -39,6 +39,9 @@
--video-info-link-color: #007bff;
--video-info-link-hover-color: #0056b3;
/* Playlist */
--playlist-background-color: #4f4f4f;
/* Settings */
--settings-button-bg-color: var(--form-bg-color);
--settings-button-text-color: var(--default-text-color);