Update Theme Settings.

appinstaller/filepath.h

@@ -1050,7 +1050,16 @@ public ref class _I_Entry
 			using namespace System;
 			try
 			{
-				auto uri = gcnew System::Uri (System::IO::Path::GetFullPath (path));
+				System::Uri ^uri = nullptr;
+				try
+				{
+					uri = gcnew System::Uri (path);
+				}
+				catch (Exception ^)
+				{
+					uri = gcnew System::Uri (System::IO::Path::GetFullPath (path));
+				}
+				if (!uri) return String::Empty;
 				auto uriText = uri->AbsoluteUri;
 				return uriText;
 			}
@@ -1058,6 +1067,38 @@ public ref class _I_Entry
 		}
 	}
 	property String ^FullPath { String ^get () { return System::IO::Path::GetFullPath (path); }}
+	String ^RelativePath (String ^frontdir)
+	{
+		auto filepath = path;
+		if (String::IsNullOrEmpty (filepath) || String::IsNullOrEmpty (frontdir)) return String::Empty;
+		try
+		{
+			String ^fullFile = System::IO::Path::GetFullPath (filepath);
+			String ^fullDir = System::IO::Path::GetFullPath (frontdir);
+			if (!fullDir->EndsWith (System::IO::Path::DirectorySeparatorChar.ToString ()))
+				fullDir += System::IO::Path::DirectorySeparatorChar;
+
+			// 比较盘符（跨盘直接失败）
+			if (!String::Equals (
+				System::IO::Path::GetPathRoot (fullFile),
+				System::IO::Path::GetPathRoot (fullDir),
+				StringComparison::OrdinalIgnoreCase))
+			{
+				return String::Empty;
+			}
+
+			// 必须以目录为前缀
+			if (!fullFile->StartsWith (fullDir, StringComparison::OrdinalIgnoreCase))
+				return String::Empty;
+
+			// 截取相对部分
+			return fullFile->Substring (fullDir->Length);
+		}
+		catch (Exception^)
+		{
+			return String::Empty;
+		}
+	}
 };
 [ComVisible (true)]
 public ref class _I_File: public _I_Entry

settings/bridge.h

@@ -264,7 +264,16 @@ public ref class _I_Entry
 			using namespace System;
 			try
 			{
-				auto uri = gcnew System::Uri (System::IO::Path::GetFullPath (path));
+				System::Uri ^uri = nullptr;
+				try
+				{
+					uri = gcnew System::Uri (path);
+				} 
+				catch (Exception ^)
+				{
+					uri = gcnew System::Uri (System::IO::Path::GetFullPath (path));
+				}
+				if (!uri) return String::Empty;
 				auto uriText = uri->AbsoluteUri;
 				return uriText;
 			}
@@ -272,6 +281,38 @@ public ref class _I_Entry
 		}
 	}
 	property String ^FullPath { String ^get () { return System::IO::Path::GetFullPath (path); }}
+	String ^RelativePath (String ^frontdir)
+	{
+		auto filepath = path;
+		if (String::IsNullOrEmpty (filepath) || String::IsNullOrEmpty (frontdir)) return String::Empty;
+		try
+		{
+			String ^fullFile = System::IO::Path::GetFullPath (filepath);
+			String ^fullDir = System::IO::Path::GetFullPath (frontdir);
+			if (!fullDir->EndsWith (System::IO::Path::DirectorySeparatorChar.ToString ()))
+				fullDir += System::IO::Path::DirectorySeparatorChar;
+
+			// 比较盘符（跨盘直接失败）
+			if (!String::Equals (
+				System::IO::Path::GetPathRoot (fullFile),
+				System::IO::Path::GetPathRoot (fullDir),
+				StringComparison::OrdinalIgnoreCase))
+			{
+				return String::Empty;
+			}
+
+			// 必须以目录为前缀
+			if (!fullFile->StartsWith (fullDir, StringComparison::OrdinalIgnoreCase))
+				return String::Empty;
+
+			// 截取相对部分
+			return fullFile->Substring (fullDir->Length);
+		}
+		catch (Exception^)
+		{
+			return String::Empty;
+		}
+	}
 };
 [ComVisible (true)]
 public ref class _I_File: public _I_Entry

settings/main.cpp

@@ -19,6 +19,8 @@
 #include <rapidjson\stringbuffer.h>
 #include <tlhelp32.h>
 #include <Psapi.h>
+#include <cliext/vector>
+#include <cliext/utility>
 #include "module.h"
 #include "themeinfo.h"
 #include "mpstr.h"
@@ -36,6 +38,8 @@
 
 using namespace System;
 using namespace System::Runtime::InteropServices;
+using namespace System::IO::Compression;
+using namespace System::Text;
 
 #ifdef _DEBUG
 #define DEBUGMODE true
@@ -665,6 +669,38 @@ rapidjson::Document GetFileVersionAsJson (const std::wstring &filePath)
 	}
 	return doc;
 }
+size_t ExploreSaveFile (
+	HWND hParent,
+	std::vector<std::wstring> &results,
+	LPWSTR lpFilter = L"Windows Store App Package (*.appx; *.appxbundle)\0*.appx;*.appxbundle",
+	const std::wstring &lpDefExt = L"appx",
+	DWORD dwFlags = OFN_OVERWRITEPROMPT | OFN_PATHMUSTEXIST | OFN_HIDEREADONLY,
+	const std::wstring &swWndTitle = std::wstring (L"Please select the file to save: "),
+	const std::wstring &swInitDir = GetFileDirectoryW (g_lastfile))
+{
+	results.clear ();
+	const DWORD BUFFER_SIZE = 65536; // 64KB
+	std::vector <WCHAR> buffer (BUFFER_SIZE, 0);
+	OPENFILENAME ofn;
+	ZeroMemory (&ofn, sizeof (ofn));
+	ofn.hwndOwner = hParent;
+	ofn.lpstrFile = buffer.data ();
+	ofn.nMaxFile = BUFFER_SIZE;
+	ofn.lpstrFilter = lpFilter;
+	ofn.nFilterIndex = 1;
+	ofn.lpstrTitle = swWndTitle.c_str ();
+	ofn.lpstrDefExt = lpDefExt.c_str ();
+	ofn.Flags = dwFlags;
+	ofn.lpstrInitialDir = swInitDir.c_str ();
+	ofn.lStructSize = sizeof (ofn);
+	if (GetSaveFileNameW (&ofn))
+	{
+		std::wstring filePath = buffer.data ();
+		results.push_back (filePath);
+		g_lastfile = filePath;
+	}
+	return results.size ();
+}
 
 [ComVisible (true)]
 public ref class SplashForm: public System::Windows::Forms::Form
@@ -888,6 +924,141 @@ bool CopyFileWithDialog (const std::wstring &src, const std::wstring &dst)
 	bool ok = SUCCEEDED (hr);
 	return ok;
 }
+// pkginfo 中的内容以 UTF8 保存为 themeinfo.json 文件，并位于压缩包根目录。
+// 该文件仅在压缩包中存在，是为了方便读取主题文件信息的文件。当压缩或解压完毕后该文件会在磁盘中删除。
+void CompressToThemePackage (String ^srcfolder, String ^destfile, String ^pkginfo, String ^id)
+{
+	if (!Directory::Exists (srcfolder))
+		throw gcnew DirectoryNotFoundException (srcfolder);
+
+	if (File::Exists (destfile))
+		File::Delete (destfile);
+
+	FileStream^ fs = gcnew FileStream (destfile, FileMode::CreateNew);
+	ZipArchive^ zip = gcnew ZipArchive (fs, ZipArchiveMode::Create);
+
+	try
+	{
+		array<String^>^ files = Directory::GetFiles (srcfolder, "*", SearchOption::AllDirectories);
+		for each (String^ file in files)
+		{
+			String^ relativePath = file->Substring (srcfolder->Length);
+
+			// 去掉开头的分隔符
+			if (relativePath->StartsWith (Path::DirectorySeparatorChar.ToString ()) ||
+				relativePath->StartsWith (Path::AltDirectorySeparatorChar.ToString ()))
+			{
+				relativePath = relativePath->Substring (1);
+			}
+
+			// 如果是 custom.css 就改名为 {id}.css
+			if (relativePath->Equals ("custom.css", StringComparison::OrdinalIgnoreCase))
+			{
+				relativePath = id->Trim () + ".css";
+			}
+
+			ZipArchiveEntry^ entry = zip->CreateEntry (relativePath, CompressionLevel::Optimal);
+			Stream^ entryStream = entry->Open ();
+			FileStream^ fileStream = gcnew FileStream (file, FileMode::Open, FileAccess::Read);
+
+			array<Byte>^ buffer = gcnew array<Byte> (4096);
+			int bytesRead;
+			while ((bytesRead = fileStream->Read (buffer, 0, buffer->Length)) > 0)
+			{
+				entryStream->Write (buffer, 0, bytesRead);
+			}
+
+			fileStream->Close ();
+			entryStream->Close ();
+		}
+
+		// 添加 themeinfo.json
+		ZipArchiveEntry^ infoEntry = zip->CreateEntry ("themeinfo.json", CompressionLevel::Optimal);
+		Stream^ infoStream = infoEntry->Open ();
+		array<Byte>^ infoBytes = Encoding::UTF8->GetBytes (pkginfo);
+		infoStream->Write (infoBytes, 0, infoBytes->Length);
+		infoStream->Close ();
+	}
+	finally
+	{
+		delete zip;
+		delete fs;
+	}
+}
+String ^GetThemePackageInfo (String ^pkgfile)
+{
+	if (!File::Exists (pkgfile)) throw gcnew FileNotFoundException ("Theme package not found.", pkgfile);
+	FileStream^ fs = gcnew FileStream (pkgfile, FileMode::Open, FileAccess::Read);
+	ZipArchive^ zip = gcnew ZipArchive (fs, ZipArchiveMode::Read);
+	try
+	{
+		ZipArchiveEntry^ infoEntry = zip->GetEntry ("themeinfo.json");
+		if (infoEntry == nullptr)
+			throw gcnew InvalidDataException ("themeinfo.json not found in theme package.");
+		Stream^ stream = infoEntry->Open ();
+		StreamReader^ reader = gcnew StreamReader (stream, Encoding::UTF8);
+		String^ json = reader->ReadToEnd ();
+		reader->Close ();
+		stream->Close ();
+		return json;
+	}
+	finally
+	{
+		delete zip;
+		delete fs;
+	}
+}
+void ExtractThemePackage (String ^pkgfile, String ^destfolder)
+{
+	if (!File::Exists (pkgfile)) throw gcnew FileNotFoundException ("Theme package not found.", pkgfile);
+	if (Directory::Exists (destfolder)) Directory::Delete (destfolder);
+	if (!Directory::Exists (destfolder)) Directory::CreateDirectory (destfolder);
+	FileStream^ fs = gcnew FileStream (pkgfile, FileMode::Open, FileAccess::Read);
+	ZipArchive^ zip = gcnew ZipArchive (fs, ZipArchiveMode::Read);
+	try
+	{
+		for each (ZipArchiveEntry^ entry in zip->Entries)
+		{
+			String^ outPath = Path::Combine (destfolder, entry->FullName);
+
+			// 目录项
+			if (String::IsNullOrEmpty (entry->Name))
+			{
+				if (!Directory::Exists (outPath))
+					Directory::CreateDirectory (outPath);
+				continue;
+			}
+
+			// 确保目录存在
+			String^ dir = Path::GetDirectoryName (outPath);
+			if (!String::IsNullOrEmpty (dir) && !Directory::Exists (dir))
+				Directory::CreateDirectory (dir);
+
+			// 写文件
+			Stream^ inStream = entry->Open ();
+			FileStream^ outStream = gcnew FileStream (
+				outPath,
+				FileMode::Create,
+				FileAccess::Write
+			);
+
+			array<Byte>^ buffer = gcnew array<Byte> (4096);
+			int bytesRead;
+			while ((bytesRead = inStream->Read (buffer, 0, buffer->Length)) > 0)
+			{
+				outStream->Write (buffer, 0, bytesRead);
+			}
+
+			outStream->Close ();
+			inStream->Close ();
+		}
+	}
+	finally
+	{
+		delete zip;
+		delete fs;
+	}
+}
 [ComVisible (true)]
 public ref class MainHtmlWnd: public System::Windows::Forms::Form, public IScriptBridge
 {
@@ -1100,6 +1271,44 @@ public ref class MainHtmlWnd: public System::Windows::Forms::Form, public IScrip
 		}
 		uint64_t GetFileSize (String ^filepath) { return ::GetFileSize (filepath); }
 		bool ShellCopyFile (String ^src, String ^desc) { return CopyFileWithDialog (MPStringToStdW (src), MPStringToStdW (desc)); }
+		String ^GetSavePath (String ^filter, String ^defext, DWORD flags, String ^wndtitle, String ^initdir)
+		{
+			std::vector <std::wstring> ret;
+			std::wstring filterbuf = MPStringToStdW (filter) + L'|||';
+			for (auto &it : filterbuf) if (it == L'|') it = L'\0';
+			ExploreSaveFile (wndinst->InvokeGetHWND (), ret, (LPWSTR)filterbuf.data (), MPStringToStdW (defext), flags, MPStringToStdW (wndtitle), MPStringToStdW (initdir));
+			for (auto &it : ret) if (!IsNormalizeStringEmpty (it)) return CStringToMPString (it);
+			return "";
+		}
+		void CompressTheme (String ^srcfolder, String ^destfile, String ^pkginfo, String ^id) { CompressToThemePackage (srcfolder, destfile, pkginfo, id); }
+		String ^GetThemePkgInfo (String ^themepkg) { return GetThemePackageInfo (themepkg); }
+		void ExtraceThemePkg (String ^src, String ^desc) { ExtractThemePackage (src, desc); }
+		bool CopyFile (String^ srcFile, String^ destFile, bool cover)
+		{
+			try
+			{
+				if (String::IsNullOrEmpty (srcFile) || String::IsNullOrEmpty (destFile))
+					return false;
+
+				if (!File::Exists (srcFile))
+					throw gcnew FileNotFoundException ("Source file not found.", srcFile);
+
+				// 确保目标目录存在
+				String^ destDir = Path::GetDirectoryName (destFile);
+				if (!String::IsNullOrEmpty (destDir) && !Directory::Exists (destDir))
+				{
+					Directory::CreateDirectory (destDir);
+				}
+
+				// overwrite = true
+				File::Copy (srcFile, destFile, cover);
+				return true;
+			}
+			catch (Exception^)
+			{
+				return false;
+			}
+		}
 		void CloseWindow ()
 		{
 			if (wndinst && wndinst->IsHandleCreated) wndinst->Close ();

settings/settings.vcxproj

@@ -196,6 +196,10 @@
     <Reference Include="System.Drawing">
       <HintPath>C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.Drawing.dll</HintPath>
     </Reference>
+    <Reference Include="System.IO.Compression" />
+    <Reference Include="System.IO.Compression.FileSystem">
+      <HintPath>C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.IO.Compression.FileSystem.dll</HintPath>
+    </Reference>
     <Reference Include="System.Net">
       <HintPath>C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.Net.dll</HintPath>
     </Reference>

shared/html/applist.html

@@ -60,7 +60,7 @@
             right: 0;
             bottom: 0;
             border: 2px solid rgb(42, 42, 42);
-            background-color: white;
+            /* background-color: white; */
             overflow: hidden;
             box-sizing: border-box;
         }
@@ -77,7 +77,7 @@
             align-items: center;
             padding: 0 23px;
             box-sizing: border-box;
-            background: white;
+            /* background: white; */
             z-index: 1;
         }
         
@@ -88,7 +88,7 @@
             width: 100%;
             height: 118px;
             box-sizing: border-box;
-            background: white;
+            /* background: white; */
             z-index: 1;
             padding-bottom: 24px;
             padding-top: 11px;
@@ -244,16 +244,36 @@
             padding-top: 5pt;
             font-weight: normal;
         }
+        
+        .applist-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            box-sizing: border-box;
+            background-size: cover;
+            background-attachment: fixed;
+            background-repeat: no-repeat;
+            background-position: center center;
+        }
     </style>
     <link rel="stylesheet" type="text/css" href="theme/light/default/default.css" id="theme-style">
     <script type="text/javascript" src="js/theme.js"></script>
+    <script type="text/javascript" src="js/params.js"></script>
     <script>
         OnLoad.add(function() {
+            window.displayMode = "normal";
+            window.setThemeId = "default";
+            window.setThemeColor = 0xFFFFFF;
             try {
                 var p = params;
                 var keys = Object.keys(p);
                 var hasidparam = false;
                 var hascolorparam = false;
+                try {
+                    displayMode = p["mode"];
+                } catch (e) {}
                 for (var i = 0; i < keys.length; i++) {
                     var key = keys[i];
                     if (key.indexOf("color") >= 0) {
@@ -264,16 +284,75 @@
                     }
                 }
                 if (hasidparam && hascolorparam) {
+                    window.setThemeColor = p["color"];
+                    window.setThemeId = p["id"];
                     Theme.currentColor = parseInt(p["color"]);
                     Theme.currentTheme = p["id"];
                 } else {
                     throw new Error("Invalid parameters.");
                 }
             } catch (e) {
-                Theme.refresh();
+                try {
+                    Theme.refresh();
+                } catch (e) {}
+            }
+            if (displayMode === "preview") {
+                var applist = document.querySelector(".applist-window");
+                applist.style.left = "10px";
+                applist.style.top = "10px";
+                applist.style.right = "10px";
+                applist.style.bottom = "10px";
+                var applistbg = document.querySelector(".applist-background");
+                applistbg.style.left = "10px";
+                applistbg.style.top = "10px";
+                applistbg.style.right = "10px";
+                applistbg.style.bottom = "10px";
+                document.body.style.backgroundColor = "gray";
+                var cancelbtn = document.querySelector(".applist-btn-cancel");
+                cancelbtn.style.width = "auto";
+                window.Bridge = {
+                    String: {
+                        tolower: function(str) {
+                            return str;
+                        }
+                    }
+                };
+                var winjsCss = document.getElementById("winjs-style");
+                if (winjsCss) {
+                    winjsCss.setAttribute("href", "libs/winjs/2.0/css/ui-" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + ".css");
+                }
+                var themeCss = document.getElementById("theme-style");
+                if (themeCss) {
+                    themeCss.setAttribute("href", "theme/" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + "/" + window.setThemeId + "/" + window.setThemeId + ".css");
+                }
+                var previewpanel = document.getElementById("preview-operator-panel");
+                if (previewpanel) {
+                    previewpanel.style.display = "";
+                }
+                var itemslen = 10;
+                var colorstrformat = "rgb({0},{1},{2})";
+                for (var i = 0; i < itemslen; i++) {
+                    var title = "My Application" + i;
+                    var logo = "images/applogo.default.png";
+                    var appid = "appid" + i;
+                    var color = colorstrformat.replace("{0}", Math.floor(Math.random() * 256) % 256).replace("{1}", Math.floor(Math.random() * 256) % 256).replace("{2}", Math.floor(Math.random() * 256) % 256);
+                    addAppToList(title, logo, appid, color);
+                }
             }
         });
     </script>
+    <style>
+        #preview-operator-panel {
+            position: absolute;
+            background-color: rgba(0, 0, 0, 0.3);
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            box-sizing: border-box;
+            padding: 5px;
+            color: white;
+        }
+    </style>
 </head>
 
 <body>
@@ -288,15 +367,16 @@
                 <span class="applist-font-text">My Application0</span>
             </div>
         </div>
-        <div class="applist-window win10">
-            <div class="applist-title">
-                <span class="applist-font-title" data-res-byname="IDS_APPLIST_TITLE"></span>
-            </div>
-            <div class="applist-listview">
-            </div>
-            <div class="applist-control">
-                <button class="applist-btn-cancel win-commandbutton div-button-size div-std-button-center" onclick="Bridge.Frame.callEvent ('OnPress_CancelButton')" tabindex="0" data-res-byname="IDS_APPLIST_CANCEL"></button>
-            </div>
+    </div>
+    <div class="applist-background"></div>
+    <div class="applist-window win10">
+        <div class="applist-title">
+            <span class="applist-font-title" data-res-byname="IDS_APPLIST_TITLE"></span>
+        </div>
+        <div class="applist-listview">
+        </div>
+        <div class="applist-control">
+            <button class="applist-btn-cancel win-commandbutton div-button-size div-std-button-center" onclick="Bridge.Frame.callEvent ('OnPress_CancelButton')" tabindex="0" data-res-byname="IDS_APPLIST_CANCEL"></button>
         </div>
     </div>
     <script>
@@ -426,6 +506,50 @@
             global.setWindows10Style = setWindows10Style;
         })(this);
     </script>
+    <div id="preview-operator-panel" style="display: none;">
+        <input type="checkbox" id="preview-operator-win10style" />
+        <label for="preview-operator-win10style">Windows 10 Style</label>
+        <script>
+            (function() {
+                var preview_operator_panel = document.getElementById("preview-operator-panel");
+                var preview_operator_win10style = document.getElementById("preview-operator-win10style");
+                var page = document.querySelector(".applist-window");
+                Windows.UI.Event.Util.addEvent(preview_operator_win10style, "change", function() {
+                    if (this.checked) page.classList.add("win10");
+                    else page.classList.remove("win10");
+                });
+                if (preview_operator_win10style.checked) {
+                    page.classList.add("win10");
+                } else {
+                    page.classList.remove("win10");
+                }
+                OnLoad.add(function() {
+                    setTimeout(function() {
+                        if (displayMode === "preview") {
+                            var subnodes = page.querySelectorAll("*");
+                            for (var i = 0; i < subnodes.length; i++) {
+                                var subnode = subnodes[i];
+                                try {
+                                    if (subnode.classList.contains("applist-list-item") || subnode.classList.contains("applist-item-picbox") || subnode.classList.contains("applist-item-pic") || subnode.className.indexOf("applist-item-") >= 0) continue;
+                                } catch (e) {}
+                                var mark = "";
+                                if (subnode.hasAttribute("id")) {
+                                    mark += "Id: {" + subnode.getAttribute("id") + "} ";
+                                }
+                                if (subnode.hasAttribute("class")) {
+                                    mark += "Class: {" + subnode.getAttribute("class") + "} ";
+                                }
+                                if (subnode.hasAttribute("data-res-byname")) {
+                                    mark += "Res: {" + subnode.getAttribute("data-res-byname") + "} ";
+                                }
+                                subnode.appendChild(document.createTextNode(mark));
+                            }
+                        }
+                    }, 0);
+                });
+            })();
+        </script>
+    </div>
 </body>
 
 </html>

shared/html/css/pages.css

@@ -65,7 +65,7 @@ body * {
     margin: 0px;
     padding: 0px;
     border: 0px;
-    background-color: #f3f3f3;
+    /* background-color: #f3f3f3; */
 }
 
 .pagecontainer.full {
@@ -78,6 +78,13 @@ body * {
     max-height: 100%;
 }
 
+.pagecontainer.background {
+    background-size: cover;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
 .pagecontainer>.page {
     position: relative;
     overflow-x: hidden;

shared/html/install.html

@@ -28,13 +28,20 @@
     <script type="text/javascript" src="libs/msgbox/msgbox.js"></script>
     <link rel="stylesheet" type="text/css" href="theme/light/default/default.css" id="theme-style">
     <script type="text/javascript" src="js/theme.js"></script>
+    <script type="text/javascript" src="js/params.js"></script>
     <script>
         OnLoad.add(function() {
+            window.displayMode = "normal";
+            window.setThemeId = "default";
+            window.setThemeColor = 0xFFFFFF;
             try {
                 var p = params;
                 var keys = Object.keys(p);
                 var hasidparam = false;
                 var hascolorparam = false;
+                try {
+                    displayMode = p["mode"];
+                } catch (e) {}
                 for (var i = 0; i < keys.length; i++) {
                     var key = keys[i];
                     if (key.indexOf("color") >= 0) {
@@ -45,20 +52,70 @@
                     }
                 }
                 if (hasidparam && hascolorparam) {
+                    window.setThemeColor = p["color"];
+                    window.setThemeId = p["id"];
                     Theme.currentColor = parseInt(p["color"]);
                     Theme.currentTheme = p["id"];
                 } else {
                     throw new Error("Invalid parameters.");
                 }
             } catch (e) {
-                Theme.refresh ();
+                try {
+                    Theme.refresh();
+                } catch (e) {}
+            }
+            if (displayMode === "preview") {
+                var preview = document.getElementById("preview-operator-panel");
+                var winjsCss = document.getElementById("winjs-style");
+                if (winjsCss) {
+                    winjsCss.setAttribute("href", "libs/winjs/2.0/css/ui-" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + ".css");
+                }
+                var themeCss = document.getElementById("theme-style");
+                if (themeCss) {
+                    themeCss.setAttribute("href", "theme/" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + "/" + window.setThemeId + "/" + window.setThemeId + ".css");
+                }
+                if (preview) {
+                    preview.style.display = "";
+                }
             }
         });
     </script>
+    <style>
+        #preview-operator-panel {
+            position: absolute;
+            background-color: rgba(0, 0, 0, 0.3);
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            box-sizing: border-box;
+            padding: 5px;
+            color: white;
+        }
+    </style>
 </head>
 
 <body>
-    <div id="page-container" class="pagecontainer full">
+    <div id="page-background" class="pagecontainer full background"></div>
+    <script>
+        (function() {
+            var backgroundiv = document.getElementById("page-background");
+            if (backgroundiv) {
+                var storage = Bridge.External.Storage;
+                var path = storage.path;
+                if (Theme.useCustomBackgroundImage) {
+                    var imgpath = Theme.suitableBackgroundImage;
+                    try {
+                        var imgfile = storage.getFile(imgpath);
+                        if (!imgfile.exist) return;
+                        var relative = imgfile.relativePath(path.combine(path.root, "html"));
+                        var backgroundImage = "url('" + relative.replace("\\", "/") + "')";
+                        backgroundiv.style.backgroundImage = backgroundImage;
+                    } catch (e) {}
+                }
+            }
+        })();
+    </script>
+    <div id="page-container" class="pagecontainer full main">
         <div class="page splash">
             <!-- Splash Screen -->
             <img class="splash" src="images/splash.default.png" alt="Splash Screen" width="620" height="300">
@@ -368,6 +425,81 @@
             });
         })();
     </script>
+    <div id="preview-operator-panel" style="display: none;">
+        <label>Please select the page: </label><br>
+        <select id="preview-operator-select" value="splash">
+            <option value="splash">Splash Screen</option>
+            <option value="select">Package Select</option>
+            <option value="preinstall">Pre-install</option>
+            <option value="installing">Installing</option>
+            <option value="installsuccess">Install Successfully</option>
+            <option value="installfailed">Install Failed</option>
+        </select><br>
+        <input type="checkbox" id="preview-operator-checkbox">
+        <label for="preview-operator-checkbox">Multiple Package Page</label><br>
+        <input type="checkbox" id="preview-operator-progress">
+        <label for="preview-operator-progress">Show Progress Bar with Value</label>
+        <script>
+            (function() {
+                var preview_operator_panel = document.getElementById("preview-operator-panel");
+                var preview_operator_select = document.getElementById("preview-operator-select");
+                var preview_operator_checkbox = document.getElementById("preview-operator-checkbox");
+                var preview_operator_progress = document.getElementById("preview-operator-progress");
+                var eventutils = Windows.UI.Event.Util;
+                var page = document.querySelector("#page-container .page");
+
+                function clearPageClass() {
+                    page.setAttribute("class", "page");
+                }
+                eventutils.addEvent(preview_operator_select, "change", function() {
+                    clearPageClass();
+                    page.classList.add(preview_operator_select.value);
+                    if (preview_operator_checkbox.checked) {
+                        page.classList.add("multiple");
+                    } else {
+                        page.classList.remove("multiple");
+                    }
+                });
+                eventutils.addEvent(preview_operator_checkbox, "change", function() {
+                    clearPageClass();
+                    page.classList.add(preview_operator_select.value);
+                    if (preview_operator_checkbox.checked) {
+                        page.classList.add("multiple");
+                    } else {
+                        page.classList.remove("multiple");
+                    }
+                });
+                eventutils.addEvent(preview_operator_progress, "change", function() {
+                    if (preview_operator_progress.checked) {
+                        page.querySelector(".progress.installing progress").value = 50;
+                    } else {
+                        page.querySelector(".progress.installing progress").removeAttribute("value");
+                    }
+                });
+                OnLoad.add(function() {
+                    setTimeout(function() {
+                        if (displayMode === "preview") {
+                            var subnodes = page.querySelectorAll("*");
+                            for (var i = 0; i < subnodes.length; i++) {
+                                var subnode = subnodes[i];
+                                var mark = "";
+                                if (subnode.hasAttribute("id")) {
+                                    mark += "Id: {" + subnode.getAttribute("id") + "} ";
+                                }
+                                if (subnode.hasAttribute("class")) {
+                                    mark += "Class: {" + subnode.getAttribute("class") + "} ";
+                                }
+                                if (subnode.hasAttribute("data-res-byname")) {
+                                    mark += "Res: {" + subnode.getAttribute("data-res-byname") + "} ";
+                                }
+                                subnode.appendChild(document.createTextNode(mark));
+                            }
+                        }
+                    }, 100);
+                });
+            })();
+        </script>
+    </div>
 </body>
 
 </html>

shared/html/js/pages.js

@@ -1,7 +1,7 @@
 (function(global) {
     "use strict";
     Object.defineProperty(global, "pagecontainer", {
-        get: function() { return document.querySelector(".pagecontainer"); }
+        get: function() { return document.querySelector(".pagecontainer.main"); }
     });
 
     function getPage() {

shared/html/js/theme.js

@@ -18,6 +18,25 @@
         light: 0xFFFFFF,
         dark: 0x000000,
     };
+    var strutil = Bridge.External.String;
+    var nstrutil = Bridge.NString;
+    var boolTrue = ["true", "1", "yes", "on", "y", "t", "zhen", "真"];
+    var boolFalse = ["false", "0", "no", "off", "n", "f", "jia", "假"];
+
+    function parseBool(str) {
+        str = "" + str;
+        for (var i = 0; i < boolTrue.length; i++) {
+            if (nstrutil.equals(str, boolTrue[i])) {
+                return true;
+            }
+        }
+        for (var i = 0; i < boolFalse.length; i++) {
+            if (nstrutil.equals(str, boolFalse[i])) {
+                return false;
+            }
+        }
+        return null;
+    };
 
     function getThemeSwitchType() {
         var themeType = themeSection.getKey("AppInstaller:ThemeMode").value;
@@ -250,6 +269,47 @@
         }
         customColor.value = value;
     }
+
+    function getUseCustomBackgroundImage() {
+        var useCustomBackground = themeSection.getKey("AppInstaller:UseBackgroundImage");
+        return parseBool(useCustomBackground.value);
+    }
+
+    function setUseCustomBackgroundImage(use) {
+        var useCustomBackground = themeSection.getKey("AppInstaller:UseBackgroundImage");
+        useCustomBackground.value = use ? "true" : "false";
+    }
+
+    function getCustomBackgroundImageLight() {
+        var customBackgroundImageLight = themeSection.getKey("AppInstaller:BackgroundImageLight");
+        return customBackgroundImageLight.value;
+    }
+
+    function setCustomBackgroundImageLight(url) {
+        var customBackgroundImageLight = themeSection.getKey("AppInstaller:BackgroundImageLight");
+        customBackgroundImageLight.value = url;
+    }
+
+    function getCustomBackgroundImageDark() {
+        var customBackgroundImageDark = themeSection.getKey("AppInstaller:BackgroundImageDark");
+        return customBackgroundImageDark.value;
+    }
+
+    function setCustomBackgroundImageDark(url) {
+        var customBackgroundImageDark = themeSection.getKey("AppInstaller:BackgroundImageDark");
+        customBackgroundImageDark.value = url;
+    }
+
+    function getSuitableBackgroundImage() {
+        var useCustomBackground = getUseCustomBackgroundImage();
+        if (useCustomBackground) {
+            var color = getCurrentThemeColor();
+            if (color === ColorType.light) return getCustomBackgroundImageLight();
+            else return getCustomBackgroundImageDark();
+        } else {
+            return "";
+        }
+    }
     module.exports = {
         Theme: {
             ThemeType: ThemeType,
@@ -264,7 +324,14 @@
             setNightTime: setTimeModeNightTime,
             setLightTheme: setLightTheme,
             setDarkTheme: setDarkTheme,
-            setCustomColor: setCustomColor
+            setCustomColor: setCustomColor,
+            getUseCustomBackgroundImage: getUseCustomBackgroundImage,
+            setUseCustomBackgroundImage: setUseCustomBackgroundImage,
+            getCustomBackgroundImageLight: getCustomBackgroundImageLight,
+            setCustomBackgroundImageLight: setCustomBackgroundImageLight,
+            getCustomBackgroundImageDark: getCustomBackgroundImageDark,
+            setCustomBackgroundImageDark: setCustomBackgroundImageDark,
+            getSuitableBackgroundImage: getSuitableBackgroundImage
         }
     };
     var themeNS = Theme;
@@ -363,4 +430,33 @@
             }, 0);
         }
     });
+    Object.defineProperty(themeNS, "useCustomBackgroundImage", {
+        get: function() {
+            return themeNS.getUseCustomBackgroundImage();
+        },
+        set: function(value) {
+            return themeNS.setUseCustomBackgroundImage(value);
+        }
+    });
+    Object.defineProperty(themeNS, "customBackgroundImageLight", {
+        get: function() {
+            return themeNS.getCustomBackgroundImageLight();
+        },
+        set: function(value) {
+            return themeNS.setCustomBackgroundImageLight(value);
+        }
+    });
+    Object.defineProperty(themeNS, "customBackgroundImageDark", {
+        get: function() {
+            return themeNS.getCustomBackgroundImageDark();
+        },
+        set: function(value) {
+            return themeNS.setCustomBackgroundImageDark(value);
+        }
+    });
+    Object.defineProperty(themeNS, "suitableBackgroundImage", {
+        get: function() {
+            return themeNS.getSuitableBackgroundImage();
+        },
+    });
 })(this);

shared/html/preview.html

@@ -56,6 +56,7 @@
 </head>
 
 <body>
+    <div id="page-background" class="pagecontainer full background"></div>
     <div id="page-container" class="pagecontainer full">
         <div class="page preinstall">
             <!-- Main Page -->

shared/html/settings/appinstaller/cssedit.html

@@ -194,29 +194,38 @@
                 <header aria-label="Header content" role="banner" class="titlebanner" id="pagebanner" style="height: 120px;">
                     <button id="back" class="win-backbutton pagetitlewb-backbutton" onclick="onBack_CssEditPage ()" style="margin-left: 20px; transform: scale(0.72);"></button>
                     <h2 class="titlearea win-type-ellipsis" id="apptitle" style="">
-                        <span class="pagetitlewb-title" id="apptitlestr" style="margin-left: 10px; margin-right: 20px;">编辑自定义 CSS 样式</span>
+                        <span class="pagetitlewb-title" id="apptitlestr" style="margin-left: 10px; margin-right: 20px;" data-res-fromfile="publicRes (177)"></span>
                     </h2>
                 </header>
             </aside>
             <main class="main bottom padding">
                 <div class="bottom-compensate" id="page-edit-css" style="height: 100%;">
-                    <p>在这里，编辑自定义的 CSS 样式。</p>
-                    <label id="theme-custom-color">当前主题颜色基于</label>
+                    <p data-res-fromfile="publicRes (178)"></p>
+                    <label id="theme-custom-color" data-res-fromfile="publicRes (179)"></label>
                     <script>
                         (function() {
                             "use strict";
-                            var sect = document.getElementById("theme-custom-color");
+                            var sect = document.getElementById("theme-custom-color").parentNode;
                             var toggle = new Toggle();
                             toggle.create();
                             toggle.parent = sect;
                             toggle.setColor("#202020");
                             toggle.showlabel = true;
-                            toggle.setStatusText("深色", "浅色");
+                            toggle.setStatusText(getPublicRes(155), getPublicRes(156));
                             toggle.addEventListener("change", function() {
                                 saveCurrentEdit();
                                 isSwitching = true;
                                 Theme.setCustomColor(toggle.checked ? Theme.ColorType.dark : Theme.ColorType.light);
                                 reloadCurrentEdit();
+                                var rootDir = document.querySelector(".css-editor-filedir .filedir-rootdir");
+                                var fileList = document.querySelector(".css-editor-filedir .filelist-container");
+                                var storage = Bridge.External.Storage;
+                                var path = storage.path;
+                                var currentColor = Theme.customColor;
+                                var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
+                                var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom").replace("{colortype}", colorStr);
+                                rootDir.value = customPath;
+                                refreshFileList();
                                 isSwitching = false;
                             });
                             OnLoad.add(function() {
@@ -232,7 +241,7 @@
                     <br>
                     <div class="editor-container">
                         <div class="editor-editblock">
-                            <label for="css-editor">编辑样式</label>
+                            <label for="css-editor" data-res-fromfile="publicRes (180)"></label>
                             <textarea id="css-editor" name="code"></textarea>
                             <script>
                                 var editor = document.getElementById("css-editor");
@@ -284,12 +293,12 @@
                                         if (content === null || content === void 0) {
                                             content = '\n/* Installer */\n\n.page {\n    background-color: #F3F3F3;\n}\n.page.splash {\n    background-color: #0078d7;\n}\n.page .content.loading,\n.page .content.main,\n.page .progress,\n.page .reason p,\n.page .controls .checkbox {\n    color: black;\n}\n.page .content.main .pkgapplabel {\n    color: #0078d7;\n}\n\n/* App Launch List */\n\n.applist-font-title {\n    color: black;\n}\n.applist-font-text {\n    color: black;\n}\n.applist-window {\n    border: 2px solid rgb(42, 42, 42);\n    background-color: white;\n}\n.applist-title {\n    background: white;\n}\n.applist-control {\n    background: white;\n}\n.applist-list-item {\n    background-color: rgba(0, 255, 255, 0);\n}\n.applist-list-item:hover {\n    background-color: rgb(222, 222, 222);\n}\n.applist-item-picbox {\n    background-color: #001020;\n}\n.applist-item-img-border {\n    border: 1px solid rgba(254, 254, 254, 0.1);\n}\n.win10.applist-window {\n    border: 1px solid #ccc;\n}';
                                         } else {
-                                            var idx = content.indexOf("*/");
-                                            if (idx >= 0 && idx < content.length / 2) {
-                                                content = content.substring(idx + 2);
-                                            }
+                                            //var idx = content.indexOf("*/");
+                                            //if (idx >= 0 && idx < content.length / 2) {
+                                            //    content = content.substring(idx + 2);
+                                            //}
                                         }
-                                        var head = "/* The following content is sample content and is for reference only. */";
+                                        var head = "/* The following content is sample content and is for reference only. */\n";
                                         editor.codeMirror.setValue(head + content);
                                     } else {
                                         editor.codeMirror.setValue(content);
@@ -298,7 +307,7 @@
                             </script>
                         </div>
                         <div class="editor-filelist">
-                            <label>自定义文件目录</label>
+                            <label data-res-fromfile="publicRes (181)"></label>
                             <div class="css-editor-filedir">
                                 <input type="text" class="filedir-rootdir" style="direction: rtl; text-align: left;">
                                 <ul class="filelist-container">
@@ -333,47 +342,64 @@
                                                 });
                                             }
                                             for (var i = 0; i < files.length; i++) {
-                                                var li = document.createElement("li");
-                                                li.setAttribute("role", "file");
-                                                li.textContent = files[i];
-                                                fileList.appendChild(li);
-                                                eventutil.addEvent(li, "dblclick", function(e) {
-                                                    var self = this;
-                                                    var filePath = path.combine(root, self.textContent);
-                                                    editor.codeMirror.replaceSelection(self.textContent);
-                                                });
-                                                eventutil.addEvent(li, "click", function(e) {
-                                                    var self = this;
-                                                    var filePath = path.combine(root, self.textContent);
-                                                    var objele = document.createElement("object");
-                                                    objele.data = filePath;
-                                                    var tipele = document.createElement("param");
-                                                    tipele.name = "type";
-                                                    tipele.value = "text/html";
-                                                    tipele.textContent = "不受 Internet Explorer 支持显示的资源。";
-                                                    objele.appendChild(tipele);
-                                                    objele.style.maxWidth = "100%";
-                                                    var title = Bridge.String.format("预览", this.textContent);
-                                                    var contentele = document.createElement("div");
-                                                    var filenameele = document.createElement("p");
-                                                    filenameele.textContent = this.textContent;
-                                                    contentele.appendChild(filenameele);
-                                                    contentele.style.width = "100%";
-                                                    contentele.appendChild(objele);
-                                                    messageBoxAsync(contentele, title).then(function() {
-                                                        if (typeof objele.remove === "function") {
-                                                            objele.remove();
-                                                        } else if (typeof objele.removeNode === "function") {
-                                                            objele.removeNode(true);
-                                                        } else if (typeof objele.parentNode.removeChild === "function") {
-                                                            objele.parentNode.removeChild(objele);
-                                                        }
+                                                (function() {
+                                                    var li = document.createElement("li");
+                                                    li.setAttribute("role", "file");
+                                                    li.textContent = files[i];
+                                                    fileList.appendChild(li);
+                                                    var CLICK_DELAY = 250;
+                                                    var clickTimer = null;
+                                                    var clickCount = 0;
+                                                    eventutil.addEvent(li, "dblclick", function(e) {
+                                                        var self = this;
+                                                        var filePath = path.combine(root, self.textContent);
+                                                        editor.codeMirror.replaceSelection(self.textContent);
                                                     });
-                                                });
+                                                    eventutil.addEvent(li, "click", function(e) {
+                                                        var self = this;
+                                                        clickCount++;
+                                                        if (clickCount === 1) {
+                                                            clickTimer = setTimeout(function() {
+                                                                if (clickCount === 1) {
+                                                                    var filePath = path.combine(root, self.textContent);
+                                                                    var objele = document.createElement("object");
+                                                                    objele.data = filePath;
+                                                                    var tipele = document.createElement("param");
+                                                                    tipele.name = "type";
+                                                                    tipele.value = "text/html";
+                                                                    tipele.textContent = getPublicRes(182);
+                                                                    objele.appendChild(tipele);
+                                                                    objele.style.maxWidth = "100%";
+                                                                    objele.style.textAlign = "center";
+                                                                    var title = Bridge.String.format(getPublicRes(183), self.textContent);
+                                                                    var contentele = document.createElement("div");
+                                                                    var filenameele = document.createElement("p");
+                                                                    filenameele.textContent = self.textContent;
+                                                                    contentele.appendChild(filenameele);
+                                                                    contentele.style.width = "100%";
+                                                                    contentele.appendChild(objele);
+                                                                    messageBoxAsync(contentele, title).then(function() {
+                                                                        if (typeof objele.remove === "function") {
+                                                                            objele.remove();
+                                                                        } else if (typeof objele.removeNode === "function") {
+                                                                            objele.removeNode(true);
+                                                                        } else if (typeof objele.parentNode.removeChild === "function") {
+                                                                            objele.parentNode.removeChild(objele);
+                                                                        }
+                                                                    });
+                                                                }
+                                                                clickCount = 0;
+                                                                clearTimeout(clickTimer);
+                                                                clickTimer = null;
+                                                            }, CLICK_DELAY);
+                                                        } else if (clickCount === 2) return;
+                                                    });
+                                                })();
                                             }
                                         }
                                         OnLoad.add(function() {
                                             setTimeout(refreshFileList, 100);
+                                            setInterval(refreshFileList, 2000);
                                         });
                                         window.refreshFileList = refreshFileList;
                                     })();
@@ -382,12 +408,42 @@
                         </div>
                     </div>
                     <br>
-                    <h3>向自定义样式中添加自定义文件</h3>
-                    <p>在自定义样式文件目录中，可以添加图片、音效等文件，这些文件将会用于自定义样式中。</p>
-                    <p>添加的文件将在文件列表中显示。双击目录会跳转到该目录，双击文件会将文件名插入到编辑器中。</p>
-                    <p>如果想要删除文件，请在资源管理器中直接删除。</p>
-                    <p>不建议用过大分辨率的图片，因为可能会导致页面加载变慢，而且也用不到。也不要用太大的视频和音频。这些资源都会影响加载速度和内存占用。</p>
-                    <button id="custom-addfile">添加</button>
+                    <h3 data-res-fromfile="publicRes (184)"></h3>
+                    <p data-res-fromfile="publicRes (185)"></p>
+                    <p data-res-fromfile="publicRes (186)"></p>
+                    <button id="custom-preview-install" data-res-fromfile="publicRes (187)"></button>
+                    <button id="custom-preview-applist" data-res-fromfile="publicRes (188)"></button>
+                    <script>
+                        var customPreviewBtn = document.getElementById("custom-preview-install");
+                        var customPreviewApplistBtn = document.getElementById("custom-preview-applist");
+                        Windows.UI.Event.Util.addEvent(customPreviewBtn, "click", function() {
+                            var storage = Bridge.External.Storage;
+                            var path = storage.path;
+                            var currentColor = Theme.customColor;
+                            var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
+                            var installPage = path.combine(path.root, "html\\install.html");
+                            var installPageUrl = storage.getFile(installPage).uri;
+                            var uriAndParam = installPageUrl + "?mode=preview&id=custom&color=" + currentColor;
+                            open(uriAndParam, "_blank");
+                        });
+                        Windows.UI.Event.Util.addEvent(customPreviewApplistBtn, "click", function() {
+                            var storage = Bridge.External.Storage;
+                            var path = storage.path;
+                            var currentColor = Theme.customColor;
+                            var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
+                            var installPage = path.combine(path.root, "html\\applist.html");
+                            var installPageUrl = storage.getFile(installPage).uri;
+                            var uriAndParam = installPageUrl + "?mode=preview&id=custom&color=" + currentColor;
+                            open(uriAndParam, "_blank");
+                        });
+                    </script>
+                    <br><br>
+                    <h3 data-res-fromfile="publicRes (189)"></h3>
+                    <p data-res-fromfile="publicRes (190)"></p>
+                    <p data-res-fromfile="publicRes (191)"></p>
+                    <p data-res-fromfile="publicRes (192)"></p>
+                    <p data-res-fromfile="publicRes (193)"></p>
+                    <button id="custom-addfile" data-res-fromfile="publicRes (194)"></button>
                     <script>
                         var customAddFileBtn = document.getElementById("custom-addfile");
                         customAddFileBtn.addEventListener("click", function() {
@@ -397,21 +453,31 @@
                             var currentColor = Theme.customColor;
                             var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
                             var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom").replace("{colortype}", colorStr);
-                            var supportFilterFormat = "{0}|" +
-                                "*.jpg;*.png;*.jpeg;*.bmp;*.gif;*.ico;*.tiff;*.svg|" +
-                                "{1}|" +
-                                "*.mp3;*.wav;*.wma;*.aac;*.m4a|" +
-                                "{2}|" +
-                                "*.mp4;*.avi;*.wmv|" +
-                                "{3}|" +
-                                "*.*";
-                            var getfile = JSON.parse(Bridge.External.SelectFilesToJSON(supportFilterFormat, 0x00080000 | 0x00000800, "请选择文件", null));
+                            var supportFilterFormat = "{4}|" +
+                                "*.jpg;*.png;*.jpeg;*.bmp;*.gif;*.ico;*.tiff;*.svg;*.mp3;*.wav;*.wma;*.aac;*.m4a*.mp4;*.avi;*.wmv|"
+                            "{0}|" +
+                            "*.jpg;*.png;*.jpeg;*.bmp;*.gif;*.ico;*.tiff;*.svg|" +
+                            "{1}|" +
+                            "*.mp3;*.wav;*.wma;*.aac;*.m4a|" +
+                            "{2}|" +
+                            "*.mp4;*.avi;*.wmv|" +
+                            "{3}|" +
+                            "*.*";
+                            supportFilterFormat = Bridge.String.format(
+                                supportFilterFormat,
+                                getPublicRes(195),
+                                getPublicRes(196),
+                                getPublicRes(197),
+                                getPublicRes(163),
+                                getPublicRes(198)
+                            )
+                            var getfile = JSON.parse(Bridge.External.SelectFilesToJSON(supportFilterFormat, 0x00080000 | 0x00000800, getPublicRes(199), null));
                             for (var i = 0; i < getfile.length; i++) {
                                 var srcfilepath = getfile[i];
                                 var filename = path.getName(srcfilepath);
                                 var fsize = Bridge.External.GetFileSize(srcfilepath);
                                 if (fsize < 0 || fsize > 104857600) { // 100MB 限制
-                                    messageBoxAsync("文件大小不符合要求，请选择尺寸较小的文件（不超过100MB）。", "文件无法复制");
+                                    messageBoxAsync(getPublicRes(201), getPublicRes(200));
                                 } else {
                                     var destfilepath = path.combine(customPath, filename);
                                     Bridge.External.ShellCopyFile(srcfilepath, destfilepath);
@@ -422,9 +488,130 @@
                         });
                     </script>
                     <br><br>
-                    <h3>导出</h3>
-                    <p>在这里，您可以导出自己的自定义样式，以便分享给其他人。</p>
-                    <button id="custom-export">导出</button>
+                    <h3 data-res-fromfile="publicRes (202)"></h3>
+                    <p data-res-fromfile="publicRes (203)"></p>
+                    <button id="custom-export" data-res-fromfile="publicRes (202)"></button>
+                    <script>
+                        var customExportBtn = document.getElementById("custom-export");
+                        Windows.UI.Event.Util.addEvent(customExportBtn, "click", function() {
+                            var infoinputblock = document.createElement("p");
+                            var style = document.createElement("style");
+                            style.type = "text/css";
+                            style.innerHTML = "" +
+                                ".info-row { margin-bottom:5px; zoom:1; clear:both; }" +
+                                ".info-row label { display:inline-block; width:120px; min-width: 0; vertical-align:middle; }" +
+                                ".info-row input, .info-row textarea, .info-row select { display:inline-block; vertical-align:middle; }" +
+                                "";
+                            infoinputblock.appendChild(style);
+                            var infos = {
+                                Id: "string",
+                                DisplayName: "string",
+                                Author: "string",
+                                Version: "version",
+                                Description: "multiline_string",
+                                Homepage: "uri",
+                                /* Color: "enum(dark,light)", */
+                            };
+                            var infoDisplayName = {
+                                Id: getPublicRes(204),
+                                DisplayName: getPublicRes(205),
+                                Author: getPublicRes(206),
+                                Version: getPublicRes(207),
+                                Description: getPublicRes(208),
+                                Homepage: getPublicRes(209),
+                                Color: getPublicRes(210),
+                            };
+                            var infokeys = Object.keys(infos);
+                            var infokeys = [];
+                            var infodata = {
+                                Color: Theme.customColor === Theme.ColorType.dark ? "dark" : "light",
+                            };
+                            for (var k in infos) {
+                                if (infos.hasOwnProperty(k)) {
+                                    infokeys.push(k);
+                                }
+                            }
+                            for (var i = 0; i < infokeys.length; i++) {
+                                var key = infokeys[i];
+                                var value = infos[key];
+                                var labelText = infoDisplayName[key] || key;
+                                var row = document.createElement("div");
+                                row.className = "info-row";
+                                var label = document.createElement("label");
+                                label.innerText = labelText + "  ";
+                                label.htmlFor = "info_" + key;
+                                var input;
+                                if (value === "multiline_string") {
+                                    input = document.createElement("textarea");
+                                } else if (value.indexOf("enum(") === 0) { // ES5 兼容
+                                    input = document.createElement("select");
+                                    var enumStr = value.substring(5, value.length - 1); // 去掉 enum(...)
+                                    var options = enumStr.split(",");
+                                    for (var j = 0; j < options.length; j++) {
+                                        var opt = document.createElement("option");
+                                        opt.value = options[j];
+                                        opt.innerText = options[j];
+                                        input.appendChild(opt);
+                                    }
+                                } else {
+                                    input = document.createElement("input");
+                                    input.type = "text";
+                                }
+                                input.id = "info_" + key;
+                                input.name = key;
+                                row.appendChild(label);
+                                row.appendChild(input);
+                                Windows.UI.Event.Util.addEvent(input, "change", function() {
+                                    var self = this;
+                                    infodata[self.name] = self.value;
+                                });
+                                infoinputblock.appendChild(row);
+                            }
+                            var showMsgDialog = function() {
+                                messageBoxAsync(infoinputblock, getPublicRes(211), MBFLAGS.MB_OKCANCEL).then(function(pressid) {
+                                    if (pressid === MBRET.IDOK) {
+                                        if (Bridge.NString.empty(infodata.Id) || Bridge.NString.empty(infodata.DisplayName) || Bridge.NString.empty(infodata.Author) || Bridge.NString.empty(infodata.Color)) {
+                                            messageBoxAsync(getPublicRes(213), getPublicRes(212)).then(function() {
+                                                showMsgDialog();
+                                            });
+                                            return;
+                                        }
+                                        var jsonstr = JSON.stringify(infodata);
+                                        var showFileSaveDialog = function() {
+                                            var storage = Bridge.External.Storage;
+                                            var path = storage.path;
+                                            var currentColor = Theme.customColor;
+                                            var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
+                                            var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom").replace("{colortype}", colorStr);
+                                            var supportFilterFormat = "{0}|*.zip";
+                                            supportFilterFormat = Bridge.String.format(supportFilterFormat, getPublicRes(162))
+                                            var getfile = Bridge.External.GetSavePath(supportFilterFormat, "zip", 2054, getPublicRes(214), null);
+                                            if (Bridge.NString.empty(getfile)) {
+                                                messageBoxAsync(getPublicRes(215), getPublicRes(212)).then(function() {
+                                                    showMsgDialog();
+                                                });
+                                                return;
+                                            } else {
+                                                Bridge.External.CompressTheme(customPath, getfile, jsonstr, infodata.Id);
+                                                var displayMsg = "";
+                                                if (path.fileExist(getfile)) displayMsg = Bridge.String.format(getPublicRes(216), getfile);
+                                                else displayMsg = getPublicRes(217);
+                                                messageBoxAsync(displayMsg, getPublicRes(218), MBFLAGS.MB_OKCANCEL).done(function(pressid) {
+                                                    if (pressid === MBRET.IDOK) {
+                                                        if (!path.fileExist(getfile)) {
+                                                            showMsgDialog();
+                                                        }
+                                                    }
+                                                });
+                                            }
+                                        };
+                                        showFileSaveDialog();
+                                    }
+                                });
+                            };
+                            showMsgDialog();
+                        });
+                    </script>
                     <div class="bottom-compensate"></div>
                 </div>
             </main>

shared/html/settings/appinstaller/theme.html

@@ -79,15 +79,18 @@
         
         .settings-listview-item:hover {
             background-color: rgba(230, 230, 230, 1);
+            background-color: rgba(0, 179, 255, 0.225);
         }
         
         .settings-listview-item:active {
             transform: scale(0.96);
             background-color: rgba(204, 204, 204, 1);
+            background-color: rgba(0, 174, 255, 0.484);
         }
         
         .settings-listview-item.selected:hover {
             background-color: rgba(187, 187, 187, 1);
+            background-color: rgba(0, 179, 255, 0.407);
         }
         
         .settings-listview-item:focus {
@@ -104,6 +107,7 @@
             border-style: solid;
             border-width: 4px;
             border-color: rgb(119, 119, 119);
+            border-color: rgb(0, 172, 255);
             z-index: 10;
             pointer-events: none;
         }
@@ -121,6 +125,7 @@
             border-right: 30px solid rgb(119, 119, 119);
             border-top: 0px solid rgba(0, 0, 0, 0);
             border-bottom: 30px solid rgba(0, 0, 0, 0);
+            border-right: 30px solid rgb(0, 172, 255);
             z-index: 11;
             width: 0;
             height: 0;
@@ -139,6 +144,9 @@
         try {
             window.parent.setItemHighlight("theme");
         } catch (e) {}
+        try {
+            messageBoxAsync = window.parent.messageBoxAsync;
+        } catch (e) {}
     </script>
 </head>
 
@@ -149,14 +157,14 @@
                 <h2 id="page-title" data-res-fromfile="publicRes (102)"></h2>
                 <div class="win-settings-section">
                     <br>
-                    <label for="theme-mode">主题模式</label><br>
+                    <label for="theme-mode" data-res-fromfile="publicRes (145)"></label><br>
                     <select id="theme-mode">
-                    <option value="Theme.ThemeType.light">总是深色</option>
-                    <option value="Theme.ThemeType.dark">总是浅色</option>
-                    <option value="Theme.ThemeType.auto">跟随系统</option>
-                    <option value="Theme.ThemeType.time">跟随时间</option>
-                    <option value="Theme.ThemeType.custom">自定义</option>
-                </select>
+                        <option value="Theme.ThemeType.light" data-res-fromfile="publicRes (146)"></option>
+                        <option value="Theme.ThemeType.dark" data-res-fromfile="publicRes (147)"></option>
+                        <option value="Theme.ThemeType.auto" data-res-fromfile="publicRes (148)"></option>
+                        <option value="Theme.ThemeType.time" data-res-fromfile="publicRes (149)"></option>
+                        <option value="Theme.ThemeType.custom" data-res-fromfile="publicRes (150)"></option>
+                    </select>
                     <script>
                         function refreshSectionDisplay() {
                             var timeSect = document.getElementById("item-time");
@@ -225,16 +233,16 @@
                 </div>
                 <div class="win-settings-section" id="item-time">
                     <br>
-                    <label>设置变换时间</label>
+                    <label data-res-fromfile="publicRes (151)"></label>
                     <div class="win-settings-row">
-                        <div class="win-settings-label" style="font-weight: normal;">白天</div>
+                        <div class="win-settings-label" style="font-weight: normal;" data-res-fromfile="publicRes (152)"></div>
                         <div class="win-settings-control">
                             <div data-win-control="WinJS.UI.TimePicker" data-win-options="{ hour: 9, minute: 0, clock: '24HourClock' }" id="theme-day-time">
                             </div>
                         </div>
                     </div>
                     <div class="win-settings-row">
-                        <div class="win-settings-label" style="font-weight: normal;">夜晚</div>
+                        <div class="win-settings-label" style="font-weight: normal;" data-res-fromfile="publicRes (153)"></div>
                         <div class="win-settings-control">
                             <div data-win-control="WinJS.UI.TimePicker" data-win-options="{ hour: 18, minute: 0, clock: '24HourClock' }" id="theme-night-time">
                             </div>
@@ -257,7 +265,7 @@
                 </div>
                 <div class="win-settings-section" id="item-custom-theme">
                     <br>
-                    <label>自定义主题颜色</label><br>
+                    <label data-res-fromfile="publicRes (154)"></label><br>
                     <script>
                         (function() {
                             var sect = document.getElementById("item-custom-theme");
@@ -266,7 +274,7 @@
                             toggle.parent = sect;
                             toggle.setColor("#202020");
                             toggle.showlabel = true;
-                            toggle.setStatusText("深色", "浅色");
+                            toggle.setStatusText(getPublicRes(155), getPublicRes(156));
                             toggle.addEventListener("change", function() {
                                 Theme.setCustomColor(toggle.checked ? Theme.ColorType.dark : Theme.ColorType.light);
                                 refreshCustomPreview();
@@ -278,10 +286,10 @@
                     </script>
                 </div>
                 <div class="win-settings-section" id="item-theme"> <br>
-                    <h3>选择主题</h3>
-                    <p>浅色主题</p>
+                    <h3 data-res-fromfile="publicRes (157)"></h3>
+                    <p data-res-fromfile="publicRes (158)"></p>
                     <div class="settings-listview-h" id="light-theme-list"></div>
-                    <p>深色主题</p>
+                    <p data-res-fromfile="publicRes (159)"></p>
                     <div class="settings-listview-h" id="dark-theme-list"></div>
                     <script>
                         var storage = Bridge.External.Storage;
@@ -292,6 +300,7 @@
                         var themeDarkFolder = path.combine(themeFolder, "dark");
                         var previewHtml = path.combine(path.root, "html\\preview.html");
                         var themePath = path.combine(path.root, "html\\theme\\{colormode}\\{themeid}\\{themeid}.css");
+                        var themeInfoPath = path.combine(path.root, "html\\theme\\{colormode}\\{themeid}\\themeinfo.json");
 
                         function createThemeItem(id, color) {
                             var item = document.createElement("div");
@@ -308,11 +317,46 @@
                             item.appendChild(iframe);
                             var colorstr = "light";
                             if (color === Theme.ColorType.dark) colorstr = "dark";
-                            var themeinfo = config.create(themePath.replace("{colormode}", colorstr).replace("{themeid}", id).replace("{themeid}", id));
+                            if (!path.fileExist(themeInfoPath.replace("{colormode}", colorstr).replace("{themeid}", id))) return null;
+                            var themeinfo = storage.getFile(themeInfoPath.replace("{colormode}", colorstr).replace("{themeid}", id));
+                            var themeinfojson = {};
+                            try {
+                                themeinfojson = JSON.parse(themeinfo.content);
+                                themeinfojson.Id;
+                                themeinfojson.DisplayName;
+                            } catch (e) {
+                                return null;
+                            }
                             var displaNameLabel = document.createElement("p");
-                            displaNameLabel.textContent = themeinfo.getKey("ThemeInfo", "DisplayName").value;
+                            displaNameLabel.textContent = themeinfojson.DisplayName;
                             if (Bridge.NString.empty(displaNameLabel.textContent)) displaNameLabel.textContent = id;
                             item.appendChild(displaNameLabel);
+                            Windows.UI.Event.Util.addEvent(item, "click", function() {
+                                var self = this;
+                                var color = parseInt(self.getAttribute("data-item-color"));
+                                var id = self.getAttribute("data-theme-id");
+                                for (var i = 0; i < this.parentNode.children.length; i++) {
+                                    var node = this.parentNode.children[i];
+                                    if (node.classList.contains("selected")) {
+                                        node.classList.remove("selected");
+                                    }
+                                }
+                                this.classList.add("selected");
+                                if (color === Theme.ColorType.dark) {
+                                    Theme.darkTheme = id;
+                                } else {
+                                    Theme.lightTheme = id;
+                                }
+                            });
+                            if (color === Theme.ColorType.dark) {
+                                if (Theme.darkTheme === id) {
+                                    item.classList.add("selected");
+                                }
+                            } else {
+                                if (Theme.lightTheme === id) {
+                                    item.classList.add("selected");
+                                }
+                            }
                             return item;
                         }
 
@@ -325,27 +369,91 @@
                             darkThemeList.innerHTML = "";
                             for (var i = 0; i < lightThemeListItems.length; i++) {
                                 var node = createThemeItem(lightThemeListItems[i], Theme.ColorType.light);
-                                lightThemeList.appendChild(node);
-                                WinJS.UI.Animation.createAddToListAnimation(lightThemeList, node).execute();
+                                if (node) {
+                                    lightThemeList.appendChild(node);
+                                    WinJS.UI.Animation.createAddToListAnimation(lightThemeList, node).execute();
+                                }
                             }
                             for (var i = 0; i < darkThemeListItems.length; i++) {
                                 var node = createThemeItem(darkThemeListItems[i], Theme.ColorType.dark);
-                                darkThemeList.appendChild(node);
-                                WinJS.UI.Animation.createAddToListAnimation(darkThemeList, node).execute();
+                                if (node) {
+                                    darkThemeList.appendChild(node);
+                                    WinJS.UI.Animation.createAddToListAnimation(darkThemeList, node).execute();
+                                }
                             }
                         }
                         OnLoad.add(function() {
                             setTimeout(eventInitList, 0);
                         });
                     </script>
+                    <p for="theme-loadfrom-file" data-res-fromfile="publicRes (160)"></p>
+                    <button id="theme-loadfrom-file" data-res-fromfile="publicRes (161)"></button>
+                    <script>
+                        var loadFromFileBtn = document.getElementById("theme-loadfrom-file");
+                        Windows.UI.Event.Util.addEvent(loadFromFileBtn, "click", function() {
+                            var self = this;
+                            var filter = "{0}|*.zip|{1}|*.*";
+                            filter = Bridge.String.format(filter, getPublicRes(162), getPublicRes(163));
+                            var files = JSON.parse(Bridge.External.SelectFilesToJSON(filter, 0x000800000 & 0x800, getPublicRes(164), null));
+                            if (files.length > 0) {
+                                var file = files[0];
+                                try {
+                                    var tpinf = JSON.parse(Bridge.External.GetThemePkgInfo(file));
+                                    var id = tpinf.Id;
+                                    if (Bridge.NString.empty(id)) throw new Error("Invalid theme package.");
+                                    var displayName = tpinf.DisplayName;
+                                    if (Bridge.NString.empty(displayName)) throw new Error("Invalid theme package.");
+                                    var color = tpinf.Color;
+                                    if (!(Bridge.NString.equals(color, "dark") || Bridge.NString.equals(color, "light"))) throw new Error("Invalid color type.");
+                                    var author = tpinf.Author;
+                                    if (Bridge.NString.empty(author)) throw new Error("Invalid theme package.");
+                                    var version = tpinf.Version;
+                                    if (Bridge.NString.empty(version)) throw new Error("Invalid theme package.");
+                                    var description = tpinf.Description;
+                                    if (Bridge.NString.empty(description)) throw new Error("Invalid theme package.");
+                                    var buildpath = path.combine(path.root, "html\\theme\\{colormode}\\{id}").replace("{colormode}", color).replace("{id}", id);
+                                    var extractEvent = function() {
+                                        try {
+                                            Bridge.External.ExtraceThemePkg(file, buildpath);
+                                            messageBoxAsync(getPublicRes(165), getPublicRes(166), MBFLAGS.MB_OK);
+                                            eventInitList();
+                                        } catch (e) {
+                                            messageBoxAsync(getPublicRes(167) + (e.message || e), getPublicRes(168));
+                                        }
+                                    };
+                                    if (path.dirExist(buildpath)) {
+                                        messageBoxAsync(Bridge.String.format(
+                                            getPublicRes(169),
+                                            displayName, author, id, (Bridge.NString.equals(color, "dark") ? getPublicRes(155) : getPublicRes(156))
+                                        ), getPublicRes(170), MBFLAGS.MB_OKCANCEL).done(function(pressid) {
+                                            if (pressid === MBRET.IDOK) {
+                                                extractEvent();
+                                            }
+                                        });
+                                    } else {
+                                        messageBoxAsync(Bridge.String.format(
+                                            getPublicRes(171),
+                                            displayName, author, version, id, (Bridge.NString.equals(color, "dark") ? getPublicRes(155) : getPublicRes(156)), description
+                                        ), getPublicRes(172), MBFLAGS.MB_OKCANCEL).done(function(pressid) {
+                                            if (pressid === MBRET.IDOK) {
+                                                extractEvent();
+                                            }
+                                        });
+                                    }
+                                } catch (e) {
+                                    messageBoxAsync(getPublicRes(173) + (e.message || e), getPublicRes(168));
+                                }
+                            }
+                        });
+                    </script>
                 </div>
                 <div class="win-settings-section" id="item-custom-theme-edit">
                     <br>
-                    <h3>编辑当前自定义样式</h3>
-                    <label>预览</label><br>
+                    <h3 data-res-fromfile="publicRes (174)"></h3>
+                    <label data-res-fromfile="publicRes (175)"></label><br>
                     <iframe src="../../preview.html" id="theme-custom-preview"></iframe>
                     <br><br>
-                    <button id="jump-editpage">编辑</button>
+                    <button id="jump-editpage" data-res-fromfile="publicRes (176)"></button>
                     <script>
                         function refreshCustomPreview() {
                             var storage = Bridge.External.Storage;
@@ -366,6 +474,159 @@
                         });
                     </script>
                 </div>
+                <div class="win-settings-section" id="item-custom-background">
+                    <br>
+                    <h3 data-res-fromfile="publicRes (219)"></h3>
+                    <p data-res-fromfile="publicRes (220)"></p>
+                    <label data-res-fromfile="publicRes (221)"></label>
+                    <script>
+                        (function() {
+                            var sect = document.getElementById("item-custom-background");
+                            var toggle = new Toggle();
+                            toggle.create();
+                            toggle.parent = sect;
+                            toggle.setColor("#202020");
+                            toggle.showlabel = true;
+                            var winjsres = Bridge.External.WinJsStringRes;
+                            toggle.setStatusText(winjsres.getString("ms-resource://Microsoft.WinJS.1.0/ui/on"), winjsres.getString("ms-resource://Microsoft.WinJS.1.0/ui/off"));
+                            toggle.addEventListener("change", function() {
+                                var imgsect = document.getElementById("item-custom-background-image");
+                                Theme.useCustomBackgroundImage = toggle.checked;
+                                if (Theme.useCustomBackgroundImage) {
+                                    imgsect.style.height = imgsect.scrollHeight + "px";
+                                } else {
+                                    imgsect.style.height = "0px";
+                                }
+                            });
+                            OnLoad.add(function() {
+                                toggle.checked = Theme.useCustomBackgroundImage;
+                                var imgsect = document.getElementById("item-custom-background-image");
+                                if (Theme.useCustomBackgroundImage) {
+                                    imgsect.style.height = imgsect.scrollHeight + "px";
+                                } else {
+                                    imgsect.style.height = "0px";
+                                }
+                            });
+                        })();
+                    </script>
+                </div>
+                <div class="win-settings-section" id="item-custom-background-image" style="overflow-x: hidden;">
+                    <br>
+                    <h4 data-res-fromfile="publicRes (222)"></h4>
+                    <p data-res-fromfile="publicRes (223)"></p>
+                    <p data-res-fromfile="publicRes (158)"></p>
+                    <p id="backimg-displaypath-light"> </p>
+                    <button id="backimg-select-light" data-res-fromfile="publicRes (225)"></button>
+                    <br>
+                    <p data-res-fromfile="publicRes (159)"></p>
+                    <p id="backimg-displaypath-dark"></p>
+                    <button id="backimg-select-dark" data-res-fromfile="publicRes (225)"></button>
+                    <br><br>
+                    <h4 data-res-fromfile="publicRes (184)"></h4>
+                    <style>
+                        .background-preview {
+                            width: 100%;
+                            height: auto;
+                            max-width: 300px;
+                            max-height: 300px;
+                            overflow-x: hidden;
+                            overflow-y: hidden;
+                            background-color: rgba(0, 0, 0, 0.2);
+                            position: relative;
+                        }
+                        
+                        .background-preview img {
+                            max-width: 100%;
+                            max-height: 0px;
+                            transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
+                            position: relative;
+                            margin: auto;
+                        }
+                        
+                        .background-preview img[src] {
+                            max-height: none;
+                        }
+                    </style>
+                    <h5 data-res-fromfile="publicRes (158)"></h5>
+                    <div class="background-preview" id="background-preview-light">
+                        <img alt="Cannot Display Image">
+                    </div>
+                    <br>
+                    <h5 data-res-fromfile="publicRes (159)"></h5>
+                    <div class="background-preview" id="background-preview-dark">
+                        <img alt="Cannot Display Image">
+                    </div>
+                    <script>
+                        var displaypath_light = document.getElementById("backimg-displaypath-light");
+                        var displaypath_dark = document.getElementById("backimg-displaypath-dark");
+                        var lightimg = document.getElementById("background-preview-light").querySelector("img");
+                        var darkimg = document.getElementById("background-preview-dark").querySelector("img");
+                        Windows.UI.Event.Util.addEvent(lightimg, "load", function() {
+                            var imgsect = document.getElementById("item-custom-background-image");
+                            if (Theme.useCustomBackgroundImage) {
+                                imgsect.style.height = imgsect.scrollHeight + "px";
+                            }
+                        });
+                        Windows.UI.Event.Util.addEvent(darkimg, "load", function() {
+                            var imgsect = document.getElementById("item-custom-background-image");
+                            if (Theme.useCustomBackgroundImage) {
+                                imgsect.style.height = imgsect.scrollHeight + "px";
+                            }
+                        });
+
+                        function refreshCustomBackground() {
+                            var lightimgsrc = Theme.customBackgroundImageLight;
+                            var darkimgsrc = Theme.customBackgroundImageDark;
+                            displaypath_light.textContent = Bridge.String.format(getPublicRes(224), lightimgsrc);
+                            displaypath_dark.textContent = Bridge.String.format(getPublicRes(224), darkimgsrc);
+                            lightimg.setAttribute("src", lightimgsrc + "?timestamp=" + new Date().getTime());
+                            darkimg.setAttribute("src", darkimgsrc + "?timestamp=" + new Date().getTime());
+                            if (lightimg.getAttribute("src") === "") lightimg.removeAttribute("src");
+                            if (darkimg.getAttribute("src") === "") darkimg.removeAttribute("src");
+                            var imgsect = document.getElementById("item-custom-background-image");
+                            if (Theme.useCustomBackgroundImage) {
+                                imgsect.style.height = imgsect.scrollHeight + "px";
+                            }
+                        }
+                        OnLoad.add(refreshCustomBackground);
+                        var lightImgBtn = document.getElementById("backimg-select-light");
+                        var darkImgBtn = document.getElementById("backimg-select-dark");
+
+                        function copyFile(src, dest, cover) {
+                            if (typeof cover === "undefined") cover = true;
+                            return Bridge.External.CopyFile(src, dest, cover);
+                        }
+                        var customRootFolder = path.combine(path.root, "html\\custom");
+                        Windows.UI.Event.Util.addEvent(lightImgBtn, "click", function() {
+                            var self = this;
+                            var filter = "{0}|*.jpg;*.jpeg;*.png;*.gif;*.bmp|{1}|*.*";
+                            filter = Bridge.String.format(filter, getPublicRes(226), getPublicRes(163));
+                            var files = JSON.parse(Bridge.External.SelectFilesToJSON(filter, 0x000800000 & 0x800, getPublicRes(227), null));
+                            if (files.length > 0) {
+                                var file = files[0];
+                                var savepath = path.combine(customRootFolder, "bglight.pic");
+                                if (copyFile(file, savepath)) {
+                                    Theme.customBackgroundImageLight = savepath;
+                                    refreshCustomBackground();
+                                }
+                            }
+                        });
+                        Windows.UI.Event.Util.addEvent(darkImgBtn, "click", function() {
+                            var self = this;
+                            var filter = "{0}|*.jpg;*.jpeg;*.png;*.gif;*.bmp|{1}|*.*";
+                            filter = Bridge.String.format(filter, getPublicRes(226), getPublicRes(163));
+                            var files = JSON.parse(Bridge.External.SelectFilesToJSON(filter, 0x000800000 & 0x800, getPublicRes(227), null));
+                            if (files.length > 0) {
+                                var file = files[0];
+                                var savepath = path.combine(customRootFolder, "bgdark.pic");
+                                if (copyFile(file, savepath)) {
+                                    Theme.customBackgroundImageDark = savepath;
+                                    refreshCustomBackground();
+                                }
+                            }
+                        });
+                    </script>
+                </div>
             </div>
         </div>
     </div>

shared/html/theme/dark/default/default.css

@@ -1,21 +1,11 @@
-/*
-[ThemeInfo]
-Id = default
-DisplayName = Default Theme
-Author = Bruce Winter
-Version = 1.0
-Description = Default theme.
-Url = https://github.com/modernw
-Color = Dark
-*/
-
 .page,
 .page * {
     transition: background-color 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), color 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), border-color 0.5s cubic-bezier(0.1, 0.9, 0.2, 1);
 }
 
-.page {
+.pagecontainer.background {
     background-color: #1d1d1d;
+    transition: background-color 0.3s cubic-bezier(0.1, 0.9, 0.2, 1), color 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), border-color 0.5s cubic-bezier(0.1, 0.9, 0.2, 1);
 }
 
 .page.splash {

shared/html/theme/dark/default/themeinfo.json

@@ -0,0 +1 @@
+{"Color":"dark","Id":"default","DisplayName":"Default Theme","Author":"Bruce Winter","Version":"1.0","Description":"Default theme.","Homepage":"https://github.com/modernw"}

shared/html/theme/light/custom/custom.css

@@ -1,67 +0,0 @@
-custom.css/* The following content is sample content and is for reference only. */
-
-/* Installer */
-
-.page {
-    background-color: #F3F3F3;
-}
-
-.page.splash {
-    background-color: #0078d7;
-}
-
-.page .content.loading,
-.page .content.main,
-.page .progress,
-.page .reason p,
-.page .controls .checkbox {
-    color: black;
-}
-
-.page .content.main .pkgapplabel {
-    color: #0078d7;
-}
-
-
-/* App Launch List */
-
-.applist-font-title {
-    color: black;
-}
-
-.applist-font-text {
-    color: black;
-}
-
-.applist-window {
-    border: 2px solid rgb(42, 42, 42);
-    background-color: white;
-}
-
-.applist-title {
-    background: white;
-}
-
-.applist-control {
-    background: white;
-}
-
-.applist-list-item {
-    background-color: rgba(0, 255, 255, 0);
-}
-
-.applist-list-item:hover {
-    background-color: rgb(222, 222, 222);
-}
-
-.applist-item-picbox {
-    background-color: #001020;
-}
-
-.applist-item-img-border {
-    border: 1px solid rgba(254, 254, 254, 0.1);
-}
-
-.win10.applist-window {
-    border: 1px solid #ccc;
-}

shared/html/theme/light/default/default.css

@@ -1,18 +1,6 @@
-/*
-[ThemeInfo]
-Id = default
-DisplayName = Default Theme
-Author = Bruce Winter
-Version = 1.0
-Description = Default theme.
-Url = https://github.com/modernw
-Color = Light
-*/
-
-
 /* Installer */
 
-.page {
+.pagecontainer.background {
     background-color: #F3F3F3;
 }
 

shared/html/theme/light/default/themeinfo.json

@@ -0,0 +1 @@
+{"Color":"light","Id":"default","DisplayName":"Default Theme","Author":"Bruce Winter","Version":"1.0","Description":"Default theme.","Homepage":"https://github.com/modernw"}

shared/version

@@ -1 +1 @@
-0.2.1.0
+0.2.2.0