Select and apply themes from GitHub repositories to soyjak.st
// ==UserScript==
// @name Soyjak Themer
// @namespace http://tampermonkey.net/
// @version 1.3.1
// @description Select and apply themes from GitHub repositories to soyjak.st
// @author ReignOfTea
// @match https://www.soyjak.party/*
// @match https://soyjak.party/*
// @match https://www.soyjak.st/*
// @match https://soyjak.st/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=www.soyjak.st
// @license AGPL-3.0
// @grant none
// ==/UserScript==
(function () {
"use strict";
const STORAGE_KEYS = {
THEME: "soyjak_selected_theme",
USER_CSS: "soyjak_user_css",
THEMES_CACHE: "soyjak_themes_cache",
CACHE_TIMESTAMP: "soyjak_themes_cache_timestamp",
FAVORITES: "soyjak_favorite_themes",
REPOS: "soyjak_theme_repos"
};
const CACHE_DURATION = 7 * 24 * 60 * 60 * 1000; // 7 Days
const DEFAULT_REPOS = [
{
name: "tchan",
apiUrl: "https://api.github.com/repos/ReignOfTea/tchan/contents/?ref=master",
basePath: "https://raw.githubusercontent.com/ReignOfTea/tchan/master/",
isDefault: true,
},
{
name: "lainchan",
apiUrl: "https://api.github.com/repos/lainchan/lainchan/contents/stylesheets?ref=php7.4",
basePath: "https://raw.githubusercontent.com/lainchan/lainchan/php7.4/stylesheets/",
isDefault: true,
},
{
name: "vichan",
apiUrl: "https://api.github.com/repos/vichan-devel/vichan/contents/stylesheets?ref=master",
basePath: "https://raw.githubusercontent.com/vichan-devel/vichan/master/stylesheets/",
isDefault: true,
},
];
let state = {
initialThemeApplied: false,
originalCSS: null,
previewingTheme: false
};
const repoManager = {
getAll() {
try {
const repos = JSON.parse(
localStorage.getItem(STORAGE_KEYS.REPOS) || "null"
);
if (!repos) {
localStorage.setItem(STORAGE_KEYS.REPOS, JSON.stringify(DEFAULT_REPOS));
return DEFAULT_REPOS;
}
return repos;
} catch (error) {
console.error("Error getting repositories:", error);
localStorage.setItem(STORAGE_KEYS.REPOS, JSON.stringify(DEFAULT_REPOS));
return DEFAULT_REPOS;
}
},
add(name, apiUrl, basePath) {
try {
const repos = this.getAll();
const existingIndex = repos.findIndex((repo) => repo.name === name);
if (existingIndex >= 0) {
if (repos[existingIndex].isDefault) {
uiHelper.showToast(
`Cannot modify default repository "${name}"`,
"error"
);
return false;
}
repos[existingIndex] = { name, apiUrl, basePath };
uiHelper.showToast(`Updated repository "${name}"`, "info");
} else {
repos.push({ name, apiUrl, basePath });
uiHelper.showToast(`Added repository "${name}"`, "info");
}
localStorage.setItem(STORAGE_KEYS.REPOS, JSON.stringify(repos));
uiHelper.updateReposList();
return true;
} catch (error) {
console.error("Error adding repository:", error);
uiHelper.showToast("Error adding repository", "error");
return false;
}
},
remove(name) {
try {
const repos = this.getAll();
const repo = repos.find(r => r.name === name);
if (!repo) return false;
if (repo.isDefault && !confirm("This is a default repository. Are you sure you want to remove it?")) {
return false;
}
const filteredRepos = repos.filter((repo) => repo.name !== name);
if (filteredRepos.length < repos.length) {
localStorage.setItem(
STORAGE_KEYS.REPOS,
JSON.stringify(filteredRepos)
);
uiHelper.showToast(`Removed repository "${name}"`, "info");
uiHelper.updateReposList();
return true;
}
return false;
} catch (error) {
console.error("Error removing repository:", error);
uiHelper.showToast("Error removing repository", "error");
return false;
}
},
resetToDefault() {
try {
if (
confirm(
"Reset all repositories to default? This will remove any custom repositories you have added."
)
) {
localStorage.setItem(
STORAGE_KEYS.REPOS,
JSON.stringify(DEFAULT_REPOS)
);
uiHelper.showToast("Repositories reset to default", "info");
uiHelper.updateReposList();
return true;
}
return false;
} catch (error) {
console.error("Error resetting repositories:", error);
uiHelper.showToast("Error resetting repositories", "error");
return false;
}
}
};
const themeManager = {
async fetchRepoContents(repo) {
try {
const response = await fetch(repo.apiUrl);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data
.filter((item) => item.name.endsWith(".css"))
.map((item) => {
return {
name: item.name.replace(".css", ""),
url: repo.basePath + item.name,
repo: repo.name,
};
});
} catch (error) {
console.error(`Error fetching themes from ${repo.name}:`, error);
uiHelper.showToast(`Error fetching themes from ${repo.name}`, "error");
return [];
}
},
async fetchAllThemes() {
const statusElement = document.getElementById("theme-status");
if (statusElement) {
statusElement.textContent = "Fetching available themes...";
}
try {
const allRepos = repoManager.getAll();
const allThemesPromises = allRepos.map((repo) =>
this.fetchRepoContents(repo)
);
const allThemesArrays = await Promise.all(allThemesPromises);
const allThemes = allThemesArrays.flat();
const themesObject = {};
allThemes.forEach((theme) => {
themesObject[theme.name] = theme;
});
localStorage.setItem(STORAGE_KEYS.THEMES_CACHE, JSON.stringify(themesObject));
localStorage.setItem(
STORAGE_KEYS.CACHE_TIMESTAMP,
Date.now().toString()
);
if (statusElement) {
statusElement.textContent = `Found ${allThemes.length} themes from ${allRepos.length} repositories.`;
}
return themesObject;
} catch (error) {
console.error("Error fetching all themes:", error);
if (statusElement) {
statusElement.textContent =
"Error fetching themes. Check console for details.";
}
uiHelper.showToast("Error fetching themes", "error");
return {};
}
},
async getThemes(forceRefresh = false) {
try {
const cachedThemes = localStorage.getItem(STORAGE_KEYS.THEMES_CACHE);
const cacheTimestamp = localStorage.getItem(STORAGE_KEYS.CACHE_TIMESTAMP);
const now = Date.now();
const cacheAge = cacheTimestamp
? now - parseInt(cacheTimestamp)
: Infinity;
if (!forceRefresh && cachedThemes && cacheAge < CACHE_DURATION) {
return JSON.parse(cachedThemes);
}
return await this.fetchAllThemes();
} catch (error) {
console.error("Error getting themes:", error);
uiHelper.showToast("Error getting themes", "error");
return {};
}
},
async applyTheme(themeName, skipConfirmation = false, initialLoad = false) {
if (
!skipConfirmation &&
!initialLoad &&
!confirm(`Apply theme: ${themeName}?`)
) {
return;
}
try {
const themes = await this.getThemes();
if (!themes[themeName]) {
uiHelper.showToast(`Theme "${themeName}" not found`, "error");
return false;
}
const response = await fetch(themes[themeName].url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
let css = await response.text();
css = this.processCSS(css);
if (!state.originalCSS && !initialLoad) {
const existingStyle = document.getElementById(
"applied-theme-style"
);
if (existingStyle) {
state.originalCSS = existingStyle.textContent;
}
}
let styleElement = document.getElementById("applied-theme-style");
if (!styleElement) {
styleElement = document.createElement("style");
styleElement.id = "applied-theme-style";
document.head.appendChild(styleElement);
}
styleElement.textContent = css;
localStorage.setItem(STORAGE_KEYS.THEME, themeName);
localStorage.setItem(STORAGE_KEYS.USER_CSS, css);
if (!initialLoad) {
uiHelper.showToast(`Theme "${themeName}" applied`, "success");
}
state.previewingTheme = false;
const cancelPreviewButton =
document.getElementById("cancel-preview");
if (cancelPreviewButton) {
cancelPreviewButton.style.display = "none";
}
return true;
} catch (error) {
console.error("Error applying theme:", error);
uiHelper.showToast(`Error applying theme: ${error.message}`, "error");
return false;
}
},
async previewTheme(themeName) {
try {
const themes = await this.getThemes();
if (!themes[themeName]) {
uiHelper.showToast(`Theme "${themeName}" not found`, "error");
return false;
}
const response = await fetch(themes[themeName].url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
let css = await response.text();
css = this.processCSS(css);
const styleElement = document.getElementById("applied-theme-style");
if (styleElement) {
state.originalCSS = styleElement.textContent;
} else {
state.originalCSS = null;
}
let previewStyleElement = document.getElementById("applied-theme-style");
if (!previewStyleElement) {
previewStyleElement = document.createElement("style");
previewStyleElement.id = "applied-theme-style";
document.head.appendChild(previewStyleElement);
}
previewStyleElement.textContent = css;
state.previewingTheme = true;
uiHelper.showToast(`Previewing "${themeName}"`, "info");
return true;
} catch (error) {
console.error("Error previewing theme:", error);
uiHelper.showToast(`Error previewing theme: ${error.message}`, "error");
return false;
}
},
processCSS(css) {
let processedCSS = "/* Processed by Soyjak Theme Selector to ensure style overrides */\n";
const cssRules = css.split('}');
for (let i = 0; i < cssRules.length; i++) {
if (cssRules[i].trim() === '') continue;
const openBracePos = cssRules[i].indexOf('{');
if (openBracePos === -1) {
processedCSS += cssRules[i] + '}\n';
continue;
}
const selector = cssRules[i].substring(0, openBracePos).trim();
let declarations = cssRules[i].substring(openBracePos + 1).trim();
if (selector.startsWith('@')) {
processedCSS += cssRules[i] + '}\n';
continue;
}
const declarationParts = declarations.split(';');
let processedDeclarations = '';
for (let j = 0; j < declarationParts.length; j++) {
const declaration = declarationParts[j].trim();
if (declaration === '') continue;
if (declaration.includes('!important')) {
processedDeclarations += declaration + '; ';
} else {
processedDeclarations += declaration + ' !important; ';
}
}
processedCSS += selector + ' { ' + processedDeclarations + '}\n';
}
return processedCSS;
},
cancelPreview() {
if (!state.previewingTheme) {
return;
}
const styleElement = document.getElementById("applied-theme-style");
if (state.originalCSS === null) {
if (styleElement) {
styleElement.remove();
}
} else {
if (styleElement) {
styleElement.textContent = state.originalCSS;
} else {
const newStyleElement = document.createElement("style");
newStyleElement.id = "applied-theme-style";
newStyleElement.textContent = state.originalCSS;
document.head.appendChild(newStyleElement);
}
}
state.previewingTheme = false;
uiHelper.showToast("Preview canceled", "info");
const cancelPreviewButton = document.getElementById("cancel-preview");
if (cancelPreviewButton) {
cancelPreviewButton.style.display = "none";
}
},
resetTheme() {
try {
if (!confirm("Reset to default theme?")) {
return false;
}
localStorage.removeItem(STORAGE_KEYS.THEME);
localStorage.removeItem(STORAGE_KEYS.USER_CSS);
const styleElement = document.getElementById("applied-theme-style");
if (styleElement) {
styleElement.remove();
}
const select = document.getElementById("external-theme-select");
if (select) {
select.value = "";
}
const themeInfo = document.getElementById("theme-info");
if (themeInfo) {
themeInfo.style.display = "none";
}
const statusElement = document.getElementById("theme-status");
if (statusElement) {
statusElement.textContent = "Theme reset to default.";
}
state.originalCSS = null;
state.previewingTheme = false;
uiHelper.showToast("Reset to default theme", "info");
return true;
} catch (error) {
console.error("Error resetting theme:", error);
uiHelper.showToast("Error resetting theme", "error");
return false;
}
}
};
const favoritesManager = {
getFavorites() {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEYS.FAVORITES) || "[]");
} catch (error) {
console.error("Error getting favorites:", error);
return [];
}
},
toggleFavorite(themeName) {
try {
const favorites = this.getFavorites();
const index = favorites.indexOf(themeName);
if (index === -1) {
favorites.push(themeName);
uiHelper.showToast(`Added "${themeName}" to favorites`, "success");
} else {
favorites.splice(index, 1);
uiHelper.showToast(`Removed "${themeName}" from favorites`, "info");
}
localStorage.setItem(STORAGE_KEYS.FAVORITES, JSON.stringify(favorites));
return index === -1;
} catch (error) {
console.error("Error toggling favorite:", error);
uiHelper.showToast("Error updating favorites", "error");
return false;
}
}
};
const settingsManager = {
exportSettings() {
try {
const settings = {
selectedTheme: localStorage.getItem(STORAGE_KEYS.THEME),
favorites: favoritesManager.getFavorites(),
repositories: repoManager.getAll(),
};
const blob = new Blob([JSON.stringify(settings, null, 2)], {
type: "application/json",
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "soyjak-theme-settings.json";
a.click();
URL.revokeObjectURL(url);
uiHelper.showToast("Settings exported successfully", "info");
return true;
} catch (error) {
console.error("Error exporting settings:", error);
uiHelper.showToast("Error exporting settings", "error");
return false;
}
},
importSettings(file) {
const reader = new FileReader();
reader.onload = (e) => {
try {
const settings = JSON.parse(e.target.result);
if (settings.repositories && Array.isArray(settings.repositories)) {
localStorage.setItem(
STORAGE_KEYS.REPOS,
JSON.stringify(settings.repositories)
);
}
if (settings.favorites && Array.isArray(settings.favorites)) {
localStorage.setItem(
STORAGE_KEYS.FAVORITES,
JSON.stringify(settings.favorites)
);
}
if (settings.selectedTheme) {
localStorage.setItem(STORAGE_KEYS.THEME, settings.selectedTheme);
themeManager.applyTheme(settings.selectedTheme, true);
}
uiHelper.updateReposList();
uiHelper.populateThemeSelect();
uiHelper.updateCacheInfo();
uiHelper.showToast("Settings imported successfully", "success");
return true;
} catch (error) {
console.error("Error importing settings:", error);
uiHelper.showToast("Error importing settings", "error");
return false;
}
};
reader.readAsText(file);
}
};
const uiHelper = {
showToast(message, type = "info") {
const toast = document.createElement("div");
toast.className = `theme-toast ${type}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.classList.add("show");
}, 10);
setTimeout(() => {
toast.classList.remove("show");
setTimeout(() => {
if (document.body.contains(toast)) {
document.body.removeChild(toast);
}
}, 500);
}, 3000);
},
addStyles() {
const styleElement = document.createElement("style");
styleElement.textContent = `
.theme-selector-container {
padding: 15px;
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
}
.theme-selector-header {
margin-bottom: 20px;
text-align: center;
}
.theme-selector-tabs {
display: flex;
border-bottom: 1px solid #ccc;
margin-bottom: 15px;
}
.theme-selector-tab {
padding: 8px 15px;
cursor: pointer;
border: 1px solid transparent;
border-bottom: none;
margin-right: 5px;
border-radius: 5px 5px 0 0;
}
.theme-selector-tab.active {
border-color: #ccc;
background-color: #f9f9f9;
margin-bottom: -1px;
padding-bottom: 9px;
}
.theme-selector-tab-content {
display: none;
padding: 15px;
border: 1px solid #ccc;
border-top: none;
background-color: #f9f9f9;
}
.theme-selector-tab-content.active {
display: block;
}
.theme-selector-search {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
.theme-selector-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.theme-selector-button {
padding: 8px 15px;
cursor: pointer;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
flex: 1;
margin: 0 5px;
}
.theme-selector-button:first-child {
margin-left: 0;
}
.theme-selector-button:last-child {
margin-right: 0;
}
.theme-selector-button:hover {
background-color: #e0e0e0;
}
.theme-selector-full-button {
width: 100%;
padding: 8px 15px;
cursor: pointer;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
}
.theme-selector-full-button:hover {
background-color: #e0e0e0;
}
.theme-selector-info {
margin-top: 15px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f9f9f9;
border-radius: 3px;
}
.theme-selector-status {
margin-top: 15px;
font-style: italic;
color: #666;
}
.theme-toast {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 20px;
background-color: #333;
color: white;
border-radius: 5px;
z-index: 10000;
opacity: 0;
transition: opacity 0.5s;
max-width: 300px;
}
.theme-toast.show {
opacity: 1;
}
.theme-toast.info {
background-color: #2196F3;
}
.theme-toast.success {
background-color: #4CAF50;
}
.theme-toast.warning {
background-color: #FF9800;
}
.theme-toast.error {
background-color: #F44336;
}
.favorite-star {
cursor: pointer;
margin-left: 5px;
color: #ccc;
}
.favorite-star.active {
color: gold;
}
.repo-item {
margin-bottom: 5px;
}
.remove-repo-btn {
background-color: #f44336;
color: white;
border: none;
padding: 3px 8px;
border-radius: 3px;
cursor: pointer;
}
.remove-repo-btn:hover {
background-color: #d32f2f;
}
`;
document.head.appendChild(styleElement);
},
async populateThemeSelect() {
const select = document.getElementById("external-theme-select");
if (!select) return;
const themes = await themeManager.getThemes();
const favorites = favoritesManager.getFavorites();
select.innerHTML = "";
const placeholderOption = document.createElement("option");
placeholderOption.value = "";
placeholderOption.textContent = "-- Select a theme --";
select.appendChild(placeholderOption);
const sortedThemeNames = Object.keys(themes).sort((a, b) => {
const aIsFavorite = favorites.includes(a);
const bIsFavorite = favorites.includes(b);
if (aIsFavorite && !bIsFavorite) return -1;
if (!aIsFavorite && bIsFavorite) return 1;
return a.localeCompare(b);
});
const favoritesGroup = document.createElement("optgroup");
favoritesGroup.label = "Favorites";
const repoGroups = {};
sortedThemeNames.forEach((themeName) => {
const theme = themes[themeName];
const isFavorite = favorites.includes(themeName);
const option = document.createElement("option");
option.value = themeName;
option.textContent = themeName;
option.dataset.repo = theme.repo;
if (isFavorite) {
option.dataset.favorite = "true";
favoritesGroup.appendChild(option);
} else {
if (!repoGroups[theme.repo]) {
repoGroups[theme.repo] = document.createElement("optgroup");
repoGroups[theme.repo].label = theme.repo;
}
repoGroups[theme.repo].appendChild(option);
}
});
if (favoritesGroup.children.length > 0) {
select.appendChild(favoritesGroup);
}
Object.values(repoGroups).forEach((group) => {
if (group.children.length > 0) {
select.appendChild(group);
}
});
const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME);
if (savedTheme && themes[savedTheme]) {
select.value = savedTheme;
}
this.updateThemeInfo();
},
filterThemes(searchText) {
const select = document.getElementById("external-theme-select");
if (!select) return;
const options = select.querySelectorAll("option");
const optgroups = select.querySelectorAll("optgroup");
searchText = searchText.toLowerCase();
optgroups.forEach((group) => {
group.style.display = "";
});
options.forEach((option) => {
if (option.value === "") return;
const themeName = option.textContent.toLowerCase();
const matches = themeName.includes(searchText);
option.style.display = matches ? "" : "none";
});
optgroups.forEach((group) => {
const visibleOptions = Array.from(
group.querySelectorAll("option")
).filter((opt) => opt.style.display !== "none");
group.style.display = visibleOptions.length > 0 ? "" : "none";
});
},
async updateThemeInfo() {
const select = document.getElementById("external-theme-select");
const infoDiv = document.getElementById("theme-info");
if (!select || !infoDiv) return;
const selectedTheme = select.value;
if (!selectedTheme) {
infoDiv.style.display = "none";
return;
}
const themes = await themeManager.getThemes();
const theme = themes[selectedTheme];
if (!theme) {
infoDiv.style.display = "none";
return;
}
const favorites = favoritesManager.getFavorites();
const isFavorite = favorites.includes(selectedTheme);
infoDiv.innerHTML = `
<h3>
${selectedTheme}
<span class="favorite-star ${isFavorite ? "active" : ""
}" data-theme="${selectedTheme}">★</span>
</h3>
<p><strong>Repository:</strong> ${theme.repo}</p>
<p><strong>URL:</strong> <a href="${theme.url}" target="_blank">${theme.url
}</a></p>
`;
infoDiv.style.display = "block";
const favoriteStar = infoDiv.querySelector(".favorite-star");
if (favoriteStar) {
favoriteStar.addEventListener("click", (event) => {
const themeName = event.target.dataset.theme;
if (!themeName) return;
const isNowFavorite = favoritesManager.toggleFavorite(themeName);
event.target.classList.toggle("active", isNowFavorite);
this.populateThemeSelect();
});
}
},
updateReposList() {
const reposList = document.getElementById("repos-list");
if (!reposList) return;
const repos = repoManager.getAll();
reposList.innerHTML = "";
if (repos.length === 0) {
reposList.innerHTML = "<p>No repositories configured.</p>";
return;
}
repos.forEach((repo) => {
const repoItem = document.createElement("div");
repoItem.className = "repo-item";
repoItem.innerHTML = `
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 5px; border-bottom: 1px solid #ddd;">
<div>
<strong>${repo.name}</strong> ${repo.isDefault
? '<span style="color: #666; font-size: 0.8em;">(Default)</span>'
: ""
}
<div style="font-size: 0.8em; color: #666;">API: ${repo.apiUrl}</div>
<div style="font-size: 0.8em; color: #666;">Base: ${repo.basePath}</div>
</div>
<button class="remove-repo-btn" data-repo="${repo.name}">Remove</button>
</div>
`;
reposList.appendChild(repoItem);
const removeBtn = repoItem.querySelector(".remove-repo-btn");
if (removeBtn) {
removeBtn.addEventListener("click", () => {
repoManager.remove(repo.name);
});
}
});
},
updateCacheInfo() {
const cacheInfoDiv = document.getElementById("cache-info");
if (!cacheInfoDiv) return;
const cacheTimestamp = localStorage.getItem(STORAGE_KEYS.CACHE_TIMESTAMP);
const themesCache = localStorage.getItem(STORAGE_KEYS.THEMES_CACHE);
const repos = repoManager.getAll();
const defaultRepoCount = repos.filter((repo) => repo.isDefault).length;
const customRepoCount = repos.length - defaultRepoCount;
if (!cacheTimestamp || !themesCache) {
cacheInfoDiv.innerHTML = "<p>No theme cache found.</p>";
return;
}
try {
const themes = JSON.parse(themesCache);
const themeCount = Object.keys(themes).length;
const cacheDate = new Date(parseInt(cacheTimestamp));
const now = new Date();
const diffMs = now - cacheDate;
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const diffMins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
cacheInfoDiv.innerHTML = `
<p><strong>Themes in cache:</strong> ${themeCount}</p>
<p><strong>Total repositories:</strong> ${repos.length}</p>
<p><strong>Default repositories:</strong> ${defaultRepoCount}</p>
<p><strong>Custom repositories:</strong> ${customRepoCount}</p>
<p><strong>Last updated:</strong> ${cacheDate.toLocaleString()}</p>
<p><strong>Cache age:</strong> ${diffDays}d ${diffHours}h ${diffMins}m</p>
<p><strong>Cache expires:</strong> After 7 days</p>
`;
} catch (e) {
cacheInfoDiv.innerHTML = "<p>Error reading cache information.</p>";
console.error("Error parsing cache:", e);
}
},
switchTab(tabId) {
const tabContents = document.querySelectorAll(
".theme-selector-tab-content"
);
tabContents.forEach((content) => {
content.classList.remove("active");
});
const tabs = document.querySelectorAll(".theme-selector-tab");
tabs.forEach((tab) => {
tab.classList.remove("active");
});
const selectedTab = document.getElementById(`tab-${tabId}`);
const selectedContent = document.getElementById(`tab-content-${tabId}`);
if (selectedTab) {
selectedTab.classList.add("active");
}
if (selectedContent) {
selectedContent.classList.add("active");
}
},
createThemeSelectorUI(options) {
const optionsHTML = `
<div class="theme-selector-container">
<div class="theme-selector-header">
<p>Select a theme from the dropdown and apply it to change the site's appearance.</p>
</div>
<div class="theme-selector-tabs">
<div id="tab-themes" class="theme-selector-tab active">Themes</div>
<div id="tab-settings" class="theme-selector-tab">Settings</div>
</div>
<div id="tab-content-themes" class="theme-selector-tab-content active">
<input type="text" id="theme-search" class="theme-selector-search" placeholder="Search themes...">
<select id="external-theme-select" style="width: 100%; margin-bottom: 5px;"></select>
<div class="theme-selector-row">
<button id="preview-external-theme" class="theme-selector-button">Preview</button>
<button id="apply-external-theme" class="theme-selector-button">Apply Theme</button>
</div>
<button id="cancel-preview" class="theme-selector-full-button" style="display: none;">Cancel Preview</button>
<button id="reset-external-theme" class="theme-selector-full-button">Reset to Default</button>
<div id="theme-info" class="theme-selector-info" style="display: none;"></div>
</div>
<div id="tab-content-settings" class="theme-selector-tab-content">
<h3>Theme Settings</h3>
<div class="theme-selector-row">
<button id="refresh-themes" class="theme-selector-full-button">Refresh Theme List</button>
</div>
<div class="theme-selector-row">
<button id="export-theme-settings" class="theme-selector-button">Export Settings</button>
<button id="import-theme-settings" class="theme-selector-button">Import Settings</button>
</div>
<input type="file" id="import-file" style="display: none;" accept=".json">
<div style="margin-top: 20px;">
<h4>Theme Repositories</h4>
<p>Manage repositories to fetch themes from.</p>
<div style="margin-bottom: 10px;">
<input type="text" id="repo-name" placeholder="Repository Name" style="width: 100%; margin-bottom: 5px; padding: 5px;">
<input type="text" id="repo-api-url" placeholder="GitHub API URL (e.g., https://api.github.com/repos/user/repo/contents/path)" style="width: 100%; margin-bottom: 5px; padding: 5px;">
<input type="text" id="repo-base-path" placeholder="Base Path (e.g., https://raw.githubusercontent.com/user/repo/branch/path/)" style="width: 100%; margin-bottom: 5px; padding: 5px;">
<button id="add-repo-btn" class="theme-selector-full-button">Add Repository</button>
</div>
<div id="repos-list" style="margin-top: 10px; max-height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 5px;"></div>
<button id="reset-repos-btn" class="theme-selector-full-button" style="margin-top: 10px;">Reset to Default Repositories</button>
</div>
<div style="margin-top: 20px;">
<h4>Cache Information</h4>
<div id="cache-info"></div>
</div>
</div>
<div id="theme-status" class="theme-selector-status"></div>
</div>
`;
options.insertAdjacentHTML("beforeend", optionsHTML);
this.updateCacheInfo();
this.updateReposList();
this.populateThemeSelect();
this.setupEventListeners();
},
setupEventListeners() {
const select = document.getElementById("external-theme-select");
const searchInput = document.getElementById("theme-search");
const previewButton = document.getElementById("preview-external-theme");
const cancelPreviewButton = document.getElementById("cancel-preview");
const applyButton = document.getElementById("apply-external-theme");
const resetButton = document.getElementById("reset-external-theme");
const refreshButton = document.getElementById("refresh-themes");
const exportButton = document.getElementById("export-theme-settings");
const importButton = document.getElementById("import-theme-settings");
const importFile = document.getElementById("import-file");
const tabElements = document.querySelectorAll(".theme-selector-tab");
const addRepoBtn = document.getElementById("add-repo-btn");
const resetReposBtn = document.getElementById("reset-repos-btn");
if (select) {
select.addEventListener("change", () => {
this.updateThemeInfo();
});
}
if (searchInput) {
searchInput.addEventListener("input", (e) => {
this.filterThemes(e.target.value);
});
}
if (previewButton) {
previewButton.addEventListener("click", () => {
const selectedTheme = select?.value;
if (selectedTheme) {
themeManager.previewTheme(selectedTheme);
if (cancelPreviewButton) {
cancelPreviewButton.style.display = "block";
}
} else {
this.showToast("Please select a theme first", "warning");
}
});
}
if (cancelPreviewButton) {
cancelPreviewButton.addEventListener("click", () => {
themeManager.cancelPreview();
cancelPreviewButton.style.display = "none";
});
}
if (applyButton) {
applyButton.addEventListener("click", () => {
const selectedTheme = select?.value;
if (selectedTheme) {
themeManager.applyTheme(selectedTheme);
if (cancelPreviewButton) {
cancelPreviewButton.style.display = "none";
}
} else {
this.showToast("Please select a theme first", "warning");
}
});
}
if (resetButton) {
resetButton.addEventListener("click", () => {
themeManager.resetTheme();
if (cancelPreviewButton) {
cancelPreviewButton.style.display = "none";
}
});
}
if (refreshButton) {
refreshButton.addEventListener("click", async () => {
const statusElement = document.getElementById("theme-status");
if (statusElement) {
statusElement.textContent = "Refreshing theme list...";
}
await themeManager.getThemes(true);
await this.populateThemeSelect();
this.updateCacheInfo();
if (statusElement) {
statusElement.textContent = "Theme list refreshed.";
}
this.showToast("Theme list refreshed", "info");
});
}
if (exportButton) {
exportButton.addEventListener("click", settingsManager.exportSettings);
}
if (importButton && importFile) {
importButton.addEventListener("click", () => {
importFile.click();
});
importFile.addEventListener("change", (e) => {
if (e.target.files && e.target.files.length > 0) {
settingsManager.importSettings(e.target.files[0]);
e.target.value = "";
}
});
}
if (addRepoBtn) {
addRepoBtn.addEventListener("click", () => {
const nameInput = document.getElementById("repo-name");
const apiUrlInput = document.getElementById("repo-api-url");
const basePathInput = document.getElementById("repo-base-path");
if (!nameInput || !apiUrlInput || !basePathInput) return;
const name = nameInput.value.trim();
const apiUrl = apiUrlInput.value.trim();
const basePath = basePathInput.value.trim();
if (!name || !apiUrl || !basePath) {
this.showToast("Please fill in all repository fields", "error");
return;
}
if (repoManager.add(name, apiUrl, basePath)) {
nameInput.value = "";
apiUrlInput.value = "";
basePathInput.value = "";
const refreshThemesBtn = document.getElementById("refresh-themes");
if (refreshThemesBtn) {
refreshThemesBtn.click();
}
}
});
}
if (resetReposBtn) {
resetReposBtn.addEventListener("click", () => {
if (repoManager.resetToDefault()) {
const refreshThemesBtn = document.getElementById("refresh-themes");
if (refreshThemesBtn) {
refreshThemesBtn.click();
}
}
});
}
tabElements.forEach((tab) => {
tab.addEventListener("click", () => {
const tabId = tab.id.replace("tab-", "");
this.switchTab(tabId);
});
});
}
};
async function init() {
console.log("Initializing Soyjak Theme Selector");
uiHelper.addStyles();
try {
const themes = await themeManager.getThemes();
console.log(`Loaded ${Object.keys(themes).length} themes`);
const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME);
const savedCss = localStorage.getItem(STORAGE_KEYS.USER_CSS);
if (savedCss && !state.initialThemeApplied) {
const styleElement = document.createElement("style");
styleElement.id = "applied-theme-style";
styleElement.textContent = savedCss;
document.head.appendChild(styleElement);
state.initialThemeApplied = true;
console.log("Applied saved CSS from localStorage");
} else if (savedTheme && themes[savedTheme] && !state.initialThemeApplied) {
console.log(`Found saved theme: ${savedTheme}`);
state.initialThemeApplied = true;
await themeManager.applyTheme(savedTheme, true, true);
}
} catch (error) {
console.error("Error during initialization:", error);
}
let checkAttempts = 0;
const maxAttempts = 100;
const checkInterval = setInterval(() => {
checkAttempts++;
if (typeof Options !== "undefined") {
clearInterval(checkInterval);
console.log("Options object found, adding theme selector tab");
try {
let options = Options.add_tab(
"external-themes",
"css3",
"External Themes"
).content[0];
uiHelper.createThemeSelectorUI(options);
} catch (error) {
console.error("Error creating theme selector UI:", error);
}
}
if (checkAttempts >= maxAttempts) {
clearInterval(checkInterval);
console.log("Stopped checking for Options object (timeout)");
}
}, 100);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();