-
Total Credits: {currentSubjects?.total_credits || 0}
+
+
+ Total Credits
+
+
+ {currentSubjects?.total_credits || 0}
+
+
{subjectsLoading ? (
-
+
Loading subjects...
) : (
-
- {Object.values(groupedSubjects).map((subject) => (
-
+
+ {Object.values(groupedSubjects).map((subject, idx, arr) => (
+
+
+ {!useCardBackgrounds && idx < arr.length - 1 && (
+
+ )}
+
))}
)}
);
-}
\ No newline at end of file
+}
diff --git a/jportal/src/components/ThemeProvider.jsx b/jportal/src/components/ThemeProvider.jsx
new file mode 100644
index 0000000..99bba5b
--- /dev/null
+++ b/jportal/src/components/ThemeProvider.jsx
@@ -0,0 +1,415 @@
+import React, {
+ createContext,
+ useContext,
+ useState,
+ useEffect,
+ useRef,
+} from "react";
+import {
+ ThemeProvider as MuiThemeProvider,
+ createTheme,
+ CssBaseline,
+} from "@mui/material";
+
+const themes = {
+ darkBlue: {
+ "--bg-color": "#191c20", // main background color (from App.jsx, Attendance.jsx, etc.)
+ "--primary-color": "#232e39", // used for cards, tabs, and primary UI elements
+ "--accent-color": "#7ec3f0", // accent (matches previous, could be #60A5FA or #3182ce for blue highlights)
+ "--text-color": "#ffffff", // main text color (text-white)
+ "--card-bg": "#1b232b", // card background (close to #191c20, but slightly lighter for contrast)
+ "--label-color": "#9CA3AF", // label/secondary text (text-gray-400 from Grades, etc.)
+ "--radius": "8px", // border radius
+ },
+ white: {
+ "--bg-color": "#ffffff",
+ "--primary-color": "#f1f5f9",
+ "--accent-color": "#3182ce",
+ "--text-color": "#191c20",
+ "--card-bg": "#f8fafc",
+ "--label-color": "#555",
+ "--radius": "8px",
+ },
+ cream: {
+ "--bg-color": "#fdf6e3",
+ "--primary-color": "#f5e9da",
+ "--accent-color": "#A47551",
+ "--text-color": "#3b2f1e",
+ "--card-bg": "#f7f1e1",
+ "--label-color": "#555",
+ "--radius": "8px",
+ },
+ amoled: {
+ "--bg-color": "#000000",
+ "--primary-color": "#111111",
+ "--accent-color": "#00bcd4",
+ "--text-color": "#e0e6ed",
+ "--card-bg": "#181818",
+ "--label-color": "#b0b3b8",
+ "--radius": "8px",
+ },
+};
+
+const defaultCustomTheme = {
+ label: "Orange Dark",
+ colors: {
+ "--bg-color": "#000",
+ "--primary-color": "#ff8c42",
+ "--accent-color": "#fb923c",
+ "--text-color": "#fef7ed",
+ "--card-bg": "#23201c",
+ "--label-color": "#fed7aa",
+ "--radius": "8px",
+ },
+};
+
+const ThemeContext = createContext({
+ theme: "darkBlue",
+ setTheme: () => {},
+ radius: 8,
+ setRadius: () => {},
+ useMaterialUI: false,
+ setUseMaterialUI: () => {},
+ useCardBackgrounds: true,
+ setUseCardBackgrounds: () => {},
+ customThemes: [defaultCustomTheme],
+ setCustomThemes: () => {},
+ selectedCustomTheme: 0,
+ setSelectedCustomTheme: () => {},
+ setCustomThemeColors: () => {},
+ setCustomThemeLabel: () => {},
+ deleteCustomTheme: () => {},
+ addCustomTheme: () => {},
+});
+
+const SystemColorModeContext = createContext({
+ systemColorMode: "dark", // "dark" or "light"
+});
+
+export const useTheme = () => useContext(ThemeContext);
+export const useSystemColorMode = () => useContext(SystemColorModeContext);
+
+export const ThemeProvider = ({ children }) => {
+ // System color mode detection
+ const getSystemColorMode = () =>
+ window.matchMedia &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? "dark"
+ : "light";
+ const [systemColorMode, setSystemColorMode] = useState(getSystemColorMode());
+
+ // Track if user has chosen a theme (not just default)
+ const userHasChosenThemeRef = useRef(false);
+
+ // --- Theme state ---
+ const [theme, setThemeState] = useState(() => {
+ const saved = localStorage.getItem("theme");
+ if (saved && (themes[saved] || saved === "custom")) {
+ userHasChosenThemeRef.current = true;
+ return saved;
+ }
+ // No saved theme: use system color mode
+ return getSystemColorMode() === "dark" ? "darkBlue" : "cream";
+ });
+ const [radius, setRadius] = useState(() => {
+ const saved = localStorage.getItem("radius");
+ return saved ? Number(saved) : 8;
+ });
+ const [useMaterialUI, setUseMaterialUI] = useState(() => {
+ const saved = localStorage.getItem("useMaterialUI");
+ return saved === "true";
+ });
+ const [useCardBackgrounds, setUseCardBackgrounds] = useState(() => {
+ const saved = localStorage.getItem("useCardBackgrounds");
+ return saved === null ? true : saved === "true";
+ });
+ const [customThemes, setCustomThemes] = useState(() => {
+ const saved = localStorage.getItem("customThemes");
+ return saved ? JSON.parse(saved) : [defaultCustomTheme];
+ });
+ const [selectedCustomTheme, setSelectedCustomTheme] = useState(() => {
+ const saved = localStorage.getItem("selectedCustomTheme");
+ return saved ? Number(saved) : 0;
+ });
+
+ // Helper to update colors of a custom theme
+ const setCustomThemeColors = (colors) => {
+ setCustomThemes((themes) => {
+ const updated = [...themes];
+ updated[selectedCustomTheme] = {
+ ...updated[selectedCustomTheme],
+ colors: { ...updated[selectedCustomTheme].colors, ...colors },
+ };
+ return updated;
+ });
+ };
+
+ // Helper to update label of a custom theme
+ const setCustomThemeLabel = (label) => {
+ setCustomThemes((themes) => {
+ const updated = [...themes];
+ updated[selectedCustomTheme] = {
+ ...updated[selectedCustomTheme],
+ label,
+ };
+ return updated;
+ });
+ };
+
+ // Helper to delete a custom theme
+ const deleteCustomTheme = (idx) => {
+ setCustomThemes((themes) => {
+ const updated = themes.filter((_, i) => i !== idx);
+ // If deleted theme is selected, select first or previous
+ if (selectedCustomTheme >= updated.length) {
+ setSelectedCustomTheme(Math.max(0, updated.length - 1));
+ }
+ return updated.length ? updated : [defaultCustomTheme];
+ });
+ };
+
+ // Helper to add a new custom theme
+ const addCustomTheme = (label = "New Custom Theme") => {
+ setCustomThemes((themes) => {
+ const updated = [
+ ...themes,
+ { label, colors: { ...defaultCustomTheme.colors } },
+ ];
+ setSelectedCustomTheme(updated.length - 1);
+ return updated;
+ });
+ setTheme("custom");
+ };
+
+ // Patch setTheme to mark user choice
+ const setTheme = (val) => {
+ userHasChosenThemeRef.current = true;
+ setThemeState(val);
+ };
+
+ // Listen for system color mode changes
+ useEffect(() => {
+ const mql = window.matchMedia("(prefers-color-scheme: dark)");
+ const handleChange = (e) => {
+ const newMode = e.matches ? "dark" : "light";
+ setSystemColorMode(newMode);
+ // Only auto-switch if user hasn't chosen a theme (not custom)
+ const saved = localStorage.getItem("theme");
+ if (
+ !userHasChosenThemeRef.current &&
+ (!saved || saved === "darkBlue" || saved === "cream")
+ ) {
+ setThemeState(newMode === "dark" ? "darkBlue" : "cream");
+ }
+ };
+ mql.addEventListener
+ ? mql.addEventListener("change", handleChange)
+ : mql.addListener(handleChange);
+ return () => {
+ mql.removeEventListener
+ ? mql.removeEventListener("change", handleChange)
+ : mql.removeListener(handleChange);
+ };
+ }, []);
+
+ useEffect(() => {
+ let themeVars;
+ let isLightTheme = false;
+ if (theme === "custom") {
+ const custom = customThemes[selectedCustomTheme] || defaultCustomTheme;
+ isLightTheme = !!custom.isLightTheme;
+ themeVars = { ...custom.colors, "--radius": radius + "px" };
+ } else {
+ isLightTheme = theme === "cream" || theme === "white";
+ themeVars = { ...themes[theme], "--radius": radius + "px" };
+ }
+ Object.entries(themeVars).forEach(([key, value]) => {
+ document.documentElement.style.setProperty(key, value);
+ });
+ localStorage.setItem("theme", theme);
+ localStorage.setItem("radius", radius);
+ localStorage.setItem("useMaterialUI", useMaterialUI);
+ localStorage.setItem("useCardBackgrounds", useCardBackgrounds);
+ localStorage.setItem("customThemes", JSON.stringify(customThemes));
+ localStorage.setItem("selectedCustomTheme", selectedCustomTheme);
+ }, [
+ theme,
+ radius,
+ useMaterialUI,
+ customThemes,
+ selectedCustomTheme,
+ useCardBackgrounds,
+ ]);
+
+ // Helper: Convert CSS variable theme to MUI theme
+ const getMuiTheme = () => {
+ let themeVars;
+ if (theme === "custom") {
+ const custom = customThemes[selectedCustomTheme] || defaultCustomTheme;
+ themeVars = { ...custom.colors, "--radius": radius + "px" };
+ } else {
+ themeVars = { ...themes[theme], "--radius": radius + "px" };
+ }
+ // Parse colors for MUI palette
+ return createTheme({
+ palette: {
+ mode:
+ theme === "white" ||
+ theme === "cream" ||
+ (theme === "custom" &&
+ customThemes[selectedCustomTheme]?.isLightTheme)
+ ? "light"
+ : "dark",
+ background: {
+ default: themeVars["--bg-color"],
+ paper: themeVars["--card-bg"],
+ },
+ primary: {
+ main: themeVars["--accent-color"],
+ contrastText: themeVars["--bg-color"],
+ },
+ secondary: {
+ main: themeVars["--primary-color"],
+ },
+ text: {
+ primary: themeVars["--text-color"],
+ secondary: themeVars["--label-color"],
+ },
+ },
+ shape: {
+ borderRadius: parseInt(themeVars["--radius"]),
+ },
+ components: {
+ MuiPaper: {
+ styleOverrides: {
+ root: {
+ background: themeVars["--card-bg"],
+ color: themeVars["--text-color"],
+ },
+ },
+ },
+ MuiInputBase: {
+ styleOverrides: {
+ root: {
+ background: themeVars["--card-bg"],
+ color: themeVars["--text-color"],
+ borderRadius: themeVars["--radius"],
+ },
+ input: {
+ color: themeVars["--text-color"],
+ },
+ },
+ },
+ MuiOutlinedInput: {
+ styleOverrides: {
+ root: {
+ background: themeVars["--card-bg"],
+ color: themeVars["--text-color"],
+ borderRadius: themeVars["--radius"],
+ },
+ notchedOutline: {
+ borderColor: themeVars["--label-color"],
+ },
+ },
+ },
+ MuiInputLabel: {
+ styleOverrides: {
+ root: {
+ color: themeVars["--label-color"],
+ },
+ },
+ },
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ borderRadius: themeVars["--radius"],
+ fontWeight: 500,
+ },
+ },
+ },
+ MuiMenu: {
+ styleOverrides: {
+ paper: {
+ background: themeVars["--card-bg"],
+ color: themeVars["--text-color"],
+ borderRadius: themeVars["--radius"],
+ },
+ },
+ },
+ MuiMenuItem: {
+ styleOverrides: {
+ root: {
+ color: themeVars["--text-color"],
+ borderRadius: themeVars["--radius"],
+ },
+ },
+ },
+ MuiSelect: {
+ styleOverrides: {
+ select: {
+ background: themeVars["--card-bg"],
+ color: themeVars["--text-color"],
+ borderRadius: themeVars["--radius"],
+ },
+ icon: {
+ color: themeVars["--label-color"],
+ },
+ },
+ },
+ MuiSwitch: {
+ styleOverrides: {
+ switchBase: {
+ color: themeVars["--accent-color"],
+ },
+ colorPrimary: {
+ color: themeVars["--accent-color"],
+ },
+ track: {
+ backgroundColor: themeVars["--accent-color"],
+ },
+ },
+ },
+ },
+ });
+ };
+
+ const muiTheme = getMuiTheme();
+
+ return (
+
+
+
+
+ {children}
+
+
+
+ );
+};
diff --git a/jportal/src/components/ThemeSwitcher.jsx b/jportal/src/components/ThemeSwitcher.jsx
new file mode 100644
index 0000000..0c2bbe7
--- /dev/null
+++ b/jportal/src/components/ThemeSwitcher.jsx
@@ -0,0 +1,991 @@
+import React, { useState, useEffect } from "react";
+import { useTheme } from "./ThemeProvider";
+import { useSystemColorMode } from "./ThemeProvider";
+import {
+ Dialog,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import {
+ Check,
+ Palette,
+ Download,
+ Upload,
+ Plus,
+ X,
+ Settings,
+ Users,
+ RefreshCw,
+ Star,
+} from "lucide-react";
+import { useSwipeable } from "react-swipeable";
+import MuiSwitch from "@mui/material/Switch";
+import { useNavigate, useLocation } from "react-router-dom";
+
+const options = [
+ { value: "darkBlue", label: "Dark Blue", color: "#141c23", text: "#eaf6fb" },
+ { value: "white", label: "White", color: "#fff", text: "#191c20" },
+ { value: "cream", label: "Cream", color: "#fdf6e3", text: "#3b2f1e" },
+ { value: "amoled", label: "AMOLED Black", color: "#000", text: "#e0e6ed" },
+ { value: "custom", label: "Custom", color: null, text: null },
+];
+
+const customColorFields = [
+ { key: "--bg-color", label: "Background" },
+ { key: "--primary-color", label: "Primary" },
+ { key: "--accent-color", label: "Accent" },
+ { key: "--text-color", label: "Text" },
+ { key: "--card-bg", label: "Card" },
+ { key: "--label-color", label: "Label" },
+];
+
+const configKeyMap = {
+ theme: "THEME",
+ radius: "RADIUS",
+ useMaterialUI: "USE_MATERIAL_UI",
+ "--bg-color": "BG_COLOR",
+ "--primary-color": "PRIMARY_COLOR",
+ "--accent-color": "ACCENT_COLOR",
+ "--text-color": "TEXT_COLOR",
+ "--card-bg": "CARD_BG",
+ "--label-color": "LABEL_COLOR",
+ isLightTheme: "LIGHT_THEME",
+};
+
+const reverseConfigKeyMap = Object.fromEntries(
+ Object.entries(configKeyMap).map(([k, v]) => [v, k])
+);
+
+function getContrastColor(bg) {
+ if (!bg) return "#222";
+ const c = bg.charAt(0) === "#" ? bg.substring(1) : bg;
+ const rgb = parseInt(
+ c.length === 3
+ ? c
+ .split("")
+ .map((x) => x + x)
+ .join("")
+ : c,
+ 16
+ );
+ const r = (rgb >> 16) & 255,
+ g = (rgb >> 8) & 255,
+ b = rgb & 255;
+ const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+ return luminance > 180 ? "#222" : "#fff";
+}
+
+function exportThemeConfig({
+ theme,
+ customColors,
+ radius,
+ useMaterialUI,
+ isLightTheme,
+}) {
+ const lines = [];
+ lines.push(`${configKeyMap.theme}=${theme}`);
+ lines.push(`${configKeyMap.radius}=${radius}`);
+ lines.push(`${configKeyMap.useMaterialUI}=${useMaterialUI}`);
+ if (typeof isLightTheme !== "undefined") {
+ lines.push(`${configKeyMap.isLightTheme}=${isLightTheme}`);
+ }
+ if (theme === "custom") {
+ Object.entries(customColors).forEach(([cssVar, value]) => {
+ if (configKeyMap[cssVar]) {
+ lines.push(`${configKeyMap[cssVar]}=${value}`);
+ }
+ });
+ }
+ return lines.join("\n");
+}
+
+// Export all custom themes in a sectioned format
+function exportAllCustomThemes(customThemes) {
+ const lines = [];
+ customThemes.forEach((theme) => {
+ lines.push(`[THEME ${theme.label}]`);
+ if (typeof theme.isLightTheme !== "undefined") {
+ lines.push(`${configKeyMap.isLightTheme}=${theme.isLightTheme}`);
+ }
+ Object.entries(theme.colors).forEach(([cssVar, value]) => {
+ if (configKeyMap[cssVar]) {
+ lines.push(`${configKeyMap[cssVar]}=${value}`);
+ }
+ });
+ lines.push("");
+ });
+ return lines.join("\n");
+}
+
+function importThemeConfig(configText) {
+ const lines = configText.split(/\r?\n/);
+ const result = {};
+ for (const line of lines) {
+ const trimmed = line.trim();
+ if (!trimmed || trimmed.startsWith("#")) continue;
+ const [key, ...rest] = trimmed.split("=");
+ if (!key || rest.length === 0) continue;
+ const value = rest.join("=");
+ const mapped = reverseConfigKeyMap[key];
+ if (mapped) {
+ result[mapped] = value;
+ }
+ }
+ // If isLightTheme is missing, default to false (dark)
+ if (typeof result.isLightTheme === "undefined") {
+ result.isLightTheme = false;
+ } else {
+ result.isLightTheme = result.isLightTheme === "true";
+ }
+ return result;
+}
+
+// Import multiple custom themes from sectioned config
+function importAllCustomThemes(configText) {
+ const lines = configText.split(/\r?\n/);
+ const themes = [];
+ let current = null;
+ for (const line of lines) {
+ const trimmed = line.trim();
+ if (!trimmed) continue;
+ if (trimmed.startsWith("[THEME ") && trimmed.endsWith("]")) {
+ if (current) themes.push(current);
+ const label = trimmed.slice(7, -1).trim();
+ current = { label, colors: {}, isLightTheme: false };
+ } else if (current && trimmed.includes("=")) {
+ const [key, ...rest] = trimmed.split("=");
+ const value = rest.join("=");
+ const mapped = reverseConfigKeyMap[key];
+ if (mapped && mapped.startsWith("--")) {
+ current.colors[mapped] = value;
+ } else if (mapped === "isLightTheme") {
+ current.isLightTheme = value === "true";
+ }
+ }
+ }
+ if (current) themes.push(current);
+ return themes;
+}
+
+// Function to fetch user-contributed themes
+async function fetchUserThemes() {
+ try {
+ console.log("Fetching theme list from /jportal/api/themes.json...");
+
+ // Fetch the list of available theme files from the static manifest
+ const response = await fetch("/jportal/api/themes.json");
+ if (!response.ok) {
+ throw new Error(
+ `Failed to fetch theme list: ${response.status} ${response.statusText}`
+ );
+ }
+
+ const { themes } = await response.json();
+ console.log("Available theme files:", themes);
+
+ const allThemes = [];
+
+ // Fetch each theme file
+ for (const themeFile of themes) {
+ try {
+ console.log(`Fetching theme file: ${themeFile.url}`);
+ const fileResponse = await fetch(themeFile.url);
+
+ if (!fileResponse.ok) {
+ console.error(
+ `Failed to fetch ${themeFile.filename}: ${fileResponse.status} ${fileResponse.statusText}`
+ );
+ continue;
+ }
+
+ const text = await fileResponse.text();
+ console.log(
+ `Content of ${themeFile.filename}:`,
+ text.substring(0, 200) + "..."
+ );
+
+ const parsedThemes = importAllCustomThemes(text);
+ console.log(
+ `Parsed ${parsedThemes.length} themes from ${themeFile.filename}:`,
+ parsedThemes
+ );
+
+ // Add metadata to each theme
+ parsedThemes.forEach((theme) => {
+ allThemes.push({
+ ...theme,
+ author: themeFile.author,
+ source: themeFile.filename,
+ isCommunity: true,
+ });
+ });
+ } catch (error) {
+ console.error(`Error fetching ${themeFile.filename}:`, error);
+ }
+ }
+
+ console.log("Total themes loaded:", allThemes.length);
+ return allThemes;
+ } catch (error) {
+ console.error("Error fetching user themes:", error);
+ return [];
+ }
+}
+
+// Function to fetch all available theme files
+async function fetchAllUserThemeFiles() {
+ return await fetchUserThemes();
+}
+
+export default function ThemeSwitcher() {
+ const {
+ theme,
+ setTheme,
+ radius,
+ setRadius,
+ useMaterialUI,
+ setUseMaterialUI,
+ customThemes,
+ setCustomThemes,
+ selectedCustomTheme,
+ setSelectedCustomTheme,
+ setCustomThemeColors,
+ setCustomThemeLabel,
+ deleteCustomTheme,
+ addCustomTheme,
+ useCardBackgrounds,
+ setUseCardBackgrounds,
+ } = useTheme();
+ const { systemColorMode } = useSystemColorMode();
+ const [renamingIdx, setRenamingIdx] = useState(null);
+ const [renameValue, setRenameValue] = useState("");
+ const [userThemes, setUserThemes] = useState([]);
+ const [isLoadingUserThemes, setIsLoadingUserThemes] = useState(false);
+ const [activeTab, setActiveTab] = useState("builtin"); // "builtin", "custom", "community"
+ const [showAddThemeInput, setShowAddThemeInput] = useState(false);
+ const [newThemeName, setNewThemeName] = useState("");
+ const radiusOptions = [0, 4, 8, 12, 16, 24];
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ // Tab order for swiping
+ const tabOrder = ["builtin", "custom", "community"];
+
+ // Swipe handlers
+ const swipeHandlers = useSwipeable({
+ onSwipedLeft: () => {
+ const currentIndex = tabOrder.indexOf(activeTab);
+ if (currentIndex < tabOrder.length - 1) {
+ setActiveTab(tabOrder[currentIndex + 1]);
+ }
+ },
+ onSwipedRight: () => {
+ const currentIndex = tabOrder.indexOf(activeTab);
+ if (currentIndex > 0) {
+ setActiveTab(tabOrder[currentIndex - 1]);
+ }
+ },
+ preventDefaultTouchmoveEvent: true,
+ trackMouse: true,
+ delta: 50, // Minimum swipe distance
+ swipeDuration: 500, // Maximum swipe duration
+ });
+
+ // Load user themes on component mount
+ useEffect(() => {
+ loadUserThemes();
+ }, []);
+
+ const loadUserThemes = async () => {
+ setIsLoadingUserThemes(true);
+ try {
+ const themes = await fetchAllUserThemeFiles();
+ setUserThemes(themes);
+ } catch (error) {
+ console.error("Error loading user themes:", error);
+ } finally {
+ setIsLoadingUserThemes(false);
+ }
+ };
+
+ // Helper for color picker contrast
+ const getPickerBorder = (color) => {
+ const contrast = getContrastColor(color);
+ return contrast === "#fff" ? "#222" : "#fff";
+ };
+
+ // Helper for current custom theme
+ const currentCustom = customThemes[selectedCustomTheme] || customThemes[0];
+
+ return (
+
+ {/* Back Button */}
+
+ {location.pathname === "/settings" && (
+
+ )}
+
+ Theme Settings
+
+
+
+
+ System color mode:{" "}
+ {systemColorMode}
+
+
+ {/* Tab Navigation */}
+
+
+
+
+
+
+ {/* Swipe indicator */}
+
+ {tabOrder.map((tab, index) => (
+
+ ))}
+
+
+ {/* Built-in Themes */}
+ {activeTab === "builtin" && (
+
+
+
+ {options.map((opt) => {
+ if (opt.value === "custom" && theme !== "custom") {
+ return null;
+ }
+ const isSelected = theme === opt.value;
+ const labelColor = getContrastColor(opt.color);
+ return (
+
+ );
+ })}
+
+
+ )}
+
+ {/* Custom Themes Management */}
+ {activeTab === "custom" && (
+
+
+
+ {showAddThemeInput ? (
+
+
setNewThemeName(e.target.value)}
+ onBlur={() => setShowAddThemeInput(false)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && newThemeName.trim()) {
+ addCustomTheme(newThemeName.trim());
+ setShowAddThemeInput(false);
+ setNewThemeName("");
+ }
+ }}
+ />
+
+
+ ) : (
+
+ )}
+
+
+
+ {customThemes.map((ct, idx) => (
+
+
+ ))}
+
+
+ {/* Color Customization */}
+
+
+
+ {customColorFields.map(({ key, label }) => (
+
+
+
+ {
+ setCustomThemeColors({ [key]: e.target.value });
+ }}
+ className="w-8 h-8 rounded-lg border-2 border-[var(--border-color)] cursor-pointer transition-all duration-200 hover:border-[var(--accent-color)] focus:border-[var(--accent-color)] focus:outline-none"
+ style={{
+ background: "none",
+ }}
+ aria-label={`Pick ${label} color`}
+ />
+
+ {currentCustom.colors[key]}
+
+
+
+ ))}
+
+
+
+ {/* Theme Type */}
+
+
+
+ {
+ setCustomThemes((themes) => {
+ const updated = [...themes];
+ updated[selectedCustomTheme] = {
+ ...updated[selectedCustomTheme],
+ isLightTheme: e.target.checked,
+ };
+ return updated;
+ });
+ }}
+ className="w-4 h-4 accent-[var(--accent-color)] rounded border-[var(--border-color)] focus:ring-2 focus:ring-[var(--accent-color)] focus:ring-offset-2"
+ id="light-theme-toggle"
+ />
+
+
+
+
+ {/* Import/Export */}
+
+
+
+
+
+
+ )}
+
+ {/* Community Themes */}
+ {activeTab === "community" && (
+
+
+
+
+
+
+ {isLoadingUserThemes ? (
+
+
+
+ Loading themes...
+
+
+ ) : userThemes.length > 0 ? (
+
+ {userThemes.map((userTheme, idx) => (
+
+
+
+
+
+
+ {userTheme.label}
+
+
+
+
+ by {userTheme.author} • {userTheme.source}
+
+
+
+
+
+
+
+
+ ))}
+
+ ) : (
+
+
+
+ No community themes available
+
+
+ Community themes will appear here when available
+
+
+ )}
+
+
+
+
+
+
Want to contribute?
+
+ Create theme configs following the naming convention:
+
+
+
+ yourname-jportal-theme.config
+
+
+ yourname-jportal-themes.config
+
+
+
+
+
+
+ )}
+
+ {/* Corner Radius */}
+
+
+
+
+ {radius}px
+
+
+
+ setRadius(Number(e.target.value))}
+ className="slider flex-1"
+ />
+
+
+
+ {/* Material UI Toggle */}
+
+
+
+
+
+
+
setUseMaterialUI(checked)}
+ id="mui-toggle"
+ sx={{
+ color: "var(--accent-color)",
+ "&.Mui-checked": {
+ color: "var(--accent-color)",
+ },
+ "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
+ backgroundColor: "var(--accent-color)",
+ },
+ }}
+ />
+
+
+
+
+
+
+
setUseCardBackgrounds(checked)}
+ id="card-bg-toggle"
+ sx={{
+ color: "var(--accent-color)",
+ "&.Mui-checked": {
+ color: "var(--accent-color)",
+ },
+ "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
+ backgroundColor: "var(--accent-color)",
+ },
+ }}
+ />
+
+
+
+
+
+ );
+}
diff --git a/jportal/src/components/ui/Toast.jsx b/jportal/src/components/ui/Toast.jsx
new file mode 100644
index 0000000..93f2432
--- /dev/null
+++ b/jportal/src/components/ui/Toast.jsx
@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from "react";
+
+const Toast = ({
+ message,
+ progress,
+ total,
+ type = "info",
+ duration = 3000,
+ onClose,
+ loadedList = [],
+ pendingList = [],
+ noAttendanceList = [],
+}) => {
+ const [visible, setVisible] = useState(true);
+ const [expanded, setExpanded] = useState(false);
+
+ useEffect(() => {
+ if (duration !== null && !expanded) {
+ const timer = setTimeout(() => {
+ setVisible(false);
+ if (onClose) onClose();
+ }, duration);
+ return () => clearTimeout(timer);
+ }
+ }, [duration, onClose, expanded]);
+
+ if (!visible) return null;
+
+ let bg = "bg-[var(--card-bg)]";
+ let border = "border-l-4 border-[var(--accent-color)]";
+ let text = "text-[var(--text-color)]";
+ if (type === "success") border = "border-l-4 border-green-500";
+ if (type === "error") border = "border-l-4 border-red-500";
+
+ const isClickable = loadedList.length > 0 || pendingList.length > 0;
+
+ return (
+
setExpanded((e) => !e) : undefined}
+ title={isClickable ? "Click to see details" : undefined}
+ >
+
+ {message}
+ {isClickable && (
+
+ ▶
+
+ )}
+
+ {typeof progress === "number" && typeof total === "number" && (
+
+ )}
+ {expanded && (
+
+ {loadedList.length > 0 && (
+
+
+ Loaded
+
+
+ {loadedList.map((name) => (
+ -
+ {name}
+
+ ))}
+
+
+ )}
+ {pendingList.length > 0 && (
+
+
+ Pending
+
+
+ {pendingList.map((name) => (
+ -
+ {name}
+
+ ))}
+
+
+ )}
+ {noAttendanceList.length > 0 && (
+
+
+ No Attendance
+
+
+ {noAttendanceList.map((name) => (
+ -
+ {name}
+
+ ))}
+
+
+ )}
+
+ )}
+
+
+ );
+};
+
+export default Toast;
diff --git a/jportal/src/components/ui/TopTabsBar.jsx b/jportal/src/components/ui/TopTabsBar.jsx
new file mode 100644
index 0000000..9243e71
--- /dev/null
+++ b/jportal/src/components/ui/TopTabsBar.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { TabsList } from "./tabs";
+import { cn } from "@/lib/utils";
+
+/**
+ * TopTabsBar - A wrapper for TabsList that applies the correct top border radius and layout.
+ * Also enforces a smaller font size for all tab triggers inside.
+ * @param {object} props
+ * @param {string} [props.className] - Additional classes
+ * @param {string} [props.orientation] - 'vertical' (sidebar) or 'horizontal' (top bar)
+ * @param {React.ReactNode} props.children - Tab triggers
+ * @returns {JSX.Element}
+ */
+export default function TopTabsBar({
+ className = "",
+ orientation = "horizontal",
+ children,
+ ...props
+}) {
+ const base =
+ orientation === "vertical"
+ ? "bg-[var(--card-bg)] rounded-[var(--radius)] shadow-xl overflow-hidden"
+ : "bg-[var(--primary-color)] rounded-t-[var(--radius)] overflow-hidden";
+ return (
+
+ {children}
+
+ );
+}
diff --git a/jportal/src/components/ui/button.jsx b/jportal/src/components/ui/button.jsx
index b4cbcfe..1d22ea1 100644
--- a/jportal/src/components/ui/button.jsx
+++ b/jportal/src/components/ui/button.jsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
@@ -21,8 +21,8 @@ const buttonVariants = cva(
},
size: {
default: "h-10 px-4 py-2",
- sm: "h-9 rounded-md px-3",
- lg: "h-11 rounded-md px-8",
+ sm: "h-9 px-3",
+ lg: "h-11 px-8",
icon: "h-10 w-10",
},
},
@@ -31,17 +31,20 @@ const buttonVariants = cva(
size: "default",
},
}
-)
+);
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
- return (
- (
)
- );
-})
-Button.displayName = "Button"
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+
+ );
+ }
+);
+Button.displayName = "Button";
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/jportal/src/components/ui/dialog.jsx b/jportal/src/components/ui/dialog.jsx
index 8909503..7b2ed62 100644
--- a/jportal/src/components/ui/dialog.jsx
+++ b/jportal/src/components/ui/dialog.jsx
@@ -1,16 +1,16 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
- {...props} />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+ {...props}
+ />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
-
-
-
- {children}
-
-
- Close
-
-
-
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+const DialogContent = React.forwardRef(
+ ({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+ )
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({
- className,
- ...props
-}) => (
+const DialogHeader = ({ className, ...props }) => (
-)
-DialogHeader.displayName = "DialogHeader"
+ className={cn(
+ "flex flex-col space-y-1.5 text-center sm:text-left",
+ className
+ )}
+ {...props}
+ />
+);
+DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({
- className,
- ...props
-}) => (
+const DialogFooter = ({ className, ...props }) => (
-)
-DialogFooter.displayName = "DialogFooter"
+ className={cn(
+ "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+ className
+ )}
+ {...props}
+ />
+);
+DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+ className={cn(
+ "text-lg font-semibold leading-none tracking-tight",
+ className
+ )}
+ {...props}
+ />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+ {...props}
+ />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
@@ -91,4 +101,4 @@ export {
DialogFooter,
DialogTitle,
DialogDescription,
-}
+};
diff --git a/jportal/src/components/ui/input.jsx b/jportal/src/components/ui/input.jsx
index 38d2579..5e6e5f4 100644
--- a/jportal/src/components/ui/input.jsx
+++ b/jportal/src/components/ui/input.jsx
@@ -1,19 +1,20 @@
-import * as React from "react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
return (
- ()
+ {...props}
+ />
);
-})
-Input.displayName = "Input"
+});
+Input.displayName = "Input";
-export { Input }
+export { Input };
diff --git a/jportal/src/components/ui/progress.jsx b/jportal/src/components/ui/progress.jsx
index 526d564..8605579 100644
--- a/jportal/src/components/ui/progress.jsx
+++ b/jportal/src/components/ui/progress.jsx
@@ -1,25 +1,27 @@
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "@/lib/utils";
-const Progress = React.forwardRef(({ className, value, indicatorClassName, ...props }, ref) => (
-
- (
+
-
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+ {...props}
+ >
+
+
+ )
+);
+Progress.displayName = ProgressPrimitive.Root.displayName;
-export { Progress }
\ No newline at end of file
+export { Progress };
diff --git a/jportal/src/components/ui/select.jsx b/jportal/src/components/ui/select.jsx
index 4a1665c..40353f2 100644
--- a/jportal/src/components/ui/select.jsx
+++ b/jportal/src/components/ui/select.jsx
@@ -1,110 +1,137 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
- span]:line-clamp-1",
- className
- )}
- {...props}>
- {children}
-
-
-
-
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
-
-
-
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+const SelectTrigger = React.forwardRef(
+ ({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+
+ )
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
-
-
-
-))
-SelectScrollDownButton.displayName =
- SelectPrimitive.ScrollDownButton.displayName
+const SelectScrollUpButton = React.forwardRef(
+ ({ className, ...props }, ref) => (
+
+
+
+ )
+);
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
-
- (
+
-
-
- {children}
-
-
-
-
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+ {...props}
+ >
+
+
+ )
+);
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef(
+ ({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+
+ {children}
+
+
+
+
+ )
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+ {...props}
+ />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
-
-
-
-
-
-
+const SelectItem = React.forwardRef(
+ ({ className, children, ...props }, ref) => (
+
+
+
+
+
+
- {children}
-
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+ {children}
+
+ )
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+ {...props}
+ />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
export {
Select,
@@ -117,4 +144,4 @@ export {
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
-}
+};
diff --git a/jportal/src/index.css b/jportal/src/index.css
index e97001e..a8933f8 100644
--- a/jportal/src/index.css
+++ b/jportal/src/index.css
@@ -98,4 +98,59 @@
.overflow-y-auto {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
+}
+
+/* Custom slider styles for theme switcher */
+.slider {
+ -webkit-appearance: none;
+ appearance: none;
+ background: transparent;
+ cursor: pointer;
+}
+
+.slider::-webkit-slider-track {
+ background: var(--card-bg);
+ height: 8px;
+ border-radius: 4px;
+ border: 1px solid var(--border-color);
+}
+
+.slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ background: var(--accent-color);
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ border: 2px solid var(--bg-color);
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ transition: all 0.2s ease;
+}
+
+.slider::-webkit-slider-thumb:hover {
+ transform: scale(1.1);
+ box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+}
+
+.slider::-moz-range-track {
+ background: var(--card-bg);
+ height: 8px;
+ border-radius: 4px;
+ border: 1px solid var(--border-color);
+}
+
+.slider::-moz-range-thumb {
+ background: var(--accent-color);
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ border: 2px solid var(--bg-color);
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.slider::-moz-range-thumb:hover {
+ transform: scale(1.1);
+ box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
\ No newline at end of file
diff --git a/jportal/src/lib/utils.js b/jportal/src/lib/utils.js
index b20bf01..41b173f 100644
--- a/jportal/src/lib/utils.js
+++ b/jportal/src/lib/utils.js
@@ -4,3 +4,35 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs) {
return twMerge(clsx(inputs));
}
+
+export function getDecimalPlaces() {
+ const saved = localStorage.getItem("decimalPlaces");
+ const n = saved ? parseInt(saved) : 1;
+ return isNaN(n) ? 1 : Math.max(0, Math.min(6, n));
+}
+
+export function formatDecimal(value, places) {
+ const decimals = typeof places === "number" ? places : getDecimalPlaces();
+ if (typeof value === "number") {
+ return value.toFixed(decimals);
+ }
+ return value;
+}
+
+export function getAttendanceDecimal() {
+ const saved = localStorage.getItem("attendanceDecimal");
+ if (saved !== null) return Math.max(0, Math.min(6, parseInt(saved)));
+ return getDecimalPlaces();
+}
+
+export function getGpaDecimal() {
+ const saved = localStorage.getItem("gpaDecimal");
+ if (saved !== null) return Math.max(0, Math.min(6, parseInt(saved)));
+ return getDecimalPlaces();
+}
+
+export function getTargetGpaDecimal() {
+ const saved = localStorage.getItem("targetGpaDecimal");
+ if (saved !== null) return Math.max(0, Math.min(6, parseInt(saved)));
+ return getDecimalPlaces();
+}
diff --git a/jportal/src/main.jsx b/jportal/src/main.jsx
index af4624b..300bc9d 100644
--- a/jportal/src/main.jsx
+++ b/jportal/src/main.jsx
@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+import { ThemeProvider } from "./components/ThemeProvider.jsx";
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
//
+
+
// ,
-)
+);
diff --git a/jportal/vite.config.js b/jportal/vite.config.js
index c8539aa..be4af08 100644
--- a/jportal/vite.config.js
+++ b/jportal/vite.config.js
@@ -2,13 +2,51 @@ import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";
+import fs from "fs";
+// Build-time plugin to generate a static theme manifest
+function generateThemeManifest() {
+ return {
+ name: 'generate-theme-manifest',
+ buildStart() {
+ const userConfigsDir = path.resolve(process.cwd(), 'public/user-configs');
+ if (!fs.existsSync(userConfigsDir)) return;
+
+ const files = fs.readdirSync(userConfigsDir);
+ const themeFiles = files.filter(f =>
+ /^[a-zA-Z0-9_-]+-jportal-(theme|themes)\.config$/.test(f)
+ );
+
+ const themes = themeFiles.map(filename => {
+ const author = filename.match(
+ /^([a-zA-Z0-9_-]+)-jportal-(?:theme|themes)\.config$/
+ )?.[1] || 'Unknown';
+ return {
+ filename,
+ author,
+ isMultiTheme: filename.includes('-themes.config'),
+ url: `/jportal/user-configs/${filename}`
+ };
+ });
+
+ // write out to public so it ends up in `dist`
+ const outDir = path.resolve(process.cwd(), 'public/api');
+ fs.mkdirSync(outDir, { recursive: true });
+ fs.writeFileSync(
+ path.join(outDir, 'themes.json'),
+ JSON.stringify({ themes }, null, 2),
+ 'utf8'
+ );
+ }
+ };
+}
// https://vite.dev/config/
export default defineConfig({
base: "/jportal/",
plugins: [
react(),
+ generateThemeManifest(),
VitePWA({
registerType: "autoUpdate",
injectRegister: "auto",
@@ -67,6 +105,28 @@ export default defineConfig({
},
}),
],
+ server: (() => {
+ if (process.env.NODE_ENV === "development") {
+ const keyPath = './certs/localhost-key.pem';
+ const certPath = './certs/localhost.pem';
+ if (fs.existsSync(keyPath) && fs.existsSync(certPath)) {
+ return {
+ host: true,
+ https: {
+ key: fs.readFileSync(keyPath),
+ cert: fs.readFileSync(certPath),
+ },
+ };
+ } else {
+ console.warn(
+ `Warning: HTTPS certificate files not found at ${keyPath} and/or ${certPath}. ` +
+ `Starting dev server without HTTPS.`
+ );
+ return { host: true };
+ }
+ }
+ return { host: true };
+ })(),
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
diff --git a/theme-contribution.md b/theme-contribution.md
new file mode 100644
index 0000000..8dcb5a5
--- /dev/null
+++ b/theme-contribution.md
@@ -0,0 +1,83 @@
+# JPortal Community Themes
+
+The directory `/jportal/public/user-configs` contains user-contributed themes for JPortal. Users can create and share their custom themes by following the naming conventions and format specified below.
+
+## Naming Conventions
+
+### Single Theme Files
+
+For files containing only one theme:
+
+```
+yourname-jportal-theme.config
+```
+
+### Multiple Theme Files
+
+For files containing multiple themes:
+
+```
+yourname-jportal-themes.config
+```
+
+### Rules:
+
+- Use only lowercase letters, numbers, hyphens, and underscores
+- Your name/username should be the prefix
+- Must end with `-jportal-theme.config` (single) or `-jportal-themes.config` (multiple)
+- No spaces or special characters allowed
+
+## Theme Format
+
+Each theme should follow this format:
+
+```
+[THEME Theme Name]
+BG_COLOR=#background_color
+PRIMARY_COLOR=#primary_color
+ACCENT_COLOR=#accent_color
+TEXT_COLOR=#text_color
+CARD_BG=#card_background_color
+LABEL_COLOR=#label_color
+```
+
+### Required Color Variables:
+
+- `BG_COLOR`: Main background color
+- `PRIMARY_COLOR`: Primary UI element color
+- `ACCENT_COLOR`: Accent/highlight color
+- `TEXT_COLOR`: Main text color
+- `CARD_BG`: Card/component background color
+- `LABEL_COLOR`: Secondary text/label color
+
+### Example Theme:
+
+```
+[THEME Dark Blue]
+BG_COLOR=#141c23
+PRIMARY_COLOR=#1a1a2e
+ACCENT_COLOR=#0ea5e9
+TEXT_COLOR=#eaf6fb
+CARD_BG=#1a1a2e
+LABEL_COLOR=#94a3b8
+```
+
+## How to Contribute
+
+1. Create a new `.config` file following the naming convention
+2. Add your themes using the format above
+3. Submit a pull request to add your file to this directory
+4. Your themes will automatically appear in the Community tab of the theme switcher
+
+## Current Contributors
+
+- ****: Traumatic Pink, Yolo Orange
+
+## Validation
+
+Themes are automatically validated when loaded:
+
+- Filename must match the naming convention
+- All required color variables must be present
+- Colors must be valid hex values
+- Theme names should be descriptive and unique