diff --git a/.github/workflows/build-all.yml b/.github/workflows/build-all.yml index ad5369a..2695e22 100644 --- a/.github/workflows/build-all.yml +++ b/.github/workflows/build-all.yml @@ -104,9 +104,20 @@ jobs: development_build: ${{ inputs.development_build || github.event.inputs.development_build || false }} clean_build: ${{ inputs.clean_build || github.event.inputs.clean_build || false }} + windows-arm64ec: + uses: ./.github/workflows/build-windows-arm64ec.yml + secrets: inherit + with: + sdk_url: ${{ inputs.sdk_url || github.event.inputs.sdk_url }} + version: ${{ inputs.version || github.event.inputs.version }} + webbrowser_version: ${{ inputs.webbrowser_version || github.event.inputs.webbrowser_version }} + development_build: ${{ inputs.development_build || github.event.inputs.development_build || false }} + clean_build: ${{ inputs.clean_build || github.event.inputs.clean_build || false }} + create_installer: ${{ inputs.create_installer || github.event_name == 'pull_request' }} + summary: name: "📊 Build Summary" - needs: [windows, macos-x64, macos-arm64, linux-x64, linux-arm64] + needs: [windows, windows-arm64ec, macos-x64, macos-arm64, linux-x64, linux-arm64] if: always() runs-on: ubuntu-latest steps: @@ -129,13 +140,14 @@ jobs: echo "" >> $GITHUB_STEP_SUMMARY echo "---" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + # Job status table echo "## 📋 Build Status" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY echo "| Platform | Status |" >> $GITHUB_STEP_SUMMARY echo "|----------|--------|" >> $GITHUB_STEP_SUMMARY echo "| 🪟 Windows x64 | ${{ needs.windows.result }} |" >> $GITHUB_STEP_SUMMARY + echo "| 🪟 Windows ARM64EC | ${{ needs.windows-arm64ec.result }} |" >> $GITHUB_STEP_SUMMARY echo "| 🍎 macOS x64 | ${{ needs.macos-x64.result }} |" >> $GITHUB_STEP_SUMMARY echo "| 🍎 macOS ARM64 | ${{ needs.macos-arm64.result }} |" >> $GITHUB_STEP_SUMMARY echo "| 🐧 Linux x64 | ${{ needs.linux-x64.result }} |" >> $GITHUB_STEP_SUMMARY @@ -143,11 +155,11 @@ jobs: echo "" >> $GITHUB_STEP_SUMMARY echo "---" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + # List all artifacts echo "## 📦 Generated Artifacts" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + if [ -d "artifacts" ]; then find artifacts -type f \( -name "*.zip" -o -name "*.exe" -o -name "*.tar.gz" -o -name "*.deb" -o -name "*.rpm" -o -name "*.dmg" \) | while read file; do size=$(du -h "$file" | cut -f1) @@ -157,15 +169,15 @@ jobs: else echo "⚠️ No artifacts directory found" >> $GITHUB_STEP_SUMMARY fi - + echo "" >> $GITHUB_STEP_SUMMARY echo "---" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + # Include individual platform summaries if available echo "## 📝 Platform Details" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY - + for summary in artifacts/*/BUILD-SUMMARY.md; do if [ -f "$summary" ]; then platform=$(dirname "$summary" | xargs basename) @@ -180,7 +192,7 @@ jobs: echo "" >> $GITHUB_STEP_SUMMARY fi done - + echo "---" >> $GITHUB_STEP_SUMMARY echo "" >> $GITHUB_STEP_SUMMARY echo "**🎉 Build completed!**" >> $GITHUB_STEP_SUMMARY @@ -192,17 +204,19 @@ jobs: run: | echo "Checking build results..." if [[ "${{ needs.windows.result }}" != "success" ]] || \ + [[ "${{ needs.windows-arm64ec.result }}" != "success" ]] || \ [[ "${{ needs.macos-x64.result }}" != "success" ]] || \ [[ "${{ needs.macos-arm64.result }}" != "success" ]] || \ [[ "${{ needs.linux-x64.result }}" != "success" ]] || \ [[ "${{ needs.linux-arm64.result }}" != "success" ]]; then - echo "⚠️ One or more builds failed or were skipped" - echo "Windows: ${{ needs.windows.result }}" - echo "macOS x64: ${{ needs.macos-x64.result }}" - echo "macOS ARM64: ${{ needs.macos-arm64.result }}" - echo "Linux x64: ${{ needs.linux-x64.result }}" - echo "Linux ARM64: ${{ needs.linux-arm64.result }}" - exit 1 + echo "⚠️ One or more builds failed or were skipped" + echo "Windows: ${{ needs.windows.result }}" + echo "Windows ARM64EC: ${{ needs.windows-arm64ec.result }}" + echo "macOS x64: ${{ needs.macos-x64.result }}" + echo "macOS ARM64: ${{ needs.macos-arm64.result }}" + echo "Linux x64: ${{ needs.linux-x64.result }}" + echo "Linux ARM64: ${{ needs.linux-arm64.result }}" + exit 1 else echo "✅ All builds succeeded!" fi diff --git a/.github/workflows/build-linux.yml b/.github/workflows/build-linux.yml index cefcad6..db6b07f 100644 --- a/.github/workflows/build-linux.yml +++ b/.github/workflows/build-linux.yml @@ -336,20 +336,20 @@ jobs: if [ -f "build/CMakeCache.txt" ]; then echo "CMake cache found, checking if reconfiguration needed..." cacheValid=true - + # Check if SDK root changed cachedSdkRoot=$(grep "ULTRALIGHT_SDK_ROOT:.*=" build/CMakeCache.txt | sed 's/.*=//' || true) if [ "$cachedSdkRoot" != "$ULTRALIGHT_SDK_ROOT" ]; then echo "SDK root changed, reconfiguration needed" cacheValid=false fi - + if [ "$cacheValid" = "true" ]; then echo "✅ CMake cache is valid, skipping reconfiguration (saves ~30-60 seconds)" exit 0 fi fi - + cmake --version echo "Configuring with ULTRALIGHT_SDK_ROOT=$ULTRALIGHT_SDK_ROOT" cmake -S . -B build -DCMAKE_BUILD_TYPE=Release -DULTRALIGHT_SDK_ROOT="$ULTRALIGHT_SDK_ROOT" -DBUILD_TESTING=OFF -DAUTO_INSTALL_CURL=ON -DWEBBROWSER_VERSION="$WEBBROWSER_VERSION" @@ -417,16 +417,16 @@ jobs: run: | set -euo pipefail echo "🚀 Generating comprehensive build summary..." - + # Get SDK version sdkVersion="${ULTRALIGHT_VERSION:-Unknown}" if [ -f "build/ultralight_sdk_version.txt" ]; then sdkVersion=$(cat "build/ultralight_sdk_version.txt" | tr -d '[:space:]') fi - + # Make script executable chmod +x scripts/generate-build-summary.sh - + # Run the build summary script bash scripts/generate-build-summary.sh \ "build" \ @@ -436,7 +436,7 @@ jobs: "${{ github.sha }}" \ "$sdkVersion" \ "BUILD-SUMMARY.md" - + # Create JSON metadata file cat > build/BUILD-METADATA.json << EOF { @@ -452,7 +452,7 @@ jobs: "runNumber": "${{ github.run_number }}" } EOF - + echo "✅ Build summary and metadata generated successfully" - name: 8.1 Display Build Summary @@ -563,7 +563,7 @@ jobs: else echo "⚠️ BUILD-SUMMARY.md not found, skipping job summary" fi - + # Show cache statistics echo "" echo "📊 Cache Statistics:" diff --git a/.github/workflows/build-macos.yml b/.github/workflows/build-macos.yml index b55779f..449b985 100644 --- a/.github/workflows/build-macos.yml +++ b/.github/workflows/build-macos.yml @@ -386,20 +386,20 @@ jobs: if [ -f "build/CMakeCache.txt" ]; then echo "CMake cache found, checking if reconfiguration needed..." cacheValid=true - + # Check if SDK root changed cachedSdkRoot=$(grep "ULTRALIGHT_SDK_ROOT:.*=" build/CMakeCache.txt | sed 's/.*=//' || true) if [ "$cachedSdkRoot" != "$ULTRALIGHT_SDK_ROOT" ]; then echo "SDK root changed, reconfiguration needed" cacheValid=false fi - + if [ "$cacheValid" = "true" ]; then echo "✅ CMake cache is valid, skipping reconfiguration (saves ~30-60 seconds)" exit 0 fi fi - + cmake --version echo "Configuring with ULTRALIGHT_SDK_ROOT=$ULTRALIGHT_SDK_ROOT" cmake -S . -B build -DULTRALIGHT_SDK_ROOT="$ULTRALIGHT_SDK_ROOT" -DBUILD_TESTING=OFF -DAUTO_INSTALL_CURL=ON -DWEBBROWSER_VERSION="$WEBBROWSER_VERSION" @@ -518,16 +518,16 @@ jobs: run: | set -euo pipefail echo "🚀 Generating comprehensive build summary..." - + # Get SDK version sdkVersion="${ULTRALIGHT_VERSION:-Unknown}" if [ -f "build/ultralight_sdk_version.txt" ]; then sdkVersion=$(cat "build/ultralight_sdk_version.txt" | tr -d '[:space:]') fi - + # Make script executable chmod +x scripts/generate-build-summary.sh - + # Run the build summary script bash scripts/generate-build-summary.sh \ "build" \ @@ -537,7 +537,7 @@ jobs: "${{ github.sha }}" \ "$sdkVersion" \ "BUILD-SUMMARY.md" - + # Create JSON metadata file cat > build/BUILD-METADATA.json << EOF { @@ -553,7 +553,7 @@ jobs: "runNumber": "${{ github.run_number }}" } EOF - + echo "✅ Build summary and metadata generated successfully" - name: 7.1 Display Build Summary @@ -643,7 +643,7 @@ jobs: else echo "⚠️ BUILD-SUMMARY.md not found, skipping job summary" fi - + # Show cache statistics echo "" echo "📊 Cache Statistics:" diff --git a/.github/workflows/build-windows-arm64ec.yml b/.github/workflows/build-windows-arm64ec.yml new file mode 100644 index 0000000..e1b1c02 --- /dev/null +++ b/.github/workflows/build-windows-arm64ec.yml @@ -0,0 +1,245 @@ +name: Build - Windows ARM64EC + +permissions: + contents: read + actions: write + +on: + workflow_dispatch: + inputs: + sdk_url: + description: "Override ULTRALIGHT_SDK_URL (raw .7z in base-sdk branch)" + required: false + type: string + version: + description: "Override ULTRALIGHT_VERSION (eg. 1.4.0)" + required: false + type: string + webbrowser_version: + description: "Override build version name (default 'dev')" + required: false + type: string + create_installer: + description: "Create Windows installer via CPack (NSIS)" + required: false + type: boolean + development_build: + description: "Development build (keeps intermediate packages, verbose logs)" + required: false + type: boolean + default: false + clean_build: + description: "Clean build (skip all caches for fresh build)" + required: false + type: boolean + default: false + workflow_call: + inputs: + sdk_url: + description: "Override ULTRALIGHT_SDK_URL (raw .7z in base-sdk branch)" + required: false + type: string + version: + description: "Override ULTRALIGHT_VERSION (eg. 1.4.0)" + required: false + type: string + webbrowser_version: + description: "Override build version name (default 'dev')" + required: false + type: string + create_installer: + description: "Create Windows installer via CPack (NSIS)" + required: false + type: boolean + default: false + development_build: + description: "Development build (keeps intermediate packages, verbose logs)" + required: false + type: boolean + default: false + clean_build: + description: "Clean build (skip all caches for fresh build)" + required: false + type: boolean + default: false + +jobs: + build-arm64ec: + runs-on: windows-latest + env: + ULTRALIGHT_SDK_URL: ${{ inputs.sdk_url || github.event.inputs.sdk_url }} + ULTRALIGHT_VERSION: ${{ inputs.version || github.event.inputs.version }} + WEBBROWSER_VERSION: ${{ inputs.webbrowser_version || github.event.inputs.webbrowser_version || 'dev' }} + CREATE_INSTALLER: ${{ inputs.create_installer || github.event.inputs.create_installer }} + DEVELOPMENT_BUILD: ${{ inputs.development_build || github.event.inputs.development_build || 'false' }} + CLEAN_BUILD: ${{ inputs.clean_build || github.event.inputs.clean_build || 'false' }} + + steps: + - name: Configure Git (longpaths, autocrlf=false) + shell: pwsh + run: | + git config --global core.longpaths true + git config --global core.autocrlf false + + - name: Checkout Code (with submodules) + uses: actions/checkout@v4 + with: + submodules: recursive + fetch-depth: 1 + + - name: Setup CMake Build Cache + if: inputs.clean_build != true + uses: actions/cache@v4 + with: + path: | + build + !build/CMakeFiles + !build/Testing + !build/_CPack_Packages + !build/**/*.exe + !build/**/*.dll + !build/**/*.zip + !build/**/*.7z + key: ${{ runner.os }}-cmake-${{ hashFiles('CMakeLists.txt', 'cmake/**') }}-${{ github.sha }} + restore-keys: | + ${{ runner.os }}-cmake-${{ hashFiles('CMakeLists.txt', 'cmake/**') }}- + ${{ runner.os }}-cmake- + + - name: Setup SDK Cache + if: inputs.clean_build != true + uses: actions/cache@v4 + with: + path: | + libs/Ultralight + ultralight-sdk-*.7z + key: ${{ runner.os }}-sdk-${{ env.ULTRALIGHT_VERSION || 'latest' }} + restore-keys: | + ${{ runner.os }}-sdk- + + - name: Setup Compiler Cache (sccache) + if: inputs.clean_build != true + uses: mozilla-actions/sccache-action@v0.0.5 + + - name: Configure Compiler Cache Environment + if: inputs.clean_build != true + shell: pwsh + run: | + echo "SCCACHE_DIR=$env:GITHUB_WORKSPACE\.sccache" >> $env:GITHUB_ENV + echo "CMAKE_CXX_COMPILER_LAUNCHER=sccache" >> $env:GITHUB_ENV + echo "CMAKE_C_COMPILER_LAUNCHER=sccache" >> $env:GITHUB_ENV + + - name: Detect ULTRALIGHT_SDK_URL from repo base-sdk branch (Windows) + id: detect_url + shell: pwsh + run: | + if ($env:ULTRALIGHT_SDK_URL) { exit 0 } + $api = "https://api.github.com/repos/${{ github.repository }}/contents/sdks?ref=base-sdk" + $headers = @{ Authorization = "Bearer $env:GITHUB_TOKEN"; Accept = "application/vnd.github+json" } + try { $resp = Invoke-RestMethod -Uri $api -Headers $headers -Method Get -UseBasicParsing } catch { $resp = $null } + if ($resp) { + $names = @($resp | Where-Object { $_.type -eq 'file' } | ForEach-Object { $_.name }) + if ($names.Count -gt 0) { + $candidates = @() + foreach ($n in $names) { + if ($n -match '^ultralight(-free)?-sdk-([0-9]+\.[0-9]+\.[0-9]+)-(win|windows)-x64\.7z$') { $candidates += $n } + } + if ($candidates.Count -gt 0) { + $best = $null + foreach ($f in $candidates) { + $m = [regex]::Match($f, '([0-9]+\.[0-9]+\.[0-9]+)') + if ($m.Success) { + $ver = [version]$m.Groups[1].Value + if (-not $best -or $ver -gt $best.Version) { $best = [pscustomobject]@{ Version=$ver; File=$f } } + } + } + if ($best) { + $baseRaw = "https://raw.githubusercontent.com/${{ github.repository }}/base-sdk/sdks" + $url = "$baseRaw/$($best.File)" + "ULTRALIGHT_SDK_URL=$url" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append + "ULTRALIGHT_VERSION=$($best.Version.ToString())" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append + "url=$url" | Out-File -FilePath $env:GITHUB_OUTPUT -Encoding utf8 -Append + "version=$($best.Version.ToString())" | Out-File -FilePath $env:GITHUB_OUTPUT -Encoding utf8 -Append + exit 0 + } + } + } + } + $header = "data/include/Ultralight/Defines.h" + $version = $null + if (Test-Path $header) { + $matchLine = Select-String -Path $header -Pattern '^#define\s+ULTRALIGHT_VERSION\s+"([^"]+)"' | Select-Object -First 1 + if ($matchLine) { $version = $matchLine.Matches[0].Groups[1].Value } + } + if (-not $version) { + if ($env:ULTRALIGHT_VERSION) { $version = $env:ULTRALIGHT_VERSION } + else { $version = '1.4.0' } + } + $baseRaw = "https://raw.githubusercontent.com/${{ github.repository }}/base-sdk/sdks" + $candidates = @( + "$baseRaw/ultralight-free-sdk-$version-win-x64.7z", + "$baseRaw/ultralight-free-sdk-$version-windows-x64.7z" + ) + function Test-Url($u) { + try { $r = Invoke-WebRequest -Uri $u -Method Head -UseBasicParsing; return $true } catch {} + try { $tmp = Join-Path $env:RUNNER_TEMP "probe.tmp"; Invoke-WebRequest -Uri $u -Method Get -UseBasicParsing -OutFile $tmp | Out-Null; Remove-Item $tmp -ErrorAction SilentlyContinue; return $true } catch { return $false } + } + $found = $null + foreach ($url in $candidates) { if (Test-Url $url) { $found = $url; break } } + if ($found) { "ULTRALIGHT_SDK_URL=$found" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append } + else { Write-Error "Could not auto-detect a valid Windows SDK URL in base-sdk branch for version $version."; exit 1 } + + - name: Install 7zip + shell: pwsh + run: | + choco install 7zip -y --no-progress + $sevenZipExe = Join-Path $env:ProgramFiles '7-Zip/7z.exe' + if (Test-Path $sevenZipExe) { (Split-Path $sevenZipExe) | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append } + + - name: Prepare Ultralight SDK (Windows) + id: prep_sdk + shell: pwsh + run: | + $rootDefault = Join-Path $env:GITHUB_WORKSPACE 'data' + $root = $env:ULTRALIGHT_SDK_ROOT + if (-not $root) { $root = $rootDefault } + $present = 'false' + if ((Test-Path (Join-Path $root 'include')) -and ((Test-Path (Join-Path $root 'lib')) -or (Test-Path (Join-Path $root 'bin')))) { $present = 'true' } + elseif ($env:ULTRALIGHT_SDK_URL) { + $dlUrl = $env:ULTRALIGHT_SDK_URL + if ($dlUrl -match '^https://github.com/([^/]+)/([^/]+)/blob/(.+)$') { + $dlUrl = "https://raw.githubusercontent.com/$($Matches[1])/$($Matches[2])/$($Matches[3])" + } + $pkg = Join-Path $env:RUNNER_TEMP 'ultralight-sdk' + Invoke-WebRequest -Uri $dlUrl -UseBasicParsing -OutFile $pkg + $extract = Join-Path $env:RUNNER_TEMP 'sdk-extract' + New-Item -ItemType Directory -Force -Path $extract | Out-Null + & 7z x -y -o"$extract" "$pkg" | Out-Null + $rootFound = Get-ChildItem -Path $extract -Recurse -Directory | Where-Object { Test-Path (Join-Path $_.FullName 'include') -and Test-Path (Join-Path $_.FullName 'lib') } | Select-Object -First 1 + if ($rootFound) { $root = $rootFound.FullName; $present = 'true' } + } + "present=$present" | Out-File -FilePath $env:GITHUB_OUTPUT -Encoding utf8 -Append + if ($present -eq 'true') { + "ULTRALIGHT_SDK_ROOT=$root" | Out-File -FilePath $env:GITHUB_ENV -Encoding utf8 -Append + } else { Write-Error "Ultralight Windows SDK not found."; exit 1 } + + - name: Install libcurl (vcpkg/choco) + shell: pwsh + run: | + pwsh -File "${{ github.workspace }}\scripts\install_curl.ps1" + + - name: Configure CMake (ARM64EC) + if: steps.prep_sdk.outputs.present == 'true' + shell: pwsh + run: | + cmake --version + $createInstaller = "$env:CREATE_INSTALLER" + if ($createInstaller -eq '' -or $null -eq $createInstaller) { $createInstaller = 'false' } + $installerFlag = if ($createInstaller -match '^(true|1|on)$') { 'ON' } else { 'OFF' } + $vcpkgToolchain = if ($env:VCPKG_ROOT) { "-DCMAKE_TOOLCHAIN_FILE=$env:VCPKG_ROOT/scripts/buildsystems/vcpkg.cmake" } else { "" } + cmake -S . -B build -G "Visual Studio 17 2022" -A ARM64EC -DULTRALIGHT_SDK_ROOT="$env:ULTRALIGHT_SDK_ROOT" -DBUILD_TESTING=OFF -DAUTO_INSTALL_CURL=ON -DCREATE_INSTALLER=$installerFlag -DWEBBROWSER_VERSION="$env:WEBBROWSER_VERSION" -DCMAKE_BUILD_TYPE=Release $vcpkgToolchain + + - name: Build Project + shell: pwsh + run: | + $ErrorActionPreference = 'Stop' + & cmake --build build --config Release --parallel diff --git a/CMakeLists.txt b/CMakeLists.txt index 621b45b..9c51f10 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -71,6 +71,8 @@ set(SOURCES "src/AdBlocker.cpp" "src/BookmarkStore.h" "src/BookmarkStore.cpp" + "src/ThemeManager.h" + "src/ThemeManager.cpp" "src/DownloadManager.h" "src/DownloadManager.cpp" "src/ExtensionManager.h" @@ -148,7 +150,7 @@ endif() # Download and configure WebView2 SDK via FetchContent. if(WIN32 AND MSVC) include(FetchContent) - + # Download WebView2 SDK from NuGet FetchContent_Declare( webview2 @@ -156,11 +158,11 @@ if(WIN32 AND MSVC) DOWNLOAD_EXTRACT_TIMESTAMP TRUE ) FetchContent_MakeAvailable(webview2) - + # WebView2 headers and libs from NuGet package set(WEBVIEW2_INCLUDE_DIR "${webview2_SOURCE_DIR}/build/native/include") set(WEBVIEW2_LIB_DIR "${webview2_SOURCE_DIR}/build/native/x64") - + if(EXISTS "${WEBVIEW2_INCLUDE_DIR}/WebView2.h") message(STATUS "Building DRM Windows WebView using Microsoft WebView2 SDK") target_include_directories(Ultralight-WebBrowser PRIVATE ${WEBVIEW2_INCLUDE_DIR}) @@ -190,7 +192,7 @@ endif() find_library(ULTRALIGHT_LIB NAMES Ultralight PATHS "${ULTRALIGHT_SDK_ROOT}/lib" "${ULTRALIGHT_SDK_ROOT}/bin" NO_DEFAULT_PATH) find_library(ULTRALIGHT_CORE_LIB NAMES UltralightCore PATHS "${ULTRALIGHT_SDK_ROOT}/lib" "${ULTRALIGHT_SDK_ROOT}/bin" NO_DEFAULT_PATH) find_library(WEB_CORE_LIB NAMES WebCore PATHS "${ULTRALIGHT_SDK_ROOT}/lib" "${ULTRALIGHT_SDK_ROOT}/bin" NO_DEFAULT_PATH) - + if(APP_CORE_LIB AND ULTRALIGHT_LIB) add_executable(UtilsTest tests/UtilsTest.cpp src/Utils.cpp) target_link_libraries(UtilsTest PRIVATE ${APP_CORE_LIB} ${ULTRALIGHT_LIB} ${ULTRALIGHT_CORE_LIB} ${WEB_CORE_LIB}) @@ -474,7 +476,7 @@ if(WIN32) set(CPACK_NSIS_MUI_ICON "${APP_ICON_ICO}") set(CPACK_NSIS_MUI_UNIICON "${APP_ICON_ICO}") endif() - + # Configure Start Menu shortcuts to point to the correct executable set(CPACK_NSIS_INSTALLED_ICON_NAME "${INSTALL_DIR_NAME}\\\\Ultralight-WebBrowser.exe") set(CPACK_NSIS_CREATE_ICONS_EXTRA " diff --git a/assets/bookmarks.html b/assets/bookmarks.html new file mode 100644 index 0000000..c7180f6 --- /dev/null +++ b/assets/bookmarks.html @@ -0,0 +1,460 @@ + + + + + Bookmarks + + + + + + + +
+
+

+ + + + Bookmarks +

+
+ + +
+
+ + + + +
+ + + + + \ No newline at end of file diff --git a/assets/menu.html b/assets/menu.html index 563e642..a20b68c 100644 --- a/assets/menu.html +++ b/assets/menu.html @@ -57,8 +57,26 @@ border-radius: 4px; font-family: 'Consolas', 'Courier New', monospace; } - @keyframes ul_fade_in { from { opacity: 0; } to { opacity: 1; } } - @-webkit-keyframes ul_fade_in { from { opacity: 0; } to { opacity: 1; } } + + @keyframes ul_fade_in { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } + + @-webkit-keyframes ul_fade_in { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } @@ -88,6 +106,10 @@ History Ctrl+H +
+ Bookmarks + Ctrl+B +
Downloads Ctrl+J @@ -100,6 +122,9 @@ Extensions Ctrl+E
+
+ Themes +
Settings Ctrl+, @@ -176,6 +201,9 @@ case 'history': if (window.OnOpenHistoryNewTab) OnOpenHistoryNewTab(); break; + case 'bookmarks': + if (window.OnOpenBookmarksNewTab) OnOpenBookmarksNewTab(); + break; case 'downloads': if (window.OnOpenDownloadsNewTab) OnOpenDownloadsNewTab(); break; @@ -185,6 +213,9 @@ case 'extensions': if (window.OnOpenExtensionsNewTab) OnOpenExtensionsNewTab(); break; + case 'themes': + if (window.OnOpenThemesNewTab) OnOpenThemesNewTab(); + break; case 'settings': if (window.OnOpenSettingsPanel) OnOpenSettingsPanel(); break; @@ -194,7 +225,7 @@ })(); diff --git a/assets/new_tab_page.html b/assets/new_tab_page.html index b44c518..87e3f05 100644 --- a/assets/new_tab_page.html +++ b/assets/new_tab_page.html @@ -133,4 +133,4 @@

- + \ No newline at end of file diff --git a/assets/passwords.html b/assets/passwords.html index 9ce9d3d..6342760 100644 --- a/assets/passwords.html +++ b/assets/passwords.html @@ -1,10 +1,12 @@ + Passwords - Ultralight Browser - + +

- + + + Passwords

@@ -686,14 +717,21 @@

- - + + + +
- + + +

No saved passwords

When you save passwords in the browser, they'll appear here.

@@ -703,15 +741,21 @@

Import & Export

@@ -723,7 +767,10 @@

Import & Export

Add Password

@@ -747,7 +794,10 @@

Add Password

@@ -769,7 +819,10 @@

Add Password

Password Settings

@@ -855,10 +908,10 @@

Password Settings

const emptyState = document.getElementById('emptyState'); const searchTerm = document.getElementById('searchInput').value.toLowerCase(); - const filtered = passwords.filter(p => + const filtered = passwords.filter(p => !p.blacklisted && - (p.origin.toLowerCase().includes(searchTerm) || - p.username.toLowerCase().includes(searchTerm)) + (p.origin.toLowerCase().includes(searchTerm) || + p.username.toLowerCase().includes(searchTerm)) ); if (filtered.length === 0) { @@ -873,7 +926,7 @@

Password Settings

list.innerHTML = filtered.map(p => `
-
@@ -1048,7 +1101,7 @@

Password Settings

document.body.appendChild(textarea); textarea.focus(); textarea.select(); - + try { const successful = document.execCommand('copy'); if (successful) { @@ -1059,7 +1112,7 @@

Password Settings

} catch (err) { showToast('Failed to copy - please copy manually'); } - + document.body.removeChild(textarea); } @@ -1183,9 +1236,9 @@

Password Settings

function escapeHtml(str) { if (!str) return ''; return str.replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"'); + .replace(//g, '>') + .replace(/"/g, '"'); } function getDisplayDomain(url) { @@ -1198,4 +1251,5 @@

Password Settings

} - + + \ No newline at end of file diff --git a/assets/settings.html b/assets/settings.html index 42728b2..e252862 100644 --- a/assets/settings.html +++ b/assets/settings.html @@ -5,7 +5,8 @@ Settings - + - + + + +
+
+
+ + + +
+

Themes

+
Customize your browser appearance
+
+
+ +
+ + +
+

Built-in Themes

+
+
+ + + + + +
+

Import Theme

+
+ +

Drag & drop a theme file here, or click to browse

+ +
+ + +
+

📁 Theme Storage Information

+
    +
  • + + Custom themes are saved in browser storage and persist across sessions +
    • +
  • + + Export themes to JSON files for backup or sharing with others +
    • +
  • + + Import JSON theme files by dragging them onto the drop zone above +
    • +
  • + + Tip: Duplicate a built-in theme to create a customized version +
    • +
+
+
+
+ + + + + +
+ + + + + diff --git a/assets/themes/dark.json b/assets/themes/dark.json new file mode 100644 index 0000000..0ca6e54 --- /dev/null +++ b/assets/themes/dark.json @@ -0,0 +1,79 @@ +{ + "id": "dark", + "name": "Dark (Default)", + "description": "The default dark purple theme for Ultralight WebBrowser", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#16151d", + "color-bg-secondary": "#1e1e2e", + "color-bg-tertiary": "#232330", + "color-bg-elevated": "#282839", + "color-bg-hover": "#343446", + "color-bg-active": "#3d3d5c", + "color-bg-overlay": "rgba(22, 21, 29, 0.95)", + + "color-text-primary": "#e4e4ef", + "color-text-secondary": "#c4c2d0", + "color-text-tertiary": "#9999b3", + "color-text-muted": "#71718a", + "color-text-disabled": "#636074", + + "color-border-primary": "#313146", + "color-border-secondary": "#252532", + "color-border-hover": "#404060", + "color-border-focus": "#4a4a6a", + + "color-accent-primary": "#6C63FF", + "color-accent-secondary": "#7c6aef", + "color-accent-hover": "#8a83ff", + "color-accent-light": "rgba(108, 99, 255, 0.15)", + + "color-success": "#6aef8a", + "color-warning": "#f0b866", + "color-danger": "#ef6a6a", + "color-info": "#6ac0ef", + + "color-bookmark-active": "#FFD700", + "color-download-badge": "#ff6b6b", + "color-link": "#8a9eff", + + "toolbar-bg": "linear-gradient(0deg, #232330, #282836)", + "toolbar-border": "#252532", + "toolbar-icon-color": "rgba(200, 200, 200, 1.0)", + + "address-bg": "#16151d", + "address-text": "#c4c2d0", + + "tab-bg": "#1e1e28", + "tab-active-bg": "#282836", + "tab-text": "#b0afc0", + + "menu-bg": "#2b2b38", + "menu-border": "#313146", + "menu-item-hover": "#343446", + "menu-text": "#e2e1ea", + + "card-bg": "#282839", + "card-border": "#404060", + + "btn-primary-bg": "#6C63FF", + "btn-primary-text": "#ffffff", + "btn-secondary-bg": "rgba(255, 255, 255, 0.1)", + "btn-danger-bg": "#ef6a6a", + + "input-bg": "#32324a", + "input-border": "#404060", + "input-text": "#e4e4ef", + + "scrollbar-track": "#1e1e2e", + "scrollbar-thumb": "#3d3d5c", + + "tooltip-bg": "rgba(43, 43, 56, 0.95)", + "tooltip-text": "#f0f0ff", + + "bookmark-bar-bg": "rgba(29, 29, 33, 0.92)", + "bookmark-item-bg": "rgba(255, 255, 255, 0.08)" + } +} diff --git a/assets/themes/light.json b/assets/themes/light.json new file mode 100644 index 0000000..8695698 --- /dev/null +++ b/assets/themes/light.json @@ -0,0 +1,79 @@ +{ + "id": "light", + "name": "Light", + "description": "Clean light theme for daytime use", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#ffffff", + "color-bg-secondary": "#f6f8fa", + "color-bg-tertiary": "#eaeef2", + "color-bg-elevated": "#ffffff", + "color-bg-hover": "#e8ebef", + "color-bg-active": "#dce0e4", + "color-bg-overlay": "rgba(255, 255, 255, 0.95)", + + "color-text-primary": "#1f2328", + "color-text-secondary": "#424a53", + "color-text-tertiary": "#656d76", + "color-text-muted": "#8c959f", + "color-text-disabled": "#b0b8c0", + + "color-border-primary": "#d0d7de", + "color-border-secondary": "#e1e4e8", + "color-border-hover": "#c0c8d0", + "color-border-focus": "#0969da", + + "color-accent-primary": "#0969da", + "color-accent-secondary": "#218bff", + "color-accent-hover": "#54aeff", + "color-accent-light": "rgba(9, 105, 218, 0.1)", + + "color-success": "#1a7f37", + "color-warning": "#9a6700", + "color-danger": "#cf222e", + "color-info": "#0969da", + + "color-bookmark-active": "#e3a608", + "color-download-badge": "#cf222e", + "color-link": "#0969da", + + "toolbar-bg": "linear-gradient(0deg, #f6f8fa, #ffffff)", + "toolbar-border": "#d0d7de", + "toolbar-icon-color": "#424a53", + + "address-bg": "#ffffff", + "address-text": "#1f2328", + + "tab-bg": "#f6f8fa", + "tab-active-bg": "#ffffff", + "tab-text": "#424a53", + + "menu-bg": "#ffffff", + "menu-border": "#d0d7de", + "menu-item-hover": "#f6f8fa", + "menu-text": "#1f2328", + + "card-bg": "#ffffff", + "card-border": "#d0d7de", + + "btn-primary-bg": "#0969da", + "btn-primary-text": "#ffffff", + "btn-secondary-bg": "#f6f8fa", + "btn-danger-bg": "#cf222e", + + "input-bg": "#ffffff", + "input-border": "#d0d7de", + "input-text": "#1f2328", + + "scrollbar-track": "#f6f8fa", + "scrollbar-thumb": "#c0c8d0", + + "tooltip-bg": "rgba(36, 41, 47, 0.95)", + "tooltip-text": "#ffffff", + + "bookmark-bar-bg": "rgba(246, 248, 250, 0.95)", + "bookmark-item-bg": "rgba(0, 0, 0, 0.04)" + } +} diff --git a/assets/themes/midnight.json b/assets/themes/midnight.json new file mode 100644 index 0000000..08f0927 --- /dev/null +++ b/assets/themes/midnight.json @@ -0,0 +1,79 @@ +{ + "id": "midnight", + "name": "Midnight Blue", + "description": "Deep blue night theme inspired by GitHub's dark mode", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#0d1117", + "color-bg-secondary": "#161b22", + "color-bg-tertiary": "#21262d", + "color-bg-elevated": "#30363d", + "color-bg-hover": "#3d444d", + "color-bg-active": "#484f58", + "color-bg-overlay": "rgba(13, 17, 23, 0.95)", + + "color-text-primary": "#e6edf3", + "color-text-secondary": "#c9d1d9", + "color-text-tertiary": "#8b949e", + "color-text-muted": "#6e7681", + "color-text-disabled": "#484f58", + + "color-border-primary": "#30363d", + "color-border-secondary": "#21262d", + "color-border-hover": "#484f58", + "color-border-focus": "#58a6ff", + + "color-accent-primary": "#58a6ff", + "color-accent-secondary": "#79c0ff", + "color-accent-hover": "#a5d6ff", + "color-accent-light": "rgba(88, 166, 255, 0.15)", + + "color-success": "#3fb950", + "color-warning": "#d29922", + "color-danger": "#f85149", + "color-info": "#58a6ff", + + "color-bookmark-active": "#d29922", + "color-download-badge": "#f85149", + "color-link": "#58a6ff", + + "toolbar-bg": "linear-gradient(0deg, #161b22, #21262d)", + "toolbar-border": "#30363d", + "toolbar-icon-color": "#c9d1d9", + + "address-bg": "#0d1117", + "address-text": "#c9d1d9", + + "tab-bg": "#161b22", + "tab-active-bg": "#21262d", + "tab-text": "#8b949e", + + "menu-bg": "#21262d", + "menu-border": "#30363d", + "menu-item-hover": "#30363d", + "menu-text": "#e6edf3", + + "card-bg": "#21262d", + "card-border": "#30363d", + + "btn-primary-bg": "#238636", + "btn-primary-text": "#ffffff", + "btn-secondary-bg": "#21262d", + "btn-danger-bg": "#da3633", + + "input-bg": "#0d1117", + "input-border": "#30363d", + "input-text": "#e6edf3", + + "scrollbar-track": "#161b22", + "scrollbar-thumb": "#30363d", + + "tooltip-bg": "rgba(33, 38, 45, 0.95)", + "tooltip-text": "#e6edf3", + + "bookmark-bar-bg": "rgba(22, 27, 34, 0.95)", + "bookmark-item-bg": "rgba(255, 255, 255, 0.06)" + } +} diff --git a/assets/themes/monokai.json b/assets/themes/monokai.json new file mode 100644 index 0000000..dd5fb65 --- /dev/null +++ b/assets/themes/monokai.json @@ -0,0 +1,79 @@ +{ + "id": "monokai", + "name": "Monokai Pro", + "description": "Classic Monokai color scheme popular with developers", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#2d2a2e", + "color-bg-secondary": "#353236", + "color-bg-tertiary": "#403e41", + "color-bg-elevated": "#4a474c", + "color-bg-hover": "#555158", + "color-bg-active": "#615d63", + "color-bg-overlay": "rgba(45, 42, 46, 0.95)", + + "color-text-primary": "#fcfcfa", + "color-text-secondary": "#c1c0c0", + "color-text-tertiary": "#939293", + "color-text-muted": "#727072", + "color-text-disabled": "#5b595c", + + "color-border-primary": "#4a474c", + "color-border-secondary": "#353236", + "color-border-hover": "#555158", + "color-border-focus": "#ffd866", + + "color-accent-primary": "#ffd866", + "color-accent-secondary": "#ff6188", + "color-accent-hover": "#a9dc76", + "color-accent-light": "rgba(255, 216, 102, 0.15)", + + "color-success": "#a9dc76", + "color-warning": "#ffd866", + "color-danger": "#ff6188", + "color-info": "#78dce8", + + "color-bookmark-active": "#ffd866", + "color-download-badge": "#ff6188", + "color-link": "#78dce8", + + "toolbar-bg": "linear-gradient(0deg, #2d2a2e, #353236)", + "toolbar-border": "#4a474c", + "toolbar-icon-color": "#c1c0c0", + + "address-bg": "#2d2a2e", + "address-text": "#fcfcfa", + + "tab-bg": "#353236", + "tab-active-bg": "#403e41", + "tab-text": "#939293", + + "menu-bg": "#353236", + "menu-border": "#4a474c", + "menu-item-hover": "#403e41", + "menu-text": "#fcfcfa", + + "card-bg": "#353236", + "card-border": "#4a474c", + + "btn-primary-bg": "#a9dc76", + "btn-primary-text": "#2d2a2e", + "btn-secondary-bg": "#403e41", + "btn-danger-bg": "#ff6188", + + "input-bg": "#2d2a2e", + "input-border": "#4a474c", + "input-text": "#fcfcfa", + + "scrollbar-track": "#353236", + "scrollbar-thumb": "#4a474c", + + "tooltip-bg": "rgba(53, 50, 54, 0.95)", + "tooltip-text": "#fcfcfa", + + "bookmark-bar-bg": "rgba(53, 50, 54, 0.95)", + "bookmark-item-bg": "rgba(255, 255, 255, 0.06)" + } +} diff --git a/assets/themes/nord.json b/assets/themes/nord.json new file mode 100644 index 0000000..0b54820 --- /dev/null +++ b/assets/themes/nord.json @@ -0,0 +1,79 @@ +{ + "id": "nord", + "name": "Nord", + "description": "Arctic, north-bluish color palette inspired by the aurora borealis", + "author": "Ultralight Team", + "version": "1.0.0", + "isBuiltIn": true, + "colors": { + "color-bg-primary": "#2e3440", + "color-bg-secondary": "#3b4252", + "color-bg-tertiary": "#434c5e", + "color-bg-elevated": "#4c566a", + "color-bg-hover": "#5e6779", + "color-bg-active": "#6e7a8a", + "color-bg-overlay": "rgba(46, 52, 64, 0.95)", + + "color-text-primary": "#eceff4", + "color-text-secondary": "#e5e9f0", + "color-text-tertiary": "#d8dee9", + "color-text-muted": "#a5adba", + "color-text-disabled": "#7b8392", + + "color-border-primary": "#4c566a", + "color-border-secondary": "#3b4252", + "color-border-hover": "#5e6779", + "color-border-focus": "#88c0d0", + + "color-accent-primary": "#88c0d0", + "color-accent-secondary": "#81a1c1", + "color-accent-hover": "#5e81ac", + "color-accent-light": "rgba(136, 192, 208, 0.15)", + + "color-success": "#a3be8c", + "color-warning": "#ebcb8b", + "color-danger": "#bf616a", + "color-info": "#88c0d0", + + "color-bookmark-active": "#ebcb8b", + "color-download-badge": "#bf616a", + "color-link": "#88c0d0", + + "toolbar-bg": "linear-gradient(0deg, #3b4252, #434c5e)", + "toolbar-border": "#4c566a", + "toolbar-icon-color": "#d8dee9", + + "address-bg": "#2e3440", + "address-text": "#e5e9f0", + + "tab-bg": "#3b4252", + "tab-active-bg": "#434c5e", + "tab-text": "#d8dee9", + + "menu-bg": "#3b4252", + "menu-border": "#4c566a", + "menu-item-hover": "#434c5e", + "menu-text": "#eceff4", + + "card-bg": "#3b4252", + "card-border": "#4c566a", + + "btn-primary-bg": "#5e81ac", + "btn-primary-text": "#eceff4", + "btn-secondary-bg": "#434c5e", + "btn-danger-bg": "#bf616a", + + "input-bg": "#2e3440", + "input-border": "#4c566a", + "input-text": "#eceff4", + + "scrollbar-track": "#3b4252", + "scrollbar-thumb": "#4c566a", + + "tooltip-bg": "rgba(59, 66, 82, 0.95)", + "tooltip-text": "#eceff4", + + "bookmark-bar-bg": "rgba(59, 66, 82, 0.95)", + "bookmark-item-bg": "rgba(255, 255, 255, 0.06)" + } +} diff --git a/assets/themes/theme-variables.css b/assets/themes/theme-variables.css new file mode 100644 index 0000000..aa2cf75 --- /dev/null +++ b/assets/themes/theme-variables.css @@ -0,0 +1,254 @@ +/** + * Theme Variables CSS + * ================== + * Central theme system for Ultralight WebBrowser + * All color and style definitions are centralized here. + * + * Usage: Include this file in any HTML page to apply theming. + * Themes override these variables via JavaScript. + */ + +:root { + /* ============================================================ + * COLOR PALETTE - Primary Colors + * ============================================================ */ + + /* Background Colors */ + --color-bg-primary: #16151d; + --color-bg-secondary: #1e1e2e; + --color-bg-tertiary: #232330; + --color-bg-elevated: #282839; + --color-bg-hover: #343446; + --color-bg-active: #3d3d5c; + --color-bg-overlay: rgba(22, 21, 29, 0.95); + + /* Text Colors */ + --color-text-primary: #e4e4ef; + --color-text-secondary: #c4c2d0; + --color-text-tertiary: #9999b3; + --color-text-muted: #71718a; + --color-text-disabled: #636074; + + /* Border Colors */ + --color-border-primary: #313146; + --color-border-secondary: #252532; + --color-border-hover: #404060; + --color-border-focus: #4a4a6a; + + /* Accent Colors */ + --color-accent-primary: #6C63FF; + --color-accent-secondary: #7c6aef; + --color-accent-hover: #8a83ff; + --color-accent-light: rgba(108, 99, 255, 0.15); + + /* Status Colors */ + --color-success: #6aef8a; + --color-success-bg: rgba(106, 239, 138, 0.15); + --color-warning: #f0b866; + --color-warning-bg: rgba(240, 184, 102, 0.15); + --color-danger: #ef6a6a; + --color-danger-bg: rgba(239, 106, 106, 0.15); + --color-info: #6ac0ef; + --color-info-bg: rgba(106, 192, 239, 0.15); + + /* Special Colors */ + --color-bookmark-active: #FFD700; + --color-bookmark-hover: #ffe44d; + --color-download-badge: #ff6b6b; + --color-link: #8a9eff; + --color-link-hover: #aab8ff; + + /* ============================================================ + * COMPONENT COLORS - Toolbar + * ============================================================ */ + --toolbar-bg: linear-gradient(0deg, #232330, #282836); + --toolbar-border: #252532; + --toolbar-icon-color: #c8c8c8; + --toolbar-icon-hover: #ffffff; + --toolbar-icon-active: #6C63FF; + --toolbar-icon-disabled: rgb(99, 96, 116); + --toolbar-icon-hover-bg: #343446; + + /* ============================================================ + * COMPONENT COLORS - Address Bar + * ============================================================ */ + --address-bg: #16151d; + --address-text: #c4c2d0; + --address-focus-text: #ffffff; + --address-focus-ring: #343446; + + /* ============================================================ + * COMPONENT COLORS - Tabs + * ============================================================ */ + --tab-bg: #1e1e28; + --tab-active-bg: #282836; + --tab-hover-bg: #252532; + --tab-text: #b0afc0; + --tab-active-text: #e0dff0; + --tab-close-hover: rgba(255, 255, 255, 0.1); + + /* ============================================================ + * COMPONENT COLORS - Menu/Dropdown + * ============================================================ */ + --menu-bg: #2b2b38; + --menu-border: #313146; + --menu-item-hover: #343446; + --menu-text: #e2e1ea; + --menu-separator: #3a3a4e; + --menu-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); + + /* ============================================================ + * COMPONENT COLORS - Cards & Panels + * ============================================================ */ + --card-bg: #282839; + --card-border: #404060; + --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + --panel-bg: #1e1e2e; + + /* ============================================================ + * COMPONENT COLORS - Buttons + * ============================================================ */ + --btn-primary-bg: #6C63FF; + --btn-primary-hover: #7a72ff; + --btn-primary-text: #ffffff; + --btn-secondary-bg: rgba(255, 255, 255, 0.1); + --btn-secondary-hover: rgba(255, 255, 255, 0.15); + --btn-secondary-text: #c0d0e0; + --btn-secondary-border: rgba(255, 255, 255, 0.2); + --btn-danger-bg: #ef6a6a; + --btn-danger-hover: #f58080; + --btn-danger-text: #ffffff; + + /* ============================================================ + * COMPONENT COLORS - Inputs + * ============================================================ */ + --input-bg: #32324a; + --input-border: #404060; + --input-text: #e4e4ef; + --input-placeholder: #9999b3; + --input-focus-border: #6C63FF; + --input-focus-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2); + + /* ============================================================ + * COMPONENT COLORS - Scrollbar + * ============================================================ */ + --scrollbar-track: #1e1e2e; + --scrollbar-thumb: #3d3d5c; + --scrollbar-thumb-hover: #4d4d6c; + + /* ============================================================ + * COMPONENT COLORS - Tooltip + * ============================================================ */ + --tooltip-bg: rgba(43, 43, 56, 0.95); + --tooltip-text: #f0f0ff; + --tooltip-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); + + /* ============================================================ + * COMPONENT COLORS - Bookmark Bar + * ============================================================ */ + --bookmark-bar-bg: rgba(29, 29, 33, 0.92); + --bookmark-bar-border: rgba(255, 255, 255, 0.06); + --bookmark-item-bg: rgba(255, 255, 255, 0.08); + --bookmark-item-hover: rgba(255, 255, 255, 0.14); + --bookmark-item-text: #e0dff0; + + /* ============================================================ + * COMPONENT COLORS - Session Restore + * ============================================================ */ + --session-restore-bg: linear-gradient(180deg, #2d4a6f 0%, #1e3a5f 100%); + --session-restore-border: #3d6a9f; + --session-restore-text: #e0e8f0; + --session-restore-icon: #7cb3e0; + + /* ============================================================ + * SPACING & SIZING + * ============================================================ */ + --spacing-xs: 4px; + --spacing-sm: 8px; + --spacing-md: 12px; + --spacing-lg: 16px; + --spacing-xl: 24px; + --spacing-xxl: 32px; + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-pill: 9999px; + + /* ============================================================ + * TYPOGRAPHY + * ============================================================ */ + --font-family-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Ubuntu, Roboto, Arial, sans-serif; + --font-family-mono: "Consolas", "Courier New", monospace; + + --font-size-xs: 10px; + --font-size-sm: 12px; + --font-size-md: 14px; + --font-size-lg: 16px; + --font-size-xl: 20px; + --font-size-xxl: 24px; + + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + /* ============================================================ + * TRANSITIONS + * ============================================================ */ + --transition-fast: 0.075s ease; + --transition-normal: 0.15s ease; + --transition-slow: 0.3s ease; + + /* ============================================================ + * Z-INDEX LAYERS + * ============================================================ */ + --z-dropdown: 1000; + --z-sticky: 1020; + --z-fixed: 1030; + --z-modal-backdrop: 1040; + --z-modal: 1050; + --z-popover: 1060; + --z-tooltip: 1070; + --z-toast: 12000; +} + +/* ============================================================ + * SCROLLBAR STYLING + * ============================================================ */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--scrollbar-track); +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: var(--radius-sm); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-hover); +} + +/* ============================================================ + * COMMON UTILITY CLASSES + * ============================================================ */ +.theme-fade-in { + animation: theme_fade_in 0.3s ease forwards; +} + +@keyframes theme_fade_in { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Selection styling */ +::selection { + background: var(--color-accent-light); + color: var(--color-text-primary); +} diff --git a/assets/themes/theme.js b/assets/themes/theme.js new file mode 100644 index 0000000..87a0639 --- /dev/null +++ b/assets/themes/theme.js @@ -0,0 +1,1212 @@ +/** + * Theme Manager JavaScript + * ======================== + * Handles theme loading, applying, and management for Ultralight WebBrowser + */ + +(function() { + 'use strict'; + + // Theme storage key + const THEME_STORAGE_KEY = 'ultralight_active_theme'; + const CUSTOM_THEMES_KEY = 'ultralight_custom_themes'; + + // Default themes that ship with the browser + // Note: Organized with more dark themes as they are more popular + const DEFAULT_THEMES = { + // ================================================================= + // DARK THEMES + // ================================================================= + 'dark': { + id: 'dark', + name: 'Dark (Default)', + description: 'The default dark purple theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + // Background Colors + 'color-bg-primary': '#16151d', + 'color-bg-secondary': '#1e1e2e', + 'color-bg-tertiary': '#232330', + 'color-bg-elevated': '#282839', + 'color-bg-hover': '#343446', + 'color-bg-active': '#3d3d5c', + 'color-bg-overlay': 'rgba(22, 21, 29, 0.95)', + + // Text Colors + 'color-text-primary': '#e4e4ef', + 'color-text-secondary': '#c4c2d0', + 'color-text-tertiary': '#9999b3', + 'color-text-muted': '#71718a', + + // Border Colors + 'color-border-primary': '#313146', + 'color-border-secondary': '#252532', + + // Accent Colors + 'color-accent-primary': '#6C63FF', + 'color-accent-secondary': '#7c6aef', + 'color-accent-hover': '#8a83ff', + + // Status Colors + 'color-success': '#6aef8a', + 'color-warning': '#f0b866', + 'color-danger': '#ef6a6a', + 'color-info': '#6ac0ef', + + // Navbar/Toolbar + 'toolbar-bg': 'linear-gradient(0deg, #232330, #282836)', + 'toolbar-icon-color': '#c8c8c8', + 'toolbar-icon-hover': '#ffffff', + 'toolbar-icon-active': '#6C63FF', + + // Tabs + 'tab-bg': '#1e1e28', + 'tab-active-bg': '#282836', + 'tab-hover-bg': '#252532', + 'tab-text': '#b0afc0', + 'tab-active-text': '#e0dff0', + + // Menu & Cards + 'menu-bg': '#2b2b38', + 'card-bg': '#282839', + + // Inputs + 'input-bg': '#32324a', + 'input-border': '#404060', + + // Scrollbar + 'scrollbar-track': '#1e1e2e', + 'scrollbar-thumb': '#3d3d5c', + + // Radius (in pixels) + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'midnight': { + id: 'midnight', + name: 'Midnight Blue', + description: 'Deep blue night theme inspired by GitHub Dark', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#0d1117', + 'color-bg-secondary': '#161b22', + 'color-bg-tertiary': '#21262d', + 'color-bg-elevated': '#30363d', + 'color-bg-hover': '#3d444d', + 'color-bg-active': '#484f58', + 'color-bg-overlay': 'rgba(13, 17, 23, 0.95)', + + 'color-text-primary': '#e6edf3', + 'color-text-secondary': '#c9d1d9', + 'color-text-tertiary': '#8b949e', + 'color-text-muted': '#6e7681', + + 'color-border-primary': '#30363d', + 'color-border-secondary': '#21262d', + + 'color-accent-primary': '#58a6ff', + 'color-accent-secondary': '#79c0ff', + 'color-accent-hover': '#a5d6ff', + + 'color-success': '#3fb950', + 'color-warning': '#d29922', + 'color-danger': '#f85149', + 'color-info': '#58a6ff', + + 'toolbar-bg': 'linear-gradient(0deg, #161b22, #21262d)', + 'toolbar-icon-color': '#8b949e', + 'toolbar-icon-hover': '#e6edf3', + 'toolbar-icon-active': '#58a6ff', + + 'tab-bg': '#0d1117', + 'tab-active-bg': '#21262d', + 'tab-hover-bg': '#161b22', + 'tab-text': '#8b949e', + 'tab-active-text': '#e6edf3', + + 'menu-bg': '#21262d', + 'card-bg': '#21262d', + + 'input-bg': '#0d1117', + 'input-border': '#30363d', + + 'scrollbar-track': '#0d1117', + 'scrollbar-thumb': '#30363d', + + 'radius-sm': '6', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'dracula': { + id: 'dracula', + name: 'Dracula', + description: 'A dark theme with vibrant colors', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#282a36', + 'color-bg-secondary': '#21222c', + 'color-bg-tertiary': '#343746', + 'color-bg-elevated': '#3d3f4d', + 'color-bg-hover': '#44475a', + 'color-bg-active': '#4d4f5e', + 'color-bg-overlay': 'rgba(40, 42, 54, 0.95)', + + 'color-text-primary': '#f8f8f2', + 'color-text-secondary': '#d4d4d4', + 'color-text-tertiary': '#a9a9b3', + 'color-text-muted': '#6272a4', + + 'color-border-primary': '#44475a', + 'color-border-secondary': '#343746', + + 'color-accent-primary': '#bd93f9', + 'color-accent-secondary': '#ff79c6', + 'color-accent-hover': '#caa7fa', + + 'color-success': '#50fa7b', + 'color-warning': '#f1fa8c', + 'color-danger': '#ff5555', + 'color-info': '#8be9fd', + + 'toolbar-bg': 'linear-gradient(0deg, #21222c, #282a36)', + 'toolbar-icon-color': '#f8f8f2', + 'toolbar-icon-hover': '#bd93f9', + 'toolbar-icon-active': '#ff79c6', + + 'tab-bg': '#21222c', + 'tab-active-bg': '#343746', + 'tab-hover-bg': '#282a36', + 'tab-text': '#6272a4', + 'tab-active-text': '#f8f8f2', + + 'menu-bg': '#282a36', + 'card-bg': '#343746', + + 'input-bg': '#21222c', + 'input-border': '#44475a', + + 'scrollbar-track': '#21222c', + 'scrollbar-thumb': '#44475a', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'onedark': { + id: 'onedark', + name: 'One Dark', + description: 'Atom One Dark inspired theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#282c34', + 'color-bg-secondary': '#21252b', + 'color-bg-tertiary': '#2c323c', + 'color-bg-elevated': '#353b45', + 'color-bg-hover': '#3e4451', + 'color-bg-active': '#4d5566', + 'color-bg-overlay': 'rgba(40, 44, 52, 0.95)', + + 'color-text-primary': '#abb2bf', + 'color-text-secondary': '#9da5b4', + 'color-text-tertiary': '#7f848e', + 'color-text-muted': '#5c6370', + + 'color-border-primary': '#3e4451', + 'color-border-secondary': '#2c323c', + + 'color-accent-primary': '#61afef', + 'color-accent-secondary': '#c678dd', + 'color-accent-hover': '#7ec8f3', + + 'color-success': '#98c379', + 'color-warning': '#e5c07b', + 'color-danger': '#e06c75', + 'color-info': '#61afef', + + 'toolbar-bg': 'linear-gradient(0deg, #21252b, #282c34)', + 'toolbar-icon-color': '#9da5b4', + 'toolbar-icon-hover': '#abb2bf', + 'toolbar-icon-active': '#61afef', + + 'tab-bg': '#21252b', + 'tab-active-bg': '#282c34', + 'tab-hover-bg': '#2c323c', + 'tab-text': '#5c6370', + 'tab-active-text': '#abb2bf', + + 'menu-bg': '#2c323c', + 'card-bg': '#2c323c', + + 'input-bg': '#21252b', + 'input-border': '#3e4451', + + 'scrollbar-track': '#21252b', + 'scrollbar-thumb': '#3e4451', + + 'radius-sm': '4', + 'radius-md': '6', + 'radius-lg': '10' + } + }, + 'gruvbox': { + id: 'gruvbox', + name: 'Gruvbox Dark', + description: 'Retro groove color scheme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#282828', + 'color-bg-secondary': '#1d2021', + 'color-bg-tertiary': '#32302f', + 'color-bg-elevated': '#3c3836', + 'color-bg-hover': '#504945', + 'color-bg-active': '#665c54', + 'color-bg-overlay': 'rgba(40, 40, 40, 0.95)', + + 'color-text-primary': '#ebdbb2', + 'color-text-secondary': '#d5c4a1', + 'color-text-tertiary': '#bdae93', + 'color-text-muted': '#928374', + + 'color-border-primary': '#504945', + 'color-border-secondary': '#3c3836', + + 'color-accent-primary': '#fe8019', + 'color-accent-secondary': '#fabd2f', + 'color-accent-hover': '#ff9633', + + 'color-success': '#b8bb26', + 'color-warning': '#fabd2f', + 'color-danger': '#fb4934', + 'color-info': '#83a598', + + 'toolbar-bg': 'linear-gradient(0deg, #1d2021, #282828)', + 'toolbar-icon-color': '#d5c4a1', + 'toolbar-icon-hover': '#ebdbb2', + 'toolbar-icon-active': '#fe8019', + + 'tab-bg': '#1d2021', + 'tab-active-bg': '#32302f', + 'tab-hover-bg': '#282828', + 'tab-text': '#928374', + 'tab-active-text': '#ebdbb2', + + 'menu-bg': '#32302f', + 'card-bg': '#3c3836', + + 'input-bg': '#1d2021', + 'input-border': '#504945', + + 'scrollbar-track': '#1d2021', + 'scrollbar-thumb': '#504945', + + 'radius-sm': '2', + 'radius-md': '4', + 'radius-lg': '8' + } + }, + 'catppuccin': { + id: 'catppuccin', + name: 'Catppuccin Mocha', + description: 'Soothing pastel theme for the high-spirited', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#1e1e2e', + 'color-bg-secondary': '#181825', + 'color-bg-tertiary': '#313244', + 'color-bg-elevated': '#45475a', + 'color-bg-hover': '#585b70', + 'color-bg-active': '#6c7086', + 'color-bg-overlay': 'rgba(30, 30, 46, 0.95)', + + 'color-text-primary': '#cdd6f4', + 'color-text-secondary': '#bac2de', + 'color-text-tertiary': '#a6adc8', + 'color-text-muted': '#6c7086', + + 'color-border-primary': '#45475a', + 'color-border-secondary': '#313244', + + 'color-accent-primary': '#cba6f7', + 'color-accent-secondary': '#f5c2e7', + 'color-accent-hover': '#dbb9f9', + + 'color-success': '#a6e3a1', + 'color-warning': '#f9e2af', + 'color-danger': '#f38ba8', + 'color-info': '#89dceb', + + 'toolbar-bg': 'linear-gradient(0deg, #181825, #1e1e2e)', + 'toolbar-icon-color': '#bac2de', + 'toolbar-icon-hover': '#cdd6f4', + 'toolbar-icon-active': '#cba6f7', + + 'tab-bg': '#181825', + 'tab-active-bg': '#313244', + 'tab-hover-bg': '#1e1e2e', + 'tab-text': '#6c7086', + 'tab-active-text': '#cdd6f4', + + 'menu-bg': '#313244', + 'card-bg': '#313244', + + 'input-bg': '#181825', + 'input-border': '#45475a', + + 'scrollbar-track': '#181825', + 'scrollbar-thumb': '#45475a', + + 'radius-sm': '6', + 'radius-md': '10', + 'radius-lg': '14' + } + }, + 'tokyo-night': { + id: 'tokyo-night', + name: 'Tokyo Night', + description: 'A clean dark theme celebrating the lights of Tokyo', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#1a1b26', + 'color-bg-secondary': '#16161e', + 'color-bg-tertiary': '#24283b', + 'color-bg-elevated': '#292e42', + 'color-bg-hover': '#343b58', + 'color-bg-active': '#414868', + 'color-bg-overlay': 'rgba(26, 27, 38, 0.95)', + + 'color-text-primary': '#c0caf5', + 'color-text-secondary': '#a9b1d6', + 'color-text-tertiary': '#9aa5ce', + 'color-text-muted': '#565f89', + + 'color-border-primary': '#343b58', + 'color-border-secondary': '#24283b', + + 'color-accent-primary': '#7aa2f7', + 'color-accent-secondary': '#bb9af7', + 'color-accent-hover': '#9bb5f9', + + 'color-success': '#9ece6a', + 'color-warning': '#e0af68', + 'color-danger': '#f7768e', + 'color-info': '#7dcfff', + + 'toolbar-bg': 'linear-gradient(0deg, #16161e, #1a1b26)', + 'toolbar-icon-color': '#a9b1d6', + 'toolbar-icon-hover': '#c0caf5', + 'toolbar-icon-active': '#7aa2f7', + + 'tab-bg': '#16161e', + 'tab-active-bg': '#24283b', + 'tab-hover-bg': '#1a1b26', + 'tab-text': '#565f89', + 'tab-active-text': '#c0caf5', + + 'menu-bg': '#24283b', + 'card-bg': '#24283b', + + 'input-bg': '#16161e', + 'input-border': '#343b58', + + 'scrollbar-track': '#16161e', + 'scrollbar-thumb': '#343b58', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'ayu-dark': { + id: 'ayu-dark', + name: 'Ayu Dark', + description: 'Modern and minimal dark theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#0d1017', + 'color-bg-secondary': '#0a0e14', + 'color-bg-tertiary': '#131721', + 'color-bg-elevated': '#1a1f29', + 'color-bg-hover': '#242936', + 'color-bg-active': '#2d3340', + 'color-bg-overlay': 'rgba(13, 16, 23, 0.95)', + + 'color-text-primary': '#bfbdb6', + 'color-text-secondary': '#a09d96', + 'color-text-tertiary': '#73726e', + 'color-text-muted': '#565451', + + 'color-border-primary': '#1a1f29', + 'color-border-secondary': '#131721', + + 'color-accent-primary': '#ffb454', + 'color-accent-secondary': '#e6b450', + 'color-accent-hover': '#ffcc7d', + + 'color-success': '#aad94c', + 'color-warning': '#ffb454', + 'color-danger': '#f07178', + 'color-info': '#39bae6', + + 'toolbar-bg': 'linear-gradient(0deg, #0a0e14, #0d1017)', + 'toolbar-icon-color': '#a09d96', + 'toolbar-icon-hover': '#bfbdb6', + 'toolbar-icon-active': '#ffb454', + + 'tab-bg': '#0a0e14', + 'tab-active-bg': '#131721', + 'tab-hover-bg': '#0d1017', + 'tab-text': '#565451', + 'tab-active-text': '#bfbdb6', + + 'menu-bg': '#131721', + 'card-bg': '#1a1f29', + + 'input-bg': '#0a0e14', + 'input-border': '#1a1f29', + + 'scrollbar-track': '#0a0e14', + 'scrollbar-thumb': '#1a1f29', + + 'radius-sm': '4', + 'radius-md': '6', + 'radius-lg': '10' + } + }, + 'solarized-dark': { + id: 'solarized-dark', + name: 'Solarized Dark', + description: 'Precision color scheme for professionals', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#002b36', + 'color-bg-secondary': '#001e26', + 'color-bg-tertiary': '#073642', + 'color-bg-elevated': '#0a4352', + 'color-bg-hover': '#0d5564', + 'color-bg-active': '#106878', + 'color-bg-overlay': 'rgba(0, 43, 54, 0.95)', + + 'color-text-primary': '#93a1a1', + 'color-text-secondary': '#839496', + 'color-text-tertiary': '#657b83', + 'color-text-muted': '#586e75', + + 'color-border-primary': '#073642', + 'color-border-secondary': '#002b36', + + 'color-accent-primary': '#2aa198', + 'color-accent-secondary': '#268bd2', + 'color-accent-hover': '#45b6ad', + + 'color-success': '#859900', + 'color-warning': '#b58900', + 'color-danger': '#dc322f', + 'color-info': '#268bd2', + + 'toolbar-bg': 'linear-gradient(0deg, #001e26, #002b36)', + 'toolbar-icon-color': '#839496', + 'toolbar-icon-hover': '#93a1a1', + 'toolbar-icon-active': '#2aa198', + + 'tab-bg': '#001e26', + 'tab-active-bg': '#073642', + 'tab-hover-bg': '#002b36', + 'tab-text': '#586e75', + 'tab-active-text': '#93a1a1', + + 'menu-bg': '#073642', + 'card-bg': '#073642', + + 'input-bg': '#001e26', + 'input-border': '#073642', + + 'scrollbar-track': '#001e26', + 'scrollbar-thumb': '#073642', + + 'radius-sm': '4', + 'radius-md': '6', + 'radius-lg': '8' + } + }, + 'material-dark': { + id: 'material-dark', + name: 'Material Dark', + description: 'Material Design inspired dark theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#212121', + 'color-bg-secondary': '#1a1a1a', + 'color-bg-tertiary': '#2d2d2d', + 'color-bg-elevated': '#383838', + 'color-bg-hover': '#404040', + 'color-bg-active': '#4a4a4a', + 'color-bg-overlay': 'rgba(33, 33, 33, 0.95)', + + 'color-text-primary': '#eeffff', + 'color-text-secondary': '#b2ccd6', + 'color-text-tertiary': '#89a0a8', + 'color-text-muted': '#546e7a', + + 'color-border-primary': '#383838', + 'color-border-secondary': '#2d2d2d', + + 'color-accent-primary': '#82aaff', + 'color-accent-secondary': '#c792ea', + 'color-accent-hover': '#9dc3ff', + + 'color-success': '#c3e88d', + 'color-warning': '#ffcb6b', + 'color-danger': '#f07178', + 'color-info': '#89ddff', + + 'toolbar-bg': 'linear-gradient(0deg, #1a1a1a, #212121)', + 'toolbar-icon-color': '#b2ccd6', + 'toolbar-icon-hover': '#eeffff', + 'toolbar-icon-active': '#82aaff', + + 'tab-bg': '#1a1a1a', + 'tab-active-bg': '#2d2d2d', + 'tab-hover-bg': '#212121', + 'tab-text': '#546e7a', + 'tab-active-text': '#eeffff', + + 'menu-bg': '#2d2d2d', + 'card-bg': '#2d2d2d', + + 'input-bg': '#1a1a1a', + 'input-border': '#383838', + + 'scrollbar-track': '#1a1a1a', + 'scrollbar-thumb': '#383838', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'nord': { + id: 'nord', + name: 'Nord', + description: 'Arctic, north-bluish color palette', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#2e3440', + 'color-bg-secondary': '#272c36', + 'color-bg-tertiary': '#3b4252', + 'color-bg-elevated': '#434c5e', + 'color-bg-hover': '#4c566a', + 'color-bg-active': '#5e6779', + 'color-bg-overlay': 'rgba(46, 52, 64, 0.95)', + + 'color-text-primary': '#eceff4', + 'color-text-secondary': '#e5e9f0', + 'color-text-tertiary': '#d8dee9', + 'color-text-muted': '#a5adba', + + 'color-border-primary': '#4c566a', + 'color-border-secondary': '#3b4252', + + 'color-accent-primary': '#88c0d0', + 'color-accent-secondary': '#81a1c1', + 'color-accent-hover': '#8fbcbb', + + 'color-success': '#a3be8c', + 'color-warning': '#ebcb8b', + 'color-danger': '#bf616a', + 'color-info': '#5e81ac', + + 'toolbar-bg': 'linear-gradient(0deg, #272c36, #2e3440)', + 'toolbar-icon-color': '#d8dee9', + 'toolbar-icon-hover': '#eceff4', + 'toolbar-icon-active': '#88c0d0', + + 'tab-bg': '#272c36', + 'tab-active-bg': '#3b4252', + 'tab-hover-bg': '#2e3440', + 'tab-text': '#a5adba', + 'tab-active-text': '#eceff4', + + 'menu-bg': '#3b4252', + 'card-bg': '#3b4252', + + 'input-bg': '#272c36', + 'input-border': '#4c566a', + + 'scrollbar-track': '#272c36', + 'scrollbar-thumb': '#4c566a', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'monokai': { + id: 'monokai', + name: 'Monokai Pro', + description: 'Classic Monokai color scheme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#2d2a2e', + 'color-bg-secondary': '#221f22', + 'color-bg-tertiary': '#353236', + 'color-bg-elevated': '#403e41', + 'color-bg-hover': '#4a474c', + 'color-bg-active': '#555158', + 'color-bg-overlay': 'rgba(45, 42, 46, 0.95)', + + 'color-text-primary': '#fcfcfa', + 'color-text-secondary': '#c1c0c0', + 'color-text-tertiary': '#939293', + 'color-text-muted': '#727072', + + 'color-border-primary': '#4a474c', + 'color-border-secondary': '#353236', + + 'color-accent-primary': '#ffd866', + 'color-accent-secondary': '#ff6188', + 'color-accent-hover': '#ffe099', + + 'color-success': '#a9dc76', + 'color-warning': '#ffd866', + 'color-danger': '#ff6188', + 'color-info': '#78dce8', + + 'toolbar-bg': 'linear-gradient(0deg, #221f22, #2d2a2e)', + 'toolbar-icon-color': '#c1c0c0', + 'toolbar-icon-hover': '#fcfcfa', + 'toolbar-icon-active': '#ffd866', + + 'tab-bg': '#221f22', + 'tab-active-bg': '#353236', + 'tab-hover-bg': '#2d2a2e', + 'tab-text': '#727072', + 'tab-active-text': '#fcfcfa', + + 'menu-bg': '#353236', + 'card-bg': '#353236', + + 'input-bg': '#221f22', + 'input-border': '#4a474c', + + 'scrollbar-track': '#221f22', + 'scrollbar-thumb': '#4a474c', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'ocean-deep': { + id: 'ocean-deep', + name: 'Ocean Deep', + description: 'Deep ocean blues for late-night browsing', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'dark', + colors: { + 'color-bg-primary': '#0f111a', + 'color-bg-secondary': '#090b10', + 'color-bg-tertiary': '#1a1c25', + 'color-bg-elevated': '#242630', + 'color-bg-hover': '#2e313c', + 'color-bg-active': '#383b48', + 'color-bg-overlay': 'rgba(15, 17, 26, 0.95)', + + 'color-text-primary': '#a6accd', + 'color-text-secondary': '#8a90b3', + 'color-text-tertiary': '#6e7399', + 'color-text-muted': '#525880', + + 'color-border-primary': '#242630', + 'color-border-secondary': '#1a1c25', + + 'color-accent-primary': '#84ffff', + 'color-accent-secondary': '#80cbc4', + 'color-accent-hover': '#b2fff9', + + 'color-success': '#c3e88d', + 'color-warning': '#ffcb6b', + 'color-danger': '#ff5370', + 'color-info': '#82aaff', + + 'toolbar-bg': 'linear-gradient(0deg, #090b10, #0f111a)', + 'toolbar-icon-color': '#8a90b3', + 'toolbar-icon-hover': '#a6accd', + 'toolbar-icon-active': '#84ffff', + + 'tab-bg': '#090b10', + 'tab-active-bg': '#1a1c25', + 'tab-hover-bg': '#0f111a', + 'tab-text': '#525880', + 'tab-active-text': '#a6accd', + + 'menu-bg': '#1a1c25', + 'card-bg': '#1a1c25', + + 'input-bg': '#090b10', + 'input-border': '#242630', + + 'scrollbar-track': '#090b10', + 'scrollbar-thumb': '#242630', + + 'radius-sm': '4', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + + // ================================================================= + // LIGHT THEMES + // ================================================================= + 'light': { + id: 'light', + name: 'Light', + description: 'Clean light theme for daytime use', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'light', + colors: { + 'color-bg-primary': '#ffffff', + 'color-bg-secondary': '#f6f8fa', + 'color-bg-tertiary': '#eaeef2', + 'color-bg-elevated': '#ffffff', + 'color-bg-hover': '#e8ebef', + 'color-bg-active': '#dce0e4', + 'color-bg-overlay': 'rgba(255, 255, 255, 0.95)', + + 'color-text-primary': '#1f2328', + 'color-text-secondary': '#424a53', + 'color-text-tertiary': '#656d76', + 'color-text-muted': '#8c959f', + + 'color-border-primary': '#d0d7de', + 'color-border-secondary': '#e1e4e8', + + 'color-accent-primary': '#0969da', + 'color-accent-secondary': '#218bff', + 'color-accent-hover': '#0550ae', + + 'color-success': '#1a7f37', + 'color-warning': '#9a6700', + 'color-danger': '#cf222e', + 'color-info': '#0550ae', + + 'toolbar-bg': 'linear-gradient(0deg, #f6f8fa, #ffffff)', + 'toolbar-icon-color': '#656d76', + 'toolbar-icon-hover': '#1f2328', + 'toolbar-icon-active': '#0969da', + + 'tab-bg': '#f6f8fa', + 'tab-active-bg': '#ffffff', + 'tab-hover-bg': '#eaeef2', + 'tab-text': '#656d76', + 'tab-active-text': '#1f2328', + + 'menu-bg': '#ffffff', + 'card-bg': '#ffffff', + + 'input-bg': '#f6f8fa', + 'input-border': '#d0d7de', + + 'scrollbar-track': '#f6f8fa', + 'scrollbar-thumb': '#d0d7de', + + 'radius-sm': '6', + 'radius-md': '8', + 'radius-lg': '12' + } + }, + 'light-soft': { + id: 'light-soft', + name: 'Light Soft', + description: 'Warm, easy-on-the-eyes light theme', + author: 'Ultralight Team', + version: '1.0.0', + isBuiltIn: true, + category: 'light', + colors: { + 'color-bg-primary': '#faf8f5', + 'color-bg-secondary': '#f5f2ed', + 'color-bg-tertiary': '#ebe8e3', + 'color-bg-elevated': '#ffffff', + 'color-bg-hover': '#e5e2dd', + 'color-bg-active': '#dbd8d3', + 'color-bg-overlay': 'rgba(250, 248, 245, 0.95)', + + 'color-text-primary': '#2e2e2e', + 'color-text-secondary': '#5a5a5a', + 'color-text-tertiary': '#7a7a7a', + 'color-text-muted': '#9a9a9a', + + 'color-border-primary': '#e0ddd8', + 'color-border-secondary': '#ebe8e3', + + 'color-accent-primary': '#d97706', + 'color-accent-secondary': '#f59e0b', + 'color-accent-hover': '#b45309', + + 'color-success': '#059669', + 'color-warning': '#d97706', + 'color-danger': '#dc2626', + 'color-info': '#0284c7', + + 'toolbar-bg': 'linear-gradient(0deg, #f5f2ed, #faf8f5)', + 'toolbar-icon-color': '#7a7a7a', + 'toolbar-icon-hover': '#2e2e2e', + 'toolbar-icon-active': '#d97706', + + 'tab-bg': '#f5f2ed', + 'tab-active-bg': '#faf8f5', + 'tab-hover-bg': '#ebe8e3', + 'tab-text': '#7a7a7a', + 'tab-active-text': '#2e2e2e', + + 'menu-bg': '#ffffff', + 'card-bg': '#ffffff', + + 'input-bg': '#f5f2ed', + 'input-border': '#e0ddd8', + + 'scrollbar-track': '#f5f2ed', + 'scrollbar-thumb': '#dbd8d3', + + 'radius-sm': '6', + 'radius-md': '10', + 'radius-lg': '14' + } + } + }; + + /** + * Theme Manager Class + */ + class ThemeManager { + constructor() { + this.currentTheme = null; + this.customThemes = {}; + this.styleElement = null; + } + + /** + * Initialize the theme manager + */ + init() { + this.loadCustomThemes(); + this.createStyleElement(); + + // Load saved theme or default + const savedThemeId = this.getSavedThemeId(); + if (savedThemeId) { + this.applyTheme(savedThemeId); + } else { + this.applyTheme('dark'); + } + } + + /** + * Create the style element for dynamic theme injection + */ + createStyleElement() { + if (!this.styleElement) { + this.styleElement = document.createElement('style'); + this.styleElement.id = 'theme-dynamic-styles'; + document.head.appendChild(this.styleElement); + } + } + + /** + * Get all available themes (built-in + custom) + */ + getAllThemes() { + return { ...DEFAULT_THEMES, ...this.customThemes }; + } + + /** + * Get a specific theme by ID + */ + getTheme(themeId) { + return this.getAllThemes()[themeId] || null; + } + + /** + * Get the saved theme ID from storage + */ + getSavedThemeId() { + try { + if (window.NativeGetSetting) { + return window.NativeGetSetting('theme') || 'dark'; + } + return localStorage.getItem(THEME_STORAGE_KEY) || 'dark'; + } catch (e) { + return 'dark'; + } + } + + /** + * Save the active theme ID + */ + saveThemeId(themeId) { + try { + if (window.NativeSetSetting) { + window.NativeSetSetting('theme', themeId); + } + localStorage.setItem(THEME_STORAGE_KEY, themeId); + } catch (e) { + console.warn('Failed to save theme:', e); + } + } + + /** + * Load custom themes from storage + */ + loadCustomThemes() { + try { + if (window.NativeGetThemes) { + const json = window.NativeGetThemes(); + this.customThemes = JSON.parse(json || '{}'); + } else { + const stored = localStorage.getItem(CUSTOM_THEMES_KEY); + this.customThemes = stored ? JSON.parse(stored) : {}; + } + } catch (e) { + console.warn('Failed to load custom themes:', e); + this.customThemes = {}; + } + } + + /** + * Save custom themes to storage + */ + saveCustomThemes() { + try { + const json = JSON.stringify(this.customThemes); + if (window.NativeSaveThemes) { + window.NativeSaveThemes(json); + } + localStorage.setItem(CUSTOM_THEMES_KEY, json); + } catch (e) { + console.warn('Failed to save custom themes:', e); + } + } + + /** + * Apply a theme by ID + */ + applyTheme(themeId) { + const theme = this.getTheme(themeId); + if (!theme) { + console.warn('Theme not found:', themeId); + return false; + } + + this.currentTheme = theme; + + // Generate CSS from theme colors + let css = ':root {\n'; + for (const [key, value] of Object.entries(theme.colors)) { + css += ` --${key}: ${value};\n`; + } + css += '}\n'; + + // Apply to style element + if (this.styleElement) { + this.styleElement.textContent = css; + } + + // Save preference + this.saveThemeId(themeId); + + // Dispatch event for other components + window.dispatchEvent(new CustomEvent('themeChanged', { + detail: { themeId, theme } + })); + + return true; + } + + /** + * Create a new custom theme + */ + createTheme(themeData) { + const id = themeData.id || 'custom_' + Date.now(); + + const theme = { + id: id, + name: themeData.name || 'Custom Theme', + description: themeData.description || '', + author: themeData.author || 'User', + version: themeData.version || '1.0.0', + isBuiltIn: false, + colors: themeData.colors || { ...DEFAULT_THEMES.dark.colors } + }; + + this.customThemes[id] = theme; + this.saveCustomThemes(); + + return theme; + } + + /** + * Update an existing custom theme + */ + updateTheme(themeId, updates) { + if (DEFAULT_THEMES[themeId]) { + console.warn('Cannot modify built-in theme'); + return false; + } + + if (!this.customThemes[themeId]) { + console.warn('Custom theme not found:', themeId); + return false; + } + + this.customThemes[themeId] = { + ...this.customThemes[themeId], + ...updates, + id: themeId // Ensure ID doesn't change + }; + + this.saveCustomThemes(); + + // Re-apply if this is the current theme + if (this.currentTheme && this.currentTheme.id === themeId) { + this.applyTheme(themeId); + } + + return true; + } + + /** + * Delete a custom theme + */ + deleteTheme(themeId) { + if (DEFAULT_THEMES[themeId]) { + console.warn('Cannot delete built-in theme'); + return false; + } + + if (!this.customThemes[themeId]) { + return false; + } + + delete this.customThemes[themeId]; + this.saveCustomThemes(); + + // Switch to default if deleting current theme + if (this.currentTheme && this.currentTheme.id === themeId) { + this.applyTheme('dark'); + } + + return true; + } + + /** + * Export a theme as JSON + */ + exportTheme(themeId) { + const theme = this.getTheme(themeId); + if (!theme) return null; + + return JSON.stringify(theme, null, 2); + } + + /** + * Import a theme from JSON + */ + importTheme(jsonString) { + try { + const theme = JSON.parse(jsonString); + + if (!theme.name || !theme.colors) { + throw new Error('Invalid theme format'); + } + + // Generate new ID for imported theme + theme.id = 'imported_' + Date.now(); + theme.isBuiltIn = false; + + return this.createTheme(theme); + } catch (e) { + console.error('Failed to import theme:', e); + return null; + } + } + + /** + * Get the current theme + */ + getCurrentTheme() { + return this.currentTheme; + } + + /** + * Duplicate a theme for customization + */ + duplicateTheme(themeId) { + const source = this.getTheme(themeId); + if (!source) return null; + + return this.createTheme({ + name: source.name + ' (Copy)', + description: source.description, + author: 'User', + colors: { ...source.colors } + }); + } + } + + // Create global instance + window.ThemeManager = new ThemeManager(); + + // Auto-initialize when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + window.ThemeManager.init(); + }); + } else { + window.ThemeManager.init(); + } + +})(); diff --git a/assets/ui.css b/assets/ui.css index a55a069..4cc589b 100644 --- a/assets/ui.css +++ b/assets/ui.css @@ -16,13 +16,23 @@ body { } @keyframes ul_fade_in { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + + to { + opacity: 1; + } } @-webkit-keyframes ul_fade_in { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + + to { + opacity: 1; + } } #bar { @@ -36,7 +46,7 @@ body { } #address { - + border-radius: 9999px; border: none; height: 32px; @@ -346,6 +356,7 @@ body.compact-tabs #toggle-downloads .downloads-badge { transform: translateY(-100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; diff --git a/assets/ui.html b/assets/ui.html index 4aa115d..361aa6f 100644 --- a/assets/ui.html +++ b/assets/ui.html @@ -5,7 +5,7 @@ - + @@ -37,10 +37,12 @@ d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" /> - + - + @@ -88,14 +90,14 @@ - + - +