Updated skins + configuration

README.md

@@ -25,6 +25,7 @@ These libraries are different modules of ProzillaOS that can be installed separa
 
 - [`prozilla-os`][prozilla-os]: A bundle containing the core packages and all standard applications of ProzillaOS
 - [`@prozilla-os/core`][core]: Core functionality, React components and hooks
+- [`@prozilla-os/skins`](./shared/): Customizable skins for ProzillaOS
 - [`@prozilla-os/shared`][shared]: Shared functions and utilities
 
 #### Standard applications

packages/README.md

@@ -0,0 +1,40 @@
+<div align="center">
+	<br />
+	<p>
+		<a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/banner-logo-title-small.png" width="576" alt="ProzillaOS" /></a>
+	</p>
+	<p>
+		<a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
+		<a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
+		<a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
+		<a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
+	</p>
+</div>
+
+## Packages
+
+### Libraries (public)
+
+- [`prozilla-os`](./prozilla-os/): A bundle containing the core packages and all standard applications of ProzillaOS
+- [`@prozilla-os/core`](./core/): Core functionality, React components and hooks
+- [`@prozilla-os/skins`](./shared/): Customizable skins for ProzillaOS
+- [`@prozilla-os/shared`](./shared/): Shared functions and utilities
+
+#### Standard applications
+
+- [`@prozilla-os/file-explorer`](./apps/file-explorer/): File explorer app
+- [`@prozilla-os/terminal`](./apps/terminal/): Terminal/shell app
+- [`@prozilla-os/text-editor`](./apps/text-editor/): Text editor app
+- [`@prozilla-os/settings`](./apps/settings/): Settings app
+- [`@prozilla-os/media-viewer`](./apps/media-viewer/): Media viewer app
+- [`@prozilla-os/browser`](./apps/browser/): Browser app
+- [`@prozilla-os/calculator`](./apps/calculator/): Calculator app
+
+#### Non-standard applications
+
+- [`@prozilla-os/logic-sim`](./apps/logic-sim/): Logic simulator app
+
+### Sites (internal)
+
+- [`@prozilla-os/demo`](./demo/): Demo site
+- [`@prozilla-os/docs`](./docs/): Documentation site

packages/apps/browser/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/browser
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.1
+
 ## 1.0.3
 
 ### Patch Changes

packages/apps/browser/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/browser",
 	"description": "A ProzillaOS application for browsing the internet.",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"homepage": "https://os.prozilla.dev/browser",
 	"author": {
 		"name": "Prozilla",

packages/apps/calculator/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/calculator
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.1
+
 ## 1.0.3
 
 ### Patch Changes

packages/apps/calculator/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/calculator",
 	"description": "A ProzillaOS application for making basic calculations.",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"homepage": "https://os.prozilla.dev/calculator",
 	"author": {
 		"name": "Prozilla",

packages/apps/file-explorer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/file-explorer
 
+## 1.0.15
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.1
+
 ## 1.0.14
 
 ### Patch Changes

packages/apps/file-explorer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/file-explorer",
 	"description": "A standard ProzillaOS application for browsing files.",
-	"version": "1.0.14",
+	"version": "1.0.15",
 	"homepage": "https://os.prozilla.dev/file-explorer",
 	"author": {
 		"name": "Prozilla",

packages/apps/logic-sim/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/logic-sim
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.1
+
 ## 1.0.3
 
 ### Patch Changes

packages/apps/logic-sim/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/logic-sim",
 	"description": "A ProzillaOS application for simulating digital logic.",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"homepage": "https://os.prozilla.dev/logic-sim",
 	"author": {
 		"name": "Prozilla",

packages/apps/media-viewer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/media-viewer
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.1
+
 ## 1.0.3
 
 ### Patch Changes

packages/apps/media-viewer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/media-viewer",
 	"description": "A ProzillaOS application for viewing different kinds of media.",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"homepage": "https://os.prozilla.dev/media-viewer",
 	"author": {
 		"name": "Prozilla",

packages/apps/settings/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/settings
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.1
+  - @prozilla-os/file-explorer@1.0.15
+
 ## 1.0.3
 
 ### Patch Changes

packages/apps/settings/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/settings",
 	"description": "A settings app for ProzillaOS.",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"homepage": "https://os.prozilla.dev/settings",
 	"author": {
 		"name": "Prozilla",

packages/apps/terminal/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/terminal
 
+## 1.0.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.1
+
 ## 1.0.7
 
 ### Patch Changes

packages/apps/terminal/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/terminal",
 	"description": "A terminal/shell application for ProzillaOS.",
-	"version": "1.0.7",
+	"version": "1.0.8",
 	"homepage": "https://os.prozilla.dev/terminal",
 	"author": {
 		"name": "Prozilla",

packages/apps/text-editor/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/text-editor
 
+## 1.0.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.1.1
+
 ## 1.0.7
 
 ### Patch Changes

packages/apps/text-editor/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/text-editor",
 	"description": "A text editor application for ProzillaOS.",
-	"version": "1.0.7",
+	"version": "1.0.8",
 	"homepage": "https://os.prozilla.dev/text-editor",
 	"author": {
 		"name": "Prozilla",

packages/core/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/core
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated skins and configuration
+- Updated dependencies
+  - @prozilla-os/skins@1.0.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/core/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/core",
 	"description": "A React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",
@@ -12,7 +12,7 @@
 	"main": "dist/main.js",
 	"types": "dist/main.d.ts",
 	"scripts": {
-		"build": "tsc && vite build"
+		"build": "tsc --project tsconfig.build.json && vite build"
 	},
 	"repository": {
 		"type": "git",

packages/core/src/components/_utils/directory-list/ImagePreview.tsx

@@ -10,7 +10,7 @@ interface ImagePreviewProps {
 }
 
 export function ImagePreview({ source, className, onError, ...props }: ImagePreviewProps) {
-	const { virtualDriveConfig } = useSystemManager();
+	const { skin } = useSystemManager();
 	const [loadingFailed, setLoadingFailed] = useState(false);
 
 	const onLoadingError = () => {
@@ -24,7 +24,7 @@ export function ImagePreview({ source, className, onError, ...props }: ImagePrev
 
 	return (<div className={classNames.join(" ")} {...props}>
 		{loadingFailed
-			? <ReactSVG src={virtualDriveConfig.fileIcon}/>
+			? <ReactSVG src={skin.fileIcons.generic}/>
 			: source.endsWith(".svg")
 				? <ReactSVG src={source} onError={onLoadingError}/>
 				: <img src={source} onError={onLoadingError} alt="Preview" draggable="false"/>

packages/core/src/components/desktop/Desktop.tsx

@@ -19,7 +19,7 @@ import { FileEventHandler, FolderEventHandler } from "../_utils/directory-list/D
 import { useClassNames } from "../../hooks";
 
 export const Desktop = memo(() => {
-	const { desktopConfig, appsConfig } = useSystemManager();
+	const { desktopConfig, skin, appsConfig } = useSystemManager();
 	const settingsManager = useSettingsManager();
 	const windowsManager = useWindowsManager();
 	const virtualRoot = useVirtualRoot();
@@ -167,7 +167,7 @@ export const Desktop = memo(() => {
 
 	const onError = () => {
 		const settings = settingsManager?.getSettings(SettingsManager.VIRTUAL_PATHS.desktop);
-		void settings?.set("wallpaper", desktopConfig.defaultWallpaper);
+		void settings?.set("wallpaper", skin.defaultWallpaper);
 	};
 
 	const iconScale = 1 + ((isValidInteger(iconSize) ? iconSize : desktopConfig.defaultIconSize) - 1) / 5;

packages/core/src/components/taskbar/indicators/Calendar.module.css

@@ -1,8 +1,14 @@
 .Button {
+	display: flex;
+	flex-direction: column;
 	white-space: nowrap;
 	user-select: none;
 }
 
+.Button > p {
+	margin: 0;
+}
+
 .Menu > div {
 	display: flex;
 	gap: 0.5rem;
@@ -20,5 +26,5 @@
 }
 
 .Date {
-	color: var(--foreground-color-1);
+	opacity: 0.5;
 }

packages/core/src/components/taskbar/indicators/Calendar.tsx

@@ -44,7 +44,6 @@ export function Calendar({ hideUtilMenus, showUtilMenu }: CalendarProps) {
 					hour12: false,
 				})}
 			</p>
-			<br/>
 			<p>
 				{date.toLocaleDateString("en-GB", {
 					day: "numeric",

packages/core/src/features/system/configs/desktopConfig.ts

@@ -1,12 +1,6 @@
 import { OptionalInterface } from "../../../types/utils";
 
 export interface DesktopConfigOptions {
-	/** Array of URLs of wallpaper images */
-	wallpapers: string[];
-
-	/** URL of default wallpaper image */
-	defaultWallpaper: string;
-
 	/**
 	 * @default 1
 	 */
@@ -20,26 +14,12 @@ export interface DesktopConfigOptions {
 }
 
 export class DesktopConfig {
-	wallpapers: DesktopConfigOptions["wallpapers"];
-	defaultWallpaper: DesktopConfigOptions["defaultWallpaper"];
 	defaultIconSize: DesktopConfigOptions["defaultIconSize"];
 	defaultIconDirection: DesktopConfigOptions["defaultIconDirection"];
 
 	constructor(options: OptionalInterface<DesktopConfigOptions> = {}) {
-		const { wallpapers, defaultWallpaper, defaultIconSize, defaultIconDirection } = options as DesktopConfigOptions;
+		const { defaultIconSize, defaultIconDirection } = options as DesktopConfigOptions;
 
-		this.wallpapers = wallpapers ?? [
-			"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
-			"https://os.prozilla.dev/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
-			"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-purple-yellow.png",
-			"https://os.prozilla.dev/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
-			"https://os.prozilla.dev/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png",
-			"https://os.prozilla.dev/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png",
-			"https://os.prozilla.dev/assets/wallpapers/colorful-mesh-gradient-red-green.png",
-			"https://os.prozilla.dev/assets/wallpapers/flame-abstract-wallpaper-orange.png",
-			"https://os.prozilla.dev/assets/wallpapers/wave-abstract-wallpaper-teal.png",
-		];
-		this.defaultWallpaper = defaultWallpaper ?? "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png";
 		this.defaultIconSize = defaultIconSize ?? 1;
 		this.defaultIconDirection = defaultIconDirection ?? 0;
 	}

packages/core/src/features/system/configs/virtualDriveConfig.ts

@@ -1,39 +1,11 @@
 import { OptionalInterface } from "../../../types/utils";
 
 export interface VirtualDriveConfigOptions {
-	fileIcon: string;
-	infoFileIcon: string;
-	textFileIcon: string;
-	codeFileIcon: string;
 
-	folderIcon: string;
-	imagesFolderIcon: string;
-	textFolderIcon: string;
-	folderLinkIcon: string;
 }
 
 export class VirtualDriveConfig {
-	fileIcon: VirtualDriveConfigOptions["fileIcon"];
-	infoFileIcon: VirtualDriveConfigOptions["infoFileIcon"];
-	textFileIcon: VirtualDriveConfigOptions["textFileIcon"];
-	codeFileIcon: VirtualDriveConfigOptions["codeFileIcon"];
-
-	folderIcon: VirtualDriveConfigOptions["folderIcon"];
-	imagesFolderIcon: VirtualDriveConfigOptions["imagesFolderIcon"];
-	textFolderIcon: VirtualDriveConfigOptions["textFolderIcon"];
-	folderLinkIcon: VirtualDriveConfigOptions["folderLinkIcon"];
-
 	constructor(options: OptionalInterface<VirtualDriveConfigOptions> = {}) {
-		const { fileIcon, infoFileIcon, textFileIcon, codeFileIcon, folderIcon, imagesFolderIcon, textFolderIcon, folderLinkIcon } = options as VirtualDriveConfigOptions;
+		// const { } = options as VirtualDriveConfigOptions;
-		
-		this.fileIcon = fileIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/file.svg";
-		this.infoFileIcon = infoFileIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-info.svg";
-		this.textFileIcon = textFileIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-text.svg";
-		this.codeFileIcon = codeFileIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-code.svg";
-
-		this.folderIcon = folderIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder.svg";
-		this.imagesFolderIcon = imagesFolderIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-images.svg";
-		this.textFolderIcon = textFolderIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-text.svg";
-		this.folderLinkIcon = folderLinkIcon ?? "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-link.svg";
 	}
 }

packages/core/src/features/system/systemManager.ts

@@ -26,20 +26,20 @@ export interface SystemManagerParams {
 }; 
 
 export class SystemManager {
-	systemName: string;
+	readonly systemName: string;
-	tagLine: string;
+	readonly tagLine: string;
 	#startDate: Date;
 
-	skin?: Skin;
+	readonly skin: Skin;
 
-	appsConfig: AppsConfig;
+	readonly appsConfig: AppsConfig;
-	desktopConfig: DesktopConfig;
+	readonly desktopConfig: DesktopConfig;
-	miscConfig: MiscConfig;
+	readonly miscConfig: MiscConfig;
-	modalsConfig: ModalsConfig;
+	readonly modalsConfig: ModalsConfig;
-	taskbarConfig: TaskbarConfig;
+	readonly taskbarConfig: TaskbarConfig;
-	trackingConfig: TrackingConfig;
+	readonly trackingConfig: TrackingConfig;
-	windowsConfig: WindowsConfig;
+	readonly windowsConfig: WindowsConfig;
-	virtualDriveConfig: VirtualDriveConfig;
+	readonly virtualDriveConfig: VirtualDriveConfig;
 
 	constructor({
 		systemName,
@@ -57,7 +57,7 @@ export class SystemManager {
 		this.systemName = systemName ?? "ProzillaOS";
 		this.tagLine = tagLine ?? "Web-based Operating System";
 
-		this.skin = skin;
+		this.skin = skin ?? new Skin();
 
 		this.desktopConfig = desktopConfig;
 		this.appsConfig = appsConfig;
@@ -68,45 +68,30 @@ export class SystemManager {
 		this.windowsConfig = windowsConfig;
 		this.virtualDriveConfig = virtualDriveConfig;
 
-		if (this.skin != null) {
+		this.loadSkin();
-			const skin = this.skin;
-
-			if (skin.appIcons != null) {
-				const appIcons = skin.appIcons as { [key: string]: string };
-
-				this.appsConfig.apps.forEach((app) => {
-					if (Object.keys(appIcons).includes(app.id))
-						app.setIconUrl(appIcons[app.id]);
-				});
-			}
-
-			if (skin.wallpapers != null)
-				this.desktopConfig.wallpapers = this.desktopConfig.wallpapers.concat(skin.wallpapers);
-
-			if (skin.defaultWallpaper != null)
-				this.desktopConfig.defaultWallpaper = skin.defaultWallpaper;
-
-			if (skin.fileIcons != null) {
-				this.virtualDriveConfig.fileIcon = skin.fileIcons.generic;
-				this.virtualDriveConfig.infoFileIcon = skin.fileIcons.info ?? skin.fileIcons.generic;
-				this.virtualDriveConfig.textFileIcon = skin.fileIcons.text ?? skin.fileIcons.generic;
-				this.virtualDriveConfig.codeFileIcon = skin.fileIcons.code ?? skin.fileIcons.generic;
-			}
-
-			if (skin.folderIcons != null) {
-				this.virtualDriveConfig.folderIcon = skin.folderIcons.generic;
-				this.virtualDriveConfig.textFolderIcon = skin.folderIcons.text ?? skin.folderIcons.generic;
-				this.virtualDriveConfig.imagesFolderIcon = skin.folderIcons.images ?? skin.folderIcons.generic;
-				this.virtualDriveConfig.folderLinkIcon = skin.folderIcons.link ?? skin.folderIcons.generic;
-			}
-
-			if (skin.loadStyleSheet != null)
-				skin.loadStyleSheet();
-		}
 
 		this.#startDate = new Date();
 	}
 
+	private loadSkin() {
+		const skin = this.skin;
+
+		if (skin.appIcons != null) {
+			const appIcons = skin.appIcons as { [key: string]: string };
+			const appNames = skin.appNames as { [key: string]: string };
+
+			this.appsConfig.apps.forEach((app) => {
+				if (Object.keys(appIcons).includes(app.id))
+					app.setIconUrl(appIcons[app.id]);
+				if (Object.keys(appNames).includes(app.id))
+					app.setIconUrl(appNames[app.id]);
+			});
+		}
+
+		if (skin.loadStyleSheet != null)
+			skin.loadStyleSheet();
+	}
+
 	getUptime(precision = 2) {
 		return formatRelativeTime(this.#startDate, precision, false); 
 	}

packages/core/src/features/virtual-drive/file/virtualFile.ts

@@ -123,12 +123,12 @@ export class VirtualFile extends VirtualBase {
 		if (this.source != null && this.extension != null && IMAGE_EXTENSIONS.includes(this.extension))
 			return this.source;
 
-		const { virtualDriveConfig } = this.getRoot().systemManager;
+		const { skin } = this.getRoot().systemManager;
 
 		switch (this.extension) {
 			case "txt":
 			case "md":
-				iconUrl = virtualDriveConfig.textFileIcon;
+				iconUrl = skin.fileIcons.text ?? skin.fileIcons.generic;
 				break;
 			case "xml":
 			case "js":
@@ -139,10 +139,10 @@ export class VirtualFile extends VirtualBase {
 			case "css":
 			case "html":
 			case "yml":
-				iconUrl = virtualDriveConfig.codeFileIcon;
+				iconUrl = skin.fileIcons.code ?? skin.fileIcons.generic;
 				break;
 			default:
-				iconUrl = virtualDriveConfig.fileIcon;
+				iconUrl = skin.fileIcons.generic;
 				break;
 		}
 

packages/core/src/features/virtual-drive/file/virtualFileLink.ts

@@ -99,8 +99,8 @@ export class VirtualFileLink extends VirtualFile {
 	}
 
 	getIconUrl(...args: Parameters<VirtualFile["getIconUrl"]>): ReturnType<VirtualFile["getIconUrl"]>  {
-		const { virtualDriveConfig } = this.getRoot().systemManager;
+		const { skin } = this.getRoot().systemManager;
-		const defaultIconUrl = virtualDriveConfig.fileIcon;
+		const defaultIconUrl = skin.fileIcons.generic;
 
 		if (this.isValid()) {
 			return this.iconUrl ?? this.linkedFile?.getIconUrl(...args) ?? defaultIconUrl;

packages/core/src/features/virtual-drive/folder/virtualFolder.ts

@@ -355,8 +355,8 @@ export class VirtualFolder extends VirtualBase {
 		if (this.iconUrl != null)
 			return this.iconUrl;
 		
-		const { virtualDriveConfig } = this.getRoot().systemManager;
+		const { skin } = this.getRoot().systemManager;
-		return virtualDriveConfig.folderIcon;
+		return skin.folderIcons.generic;
 	}
 
 	toJSON(): VirtualFolderJson | null {

packages/core/src/features/virtual-drive/folder/virtualFolderLink.ts

@@ -58,8 +58,8 @@ export class VirtualFolderLink extends VirtualFolder {
 		if (this.isValid() && this.linkedFolder?.iconUrl)
 			return this.linkedFolder.iconUrl;
 
-		const { virtualDriveConfig } = this.getRoot().systemManager;
+		const { skin } = this.getRoot().systemManager;
-		return virtualDriveConfig.folderLinkIcon;
+		return skin.folderIcons.link ?? skin.folderIcons.generic;
 	}
 
 	toJSON(): VirtualFolderLinkJson | null {
@@ -137,7 +137,7 @@ export class VirtualFolderLink extends VirtualFolder {
 	}
 
 	open(...args: Parameters<VirtualFolder["open"]>): ReturnType<VirtualFolder["open"]> {
-		if (this.isValid()) return this.linkedFolder?.open(...args) as ReturnType<VirtualFolder["open"]>;
+		if (this.isValid()) return this.linkedFolder?.open(...args);
 		return null;
 	}
 

packages/core/src/features/virtual-drive/root/defaultData.ts

@@ -7,7 +7,7 @@ import { VirtualRoot } from "./virtualRoot";
  * Loads default data on the virtual root
  */
 export function loadDefaultData(systemManager: SystemManager, virtualRoot: VirtualRoot) {
-	const { desktopConfig, virtualDriveConfig, appsConfig } = systemManager;
+	const { skin, appsConfig } = systemManager;
 	const linkedPaths: Record<string, string> = {};
 	
 	virtualRoot.createFolder("home", (folder) => {
@@ -17,7 +17,7 @@ export function loadDefaultData(systemManager: SystemManager, virtualRoot: Virtu
 					folder.createFile("desktop", "xml", (file) => {
 						file.setContent([
 							"<options>",
-							`	<wallpaper>${desktopConfig.defaultWallpaper}</wallpaper>`,
+							`	<wallpaper>${skin.defaultWallpaper}</wallpaper>`,
 							"	<show-icons>true</show-icons>",
 							"</options>",
 						]);
@@ -38,11 +38,11 @@ export function loadDefaultData(systemManager: SystemManager, virtualRoot: Virtu
 					});
 				})
 				.createFolder("Pictures", (folder) => {
-					folder.setIconUrl(virtualDriveConfig.imagesFolderIcon);
+					folder.setIconUrl(skin.folderIcons.images ?? skin.folderIcons.generic);
 					folder.createFolder("Wallpapers", (folder) => {
 						folder.setProtected(true);
-						for (let i = 0; i < desktopConfig.wallpapers.length; i++) {
+						for (let i = 0; i < skin.wallpapers.length; i++) {
-							const source = desktopConfig.wallpapers[i];
+							const source = skin.wallpapers[i];
 							folder.createFile(`Wallpaper${i + 1}`, "png", (file) => {
 								file.setSource(source);
 							});
@@ -63,13 +63,13 @@ export function loadDefaultData(systemManager: SystemManager, virtualRoot: Virtu
 					linkedPaths.images = folder.path;
 				})
 				.createFolder("Documents", (folder) => {
-					folder.setIconUrl(virtualDriveConfig.textFolderIcon);
+					folder.setIconUrl(skin.folderIcons.text ?? skin.folderIcons.generic);
 					folder.createFile("text", "txt", (file) => {
 						file.setContent("Hello world!");
 					}).createFile("Info", "md", (file) => {
 						file.setProtected(true)
 							.setSource("/documents/info.md")
-							.setIconUrl(virtualDriveConfig.infoFileIcon);
+							.setIconUrl(skin.fileIcons.info ?? skin.fileIcons.generic);
 						linkedPaths.info = file.path;
 					}).createFile("Prozilla", "md", (file) => {
 						file.setProtected(true)

packages/core/src/features/virtual-drive/virtualBase.ts

@@ -83,8 +83,8 @@ export class VirtualBase extends EventEmitter<EventNamesMap> {
 		if (this.linkedFile?.iconUrl != null) return this.linkedFile.iconUrl;
 		if (this.linkedFolder?.iconUrl != null) return this.linkedFolder.iconUrl;
 
-		const { virtualDriveConfig } = this.getRoot().systemManager;
+		const { skin } = this.getRoot().systemManager;
-		return virtualDriveConfig.fileIcon;
+		return skin.fileIcons.generic;
 	}
 
 	getType(): string {

packages/core/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"paths": {
+			"@prozilla-os/*": ["packages/*/dist/main"],
+		},
+	},
+}

packages/core/tsconfig.json

@@ -3,11 +3,15 @@
 	"compilerOptions": {
 		"baseUrl": "../..",
 		"composite": true,
-		"outDir": "dist",
+		"outDir": "./dist",
 		"declaration": true,
 		"emitDeclarationOnly": true,
-		"noEmit": false
+		"noEmit": false,
+		"rootDir": "../",
+		"paths": {
+			"@prozilla-os/*": ["packages/*/src/main"],
+		},
 	},
-	"include": ["src", "vite.config.ts"],
+	"include": ["src", "vite.config.ts", "../skins/src/**/*",],
 	"exclude": ["node_modules"]
 }

packages/core/vite.config.ts

@@ -15,7 +15,8 @@ export default defineConfig({
 			rollupTypes: true,
 			strictOutput: true,
 			pathsToAliases: false,
-			bundledPackages: ["@prozilla-os/*"]
+			bundledPackages: ["@prozilla-os/*"],
+			tsconfigPath: "tsconfig.build.json"
 		})
 	],
 	build: {

packages/demo/package.json

@@ -10,7 +10,7 @@
 	"type": "module",
 	"scripts": {
 		"start": "vite",
-		"build": "tsc --project tsconfig-build.json && vite build",
+		"build": "tsc --project tsconfig.build.json && vite build",
 		"preview": "vite preview --port 8080",
 		"stage": "vite-node scripts/stage",
 		"predeploy": "pnpm run build && pnpm run stage",

packages/demo/scripts/stage.ts

@@ -3,7 +3,7 @@ import { appsConfig } from "../src/config/apps.config";
 import { ANSI } from "../../core/src/constants";
 import { NAME, TAG_LINE } from "../src/config/branding.config";
 import { BASE_URL, BUILD_DIR, DOMAIN } from "../src/config/deploy.config";
-import { desktopConfig } from "../src/config/desktop.config";
+import { skin } from "../src/config/skin.config";
 import path from "node:path";
 import { name } from "../package.json";
 
@@ -18,7 +18,7 @@ function generateSitemapXml() {
 	const date = new Date();
 	const lastModified = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
 
-	const images = desktopConfig.wallpapers.map((path) => `
+	const images = skin.wallpapers.map((path) => `
 		<image:image>
 			<image:loc>${BASE_URL.slice(0, -1) + path}</image:loc>
 		</image:image>`

packages/demo/src/Main.tsx

@@ -1,21 +1,17 @@
 import { ReactElement } from "react";
 import { Router } from "./router/Router";
-import { desktopConfig } from "./config/desktop.config";
+import { skin } from "./config/skin.config";
 import { NAME, TAG_LINE } from "./config/branding.config";
 import { appsConfig } from "./config/apps.config";
-import { virtualDriveConfig } from "./config/virtualDrive.config";
 import { ProzillaOS } from "prozilla-os";
-import { macOsSkin } from "@prozilla-os/skins";
 
 export function Main(): ReactElement {
 	return <ProzillaOS
 		systemName={NAME}
 		tagLine={TAG_LINE}
-		skin={macOsSkin}
+		skin={skin}
 		config={{
-			desktop: desktopConfig,
 			apps: appsConfig,
-			virtualDrive: virtualDriveConfig,
 		}}
 	>
 		<Router/>

packages/demo/src/config/skin.config.ts

@@ -1,6 +1,6 @@
-import { DesktopConfig } from "prozilla-os";
+import { Skin } from "@prozilla-os/skins";
 
-export const desktopConfig = new DesktopConfig({
+export const skin = new Skin({
 	wallpapers: [
 		"/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
 		"/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
@@ -12,5 +12,17 @@ export const desktopConfig = new DesktopConfig({
 		"/assets/wallpapers/flame-abstract-wallpaper-orange.png",
 		"/assets/wallpapers/wave-abstract-wallpaper-teal.png",
 	],
-	defaultWallpaper: "/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png"
+	defaultWallpaper: "/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
+	fileIcons: {
+		generic: "/assets/apps/file-explorer/icons/file.svg",
+		info: "/assets/apps/file-explorer/icons/file-info.svg",
+		text: "/assets/apps/file-explorer/icons/file-text.svg",
+		code: "/assets/apps/file-explorer/icons/file-code.svg",
+	},
+	folderIcons: {
+		generic: "/assets/apps/file-explorer/icons/folder.svg",
+		images: "/assets/apps/file-explorer/icons/folder-images.svg",
+		text: "/assets/apps/file-explorer/icons/folder-text.svg",
+		link: "/assets/apps/file-explorer/icons/folder-link.svg",
+	}
 });

packages/demo/src/config/virtualDrive.config.ts

@@ -1,12 +0,0 @@
-import { VirtualDriveConfig } from "prozilla-os";
-
-export const virtualDriveConfig = new VirtualDriveConfig({
-	fileIcon: "/assets/apps/file-explorer/icons/file.svg",
-	infoFileIcon: "/assets/apps/file-explorer/icons/file-info.svg",
-	textFileIcon: "/assets/apps/file-explorer/icons/file-text.svg",
-	codeFileIcon: "/assets/apps/file-explorer/icons/file-code.svg",
-	folderIcon: "/assets/apps/file-explorer/icons/folder.svg",
-	imagesFolderIcon: "/assets/apps/file-explorer/icons/folder-images.svg",
-	textFolderIcon: "/assets/apps/file-explorer/icons/folder-text.svg",
-	folderLinkIcon: "/assets/apps/file-explorer/icons/folder-link.svg",
-});

packages/docs/.vitepress/config.ts

@@ -76,19 +76,33 @@ export default defineConfig({
 						base: "/reference/classes/",
 						collapsed: false,
 						items: [
+							{
+								text: "Apps",
+								base: "/reference/classes/apps/",
+								collapsed: true,
+								items: [
+									{ text: "App", link: "app" },
+								]
+							},
+							{
+								text: "Skins",
+								base: "/reference/classes/skins/",
+								collapsed: true,
+								items: [
+									{ text: "Skin", link: "skin" },
+								]
+							},
 							{
 								text: "System",
 								base: "/reference/classes/system/",
 								collapsed: true,
 								items: [
-									{ text: "App", link: "app" },
 									{ text: "AppsConfig", link: "apps-config" },
 									{ text: "DesktopConfig", link: "desktop-config" },
 									{ text: "MiscConfig", link: "misc-config" },
 									{ text: "ModalsConfig", link: "modals-config" },
 									{ text: "TaskbarConfig", link: "taskbar-config" },
 									{ text: "TrackingConfig", link: "tracking-config" },
-									{ text: "VirtualDriveConfig", link: "virtual-drive-config" },
 									{ text: "WindowsConfig", link: "windows-config" },
 								]
 							},

packages/docs/src/reference/classes/apps/app.md

@@ -7,7 +7,7 @@ description: "An application that can be run by ProzillaOS"
 
 An application that can be run by ProzillaOS
 
-Applications can be installed by adding them to the `apps` array in [`AppsConfig`](apps-config#apps-app)
+Applications can be installed by adding them to the `apps` array in [`AppsConfig`](../system/apps-config#apps-app)
 
 ## Type parameters
 

packages/docs/src/reference/classes/skins/skin.md

@@ -0,0 +1,116 @@
+---
+outline: deep
+description: "Change the look and feel of ProzillaOS"
+---
+
+# Class [`Skin`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/skins/src/core/skin.ts)
+
+Change the look and feel of ProzillaOS
+
+## Constructor
+
+> `new Skin(options)`
+
+### Parameters
+
+<br>
+
+#### options
+
+- **Optional**
+- **Type:** `SkinOptions`
+
+```ts
+interface SkinOptions {
+	appIcons?: { [key: string]: string };
+	appNames?: { [key: string]: string };
+	wallpapers: string[];
+	defaultWallpaper: string;
+	fileIcons: {
+		generic: string;
+		info?: string;
+		text?: string;
+		code?: string;
+	};
+	folderIcons: {
+		generic: string;
+		images?: string;
+		text?: string;
+		link?: string;
+	};
+	loadStyleSheet?: () => void;
+}
+```
+
+## Properties
+
+### appIcons
+
+- **Type:** `{ [key: string]: string }`
+
+Replacements for app icons based on app id
+
+### appNames
+
+- **Type:** `{ [key: string]: string }`
+
+Replacements for app names based on app id
+
+### wallpapers
+
+- **Type:** `string[]`
+
+Array of URLs of wallpaper images
+
+### defaultWallpaper
+
+- **Type:** `string`
+- **Default:** `"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png"`
+	- Preview:
+	
+		![Default wallpaper](https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png)
+
+URL of default wallpaper image
+
+### fileIcons
+
+- **Type:** `FileIcons`
+
+URLs of icons for types of files
+
+```ts
+interface FileIcons {
+	generic: string;
+	info?: string;
+	text?: string;
+	code?: string;
+}
+```
+
+### folderIcons
+
+- **Type:** `FolderIcons`
+
+URLs of icons for types of folders
+
+```ts
+interface FolderIcons {
+	generic: string;
+	images?: string;
+	text?: string;
+	link?: string;
+}
+```
+
+### loadStyleSheet
+
+- **Type:** `() => void`
+- **Example:** 
+
+	```ts
+	function loadStyleSheet() {
+		import("../styles/skins/macOs.css");
+	}
+	```
+
+Function that dynamically imports style sheet

packages/docs/src/reference/classes/system/apps-config.md

@@ -14,10 +14,12 @@ outline: deep
 
 #### options
 
-- options.apps : [`App[]`](app)
+- options.apps : [`App[]`](../apps/app)
 
 ## Properties
 
-### apps : [`App[]`](app) {#apps}
+### apps
+
+- **Type:** [`App[]`](../apps/app)
 
 An array of applications

packages/docs/src/reference/classes/system/desktop-config.md

@@ -14,44 +14,11 @@ outline: deep
 
 #### options
 
-- options.wallpapers : `string[]`
-- options.defaultWallpaper : `string`
 - options.defaultIconSize : `0 | 1 | 2`
 - options.defaultIconDirection : `0 | 1`
 
 ## Properties
 
-### wallpapers : `string[]` {#wallpapers}
-
-Array of URLs of wallpaper images
-
-> **@default**
-> 
-> ```ts
-> [
-> 	"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
-> 	"https://os.prozilla.dev/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
-> 	"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-purple-yellow.png",
-> 	"https://os.prozilla.dev/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
-> 	"https://os.prozilla.dev/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png",
-> 	"https://os.prozilla.dev/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png",
-> 	"https://os.prozilla.dev/assets/wallpapers/colorful-mesh-gradient-red-green.png",
-> 	"https://os.prozilla.dev/assets/wallpapers/flame-abstract-wallpaper-orange.png",
-> 	"https://os.prozilla.dev/assets/wallpapers/wave-abstract-wallpaper-teal.png",
-> ]
-> ```
-
-### defaultWallpaper : `string` {#default-wallpaper}
-
-URL of default wallpaper image
-
-> **@default**
-> 
-> ```ts
-> "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png"
-> ```
-> ![Preview](https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png)
-
 ### defaultIconSize : `0 | 1 | 2` {#default-icon-size}
 
 The default size of the desktop icons

packages/docs/src/reference/classes/system/virtual-drive-config.md

@@ -1,114 +0,0 @@
----
-outline: deep
----
-
-# Class [`VirtualDriveConfig`](https://github.com/prozilla-os/ProzillaOS/blob/main/packages/core/src/features/system/configs/virtualDriveConfig.ts)
-
-## Constructor
-
-> `new VirtualDriveConfig(options)`
-
-### Parameters
-
-<br>
-
-#### options
-
-- options.fileIcon : `string`
-- options.infoFileIcon : `string`
-- options.textFileIcon : `string`
-- options.codeFileIcon : `string`
-- options.folderIcon : `string`
-- options.imagesFolderIcon : `string`
-- options.textFolderIcon : `string`
-- options.folderLinkIcon : `string`
-
-## Properties
-
-### fileIcon : `string` {#file-icon}
-
-URL of an icon for regular files
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file.svg"
-> ```
-> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/file.svg)
-
-### infoFileIcon : `string` {#info-file-icon}
-
-URL of an icon for information files
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-info.svg"
-> ```
-> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/file-info.svg)
-
-### textFileIcon : `string` {#text-file-icon}
-
-URL of an icon for text files
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-text.svg"
-> ```
-> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/file-text.svg)
-
-### codeFileIcon : `string` {#code-file-icon}
-
-URL of an icon for code files
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-code.svg"
-> ```
-> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/file-code.svg)
-
-### folderIcon : `string` {#folder-icon}
-
-URL of an icon for regular folders
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder.svg"
-> ```
-> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/folder.svg)
-
-### imagesFolderIcon : `string` {#images-folder-icon}
-
-URL of an icon for image folders
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-images.svg"
-> ```
-> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-images.svg)
-
-### textFolderIcon : `string` {#text-folder-icon}
-
-URL of an icon for text folders
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-text.svg"
-> ```
-> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-text.svg)
-
-### folderLinkIcon : `string` {#folder-link-icon}
-
-URL of an icon for folder links
-
-> **@default**
->
-> ```ts
-> "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-link.svg"
-> ```
-> ![Preview](https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-link.svg)

packages/docs/src/reference/configuration.md

@@ -28,6 +28,10 @@ To configure ProzillaOS, pass the following properties inside to the `config` pr
 > "Web-based Operating System"
 > ```
 
+### skin : [`Skin`](./classes/skins/skin) {#skin}
+
+<br>
+
 ### config
 
 <br>
@@ -40,7 +44,6 @@ To configure ProzillaOS, pass the following properties inside to the `config` pr
 - config.modals : [`ModalsConfig`](classes/system/modals-config)
 - config.taskbar : [`TaskbarConfig`](classes/system/taskbar-config)
 - config.tracking : [`TrackingConfig`](classes/system/tracking-config)
-- config.virtualDrive : [`VirtualDriveConfig`](classes/system/virtual-drive-config)
 - config.windows : [`WindowsConfig`](classes/system/windows-config)
 
 ## Example
@@ -49,6 +52,9 @@ To configure ProzillaOS, pass the following properties inside to the `config` pr
 <ProzillaOS
 	systemName={"ProzillaOS"}
 	tagLine={"Web-based Operating System"}
+	skin={new Skin({
+		defaultWallpaper: "/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png"
+	})}
 	config={{
 		apps: new AppsConfig({
 			apps: [

packages/docs/src/reference/packages.md

@@ -10,6 +10,7 @@ These packages are different modules of ProzillaOS that can be installed separat
 
 - [`prozilla-os`](https://www.npmjs.com/package/prozilla-os): A bundle containing `@prozilla-os/core` and all standard applications
 - [`@prozilla-os/core`](https://www.npmjs.com/package/@prozilla-os/core): Core functionality, React components and hooks
+- [`@prozilla-os/skins`](https://www.npmjs.com/package/@prozilla-os/skins): Customizable skins for ProzillaOS
 - [`@prozilla-os/shared`](https://www.npmjs.com/package/@prozilla-os/shared): Shared functions and utilities
 
 ## Standard applications

packages/prozilla-os/CHANGELOG.md

@@ -1,5 +1,20 @@
 # prozilla-os
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated skins and configuration
+- Updated dependencies
+  - @prozilla-os/core@1.1.1
+  - @prozilla-os/browser@1.0.4
+  - @prozilla-os/calculator@1.0.4
+  - @prozilla-os/file-explorer@1.0.15
+  - @prozilla-os/media-viewer@1.0.4
+  - @prozilla-os/settings@1.0.4
+  - @prozilla-os/terminal@1.0.8
+  - @prozilla-os/text-editor@1.0.8
+
 ## 1.1.0
 
 ### Minor Changes

packages/prozilla-os/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "prozilla-os",
 	"description": "a React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",
@@ -12,7 +12,7 @@
 	"main": "dist/main.js",
 	"types": "dist/main.d.ts",
 	"scripts": {
-		"build": "tsc --project tsconfig-build.json && vite build"
+		"build": "tsc --project tsconfig.build.json && vite build"
 	},
 	"repository": {
 		"type": "git",

packages/prozilla-os/vite.config.ts

@@ -16,7 +16,7 @@ export default defineConfig({
 			strictOutput: true,
 			pathsToAliases: false,
 			bundledPackages: ["@prozilla-os/*"],
-			tsconfigPath: "tsconfig-build.json"
+			tsconfigPath: "tsconfig.build.json"
 		})
 	],
 	build: {

packages/skins/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @prozilla-os/skins
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated skins and configuration

packages/skins/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/skins",
 	"description": "A React library that contains skins for ProzillaOS.",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",

packages/skins/src/core/skin.ts

@@ -1,40 +1,93 @@
+import { OptionalInterface } from "../types/utils";
+
 interface SkinOptions {
+	/**
+	 * Replacements for app icons based on app id
+	 */
 	appIcons?: { [key: string]: string };
 
-	wallpapers?: string[];
+	/**
-	defaultWallpaper?: string;
+	 * Replacements for app names based on app id
+	 */
+	appNames?: { [key: string]: string };
 
-	fileIcons?: {
+	/**
+	 * Array of URLs of wallpaper images
+	 */
+	wallpapers: string[];
+
+	/**
+	 * URL of default wallpaper image
+	 * @default
+	 * "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png"
+	 */
+	defaultWallpaper: string;
+
+	/**
+	 * URLs of icons for types of files
+	 */
+	fileIcons: {
 		generic: string;
 		info?: string;
 		text?: string;
 		code?: string;
 	};
 
-	folderIcons?: {
+	/**
+	 * URLs of icons for types of folders
+	 */
+	folderIcons: {
 		generic: string;
 		images?: string;
 		text?: string;
 		link?: string;
 	};
 
+	/**
+	 * Function that dynamically imports style sheet
+	 */
 	loadStyleSheet?: () => void;
 }
 
 export class Skin {
 	appIcons: SkinOptions["appIcons"];
+	appNames: SkinOptions["appNames"];
 	wallpapers: SkinOptions["wallpapers"];
 	defaultWallpaper: SkinOptions["defaultWallpaper"];
 	fileIcons: SkinOptions["fileIcons"];
 	folderIcons: SkinOptions["folderIcons"];
 	loadStyleSheet: SkinOptions["loadStyleSheet"];
 
-	constructor(options: SkinOptions) {
+	constructor(options: OptionalInterface<SkinOptions> = {}) {
 		this.appIcons = options.appIcons;
-		this.wallpapers = options.wallpapers;
+		this.appNames = options.appNames;
-		this.defaultWallpaper = options.defaultWallpaper;
+
-		this.fileIcons = options.fileIcons;
+		this.wallpapers = options.wallpapers ?? [
-		this.folderIcons = options.folderIcons;
+			"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
+			"https://os.prozilla.dev/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
+			"https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-purple-yellow.png",
+			"https://os.prozilla.dev/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
+			"https://os.prozilla.dev/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png",
+			"https://os.prozilla.dev/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png",
+			"https://os.prozilla.dev/assets/wallpapers/colorful-mesh-gradient-red-green.png",
+			"https://os.prozilla.dev/assets/wallpapers/flame-abstract-wallpaper-orange.png",
+			"https://os.prozilla.dev/assets/wallpapers/wave-abstract-wallpaper-teal.png",
+		];
+		this.defaultWallpaper = options.defaultWallpaper ?? "https://os.prozilla.dev/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png";
+
+		this.fileIcons = options.fileIcons ?? {
+			generic: "https://os.prozilla.dev/assets/apps/file-explorer/icons/file.svg",
+			text: "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-text.svg",
+			info: "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-info.svg",
+			code: "https://os.prozilla.dev/assets/apps/file-explorer/icons/file-code.svg"
+		};
+		this.folderIcons = options.folderIcons ?? {
+			generic: "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder.svg",
+			images: "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-images.svg",
+			text: "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-text.svg",
+			link: "https://os.prozilla.dev/assets/apps/file-explorer/icons/folder-link.svg"
+		};
+
 		this.loadStyleSheet = options.loadStyleSheet;
 	}
 }

packages/skins/src/styles/skins/minimal.css

@@ -0,0 +1 @@
+/* TO DO */

packages/skins/src/types/utils.ts

@@ -0,0 +1,3 @@
+export type OptionalInterface<Interface> = {
+	[Property in keyof Interface]?: Interface[Property];
+};