Add Dark mode #6

* Add Dark mode

Author: sgrastar

.github/ISSUE_TEMPLATE/issue_template_bug_report.yml

@@ -48,7 +48,7 @@ body:
        - Edge Add-on
        - Cloud Edition
        - Local Environment
-       - Other
+       - Other or All Environments
    validations:
      required: true
 
@@ -69,6 +69,6 @@ body:
    attributes:
      label: Version
      description: Version number can be found in the top right corner starting with 'v'
-     placeholder: 0.5.1
+     placeholder: v0.5.1
    validations:
      required: true

.github/workflows/test-and-release.yml

@@ -4,10 +4,15 @@ on:
   push:
     branches: [ master, main ]
   pull_request:
+    types: [closed]
     branches: [ master, main ]
 
 jobs:
   test:
+    permissions:
+      contents: read
+      pull-requests: write
+
     runs-on: ubuntu-latest
 
     steps:
@@ -23,6 +28,13 @@ jobs:
         with:
           version: 8
 
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: ${{ runner.os }}-pnpm-
+
       - name: Install dependencies
         run: pnpm install
 
@@ -36,8 +48,13 @@ jobs:
 
   build-and-release:
     needs: test
+    permissions:
+      contents: write
+
     runs-on: ubuntu-latest
-    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
+    if: |
+      (github.event_name == 'push' && !contains(github.event.head_commit.message, '[skip-release]')) || 
+      (github.event_name == 'pull_request' && github.event.pull_request.merged == true && !contains(github.event.pull_request.title, '[skip-release]'))
 
     steps:
       - uses: actions/checkout@v4
@@ -52,19 +69,32 @@ jobs:
         with:
           version: 8
 
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: ${{ runner.os }}-pnpm-
+
       - name: Install dependencies
         run: pnpm install
 
       - name: Build extension
         run: pnpm run build
-        
+
       - name: Create extension archive
         run: |
           node chromePackage.js
+          if [ ! -f extension.zip ]; then
+            echo "Failed to create extension.zip"
+            exit 1
+          fi
 
       # Chrome Web Store deployment
       - name: Submit to Chrome Web Store
-        if: ${{ !contains(github.event.head_commit.message, '[skip-release]') && !contains(github.event.head_commit.message, '[skip-release-chrome]') }}
+        if: |
+          (github.event_name == 'push' && !contains(github.event.head_commit.message, '[skip-release]') && !contains(github.event.head_commit.message, '[skip-release-chrome]')) || 
+          (github.event_name == 'pull_request' && github.event.pull_request.merged == true && !contains(github.event.pull_request.title, '[skip-release]') && !contains(github.event.pull_request.title, '[skip-release-chrome]'))
         run: |
           npx chrome-webstore-upload-cli@2 upload --source extension.zip --auto-publish
         env:
@@ -73,12 +103,13 @@ jobs:
           CLIENT_SECRET: ${{ secrets.CLIENT_SECRET }}
           REFRESH_TOKEN: ${{ secrets.REFRESH_TOKEN }}
 
-      # Microsoft Edge Add-on deployment
+      # Microsoft Edge Add-ons deployment
       - name: Submit to Microsoft Edge Add-ons
-        if: ${{ !contains(github.event.head_commit.message, '[skip-release]') && !contains(github.event.head_commit.message, '[skip-release-edge]') }}
+        if: |
+          (github.event_name == 'push' && !contains(github.event.head_commit.message, '[skip-release]') && !contains(github.event.head_commit.message, '[skip-release-edge]')) || 
+          (github.event_name == 'pull_request' && github.event.pull_request.merged == true && !contains(github.event.pull_request.title, '[skip-release]') && !contains(github.event.pull_request.title, '[skip-release-edge]'))
         run: |
           echo "Uploading package to Edge Add-ons..."
-          # -i オプションでレスポンスヘッダーも取得しますが、出力時に秘密情報は隠します
           UPLOAD_RESPONSE=$(curl -s -i -w "\n%{http_code}" -X POST \
             -H "Authorization: ApiKey ${{ secrets.EDGE_API_KEY }}" \
             -H "X-ClientID: ${{ secrets.EDGE_CLIENT_ID }}" \
@@ -91,22 +122,17 @@ jobs:
           
           if [ "$UPLOAD_HTTP_CODE" != "202" ]; then
             echo "Failed to upload package. HTTP Code: $UPLOAD_HTTP_CODE"
-            echo "Response omitted for security reasons."
             exit 1
           fi
           
-          # Location ヘッダーから OPERATION_ID を抽出（改行コード除去）
           OPERATION_ID=$(echo "$UPLOAD_RESPONSE" | grep -i "Location:" | awk '{print $2}' | tr -d '\r')
           
           if [ -z "$OPERATION_ID" ]; then
             echo "Failed to get operation ID from response"
-            echo "Response omitted for security reasons."
             exit 1
           fi
           
           echo "Package uploaded. Operation ID: $OPERATION_ID"
-          
-          # アップロード完了まで待機
           echo "Waiting for upload to complete..."
           MAX_ATTEMPTS=30
           ATTEMPT=1
@@ -122,10 +148,8 @@ jobs:
             STATUS_HTTP_CODE=$(echo "$STATUS_RESPONSE" | tail -n1)
             STATUS_BODY=$(echo "$STATUS_RESPONSE" | sed '$d')
             
-            # HTTP 200 または 202 を正常なレスポンスとして扱う
             if [ "$STATUS_HTTP_CODE" != "200" ] && [ "$STATUS_HTTP_CODE" != "202" ]; then
               echo "Failed to get status. HTTP Code: $STATUS_HTTP_CODE"
-              echo "Response omitted for security reasons."
               exit 1
             fi
             
@@ -136,7 +160,6 @@ jobs:
               break
             elif [ "$STATUS" = "Failed" ]; then
               echo "Upload failed"
-              echo "Response omitted for security reasons."
               exit 1
             fi
             
@@ -149,7 +172,6 @@ jobs:
             sleep 10
           done
           
-          # サブミッションの公開
           echo "Publishing submission..."
           PUBLISH_RESPONSE=$(curl -s -w "\n%{http_code}" -X POST \
             -H "Authorization: ApiKey ${{ secrets.EDGE_API_KEY }}" \
@@ -159,11 +181,8 @@ jobs:
             https://api.addons.microsoftedge.microsoft.com/v1/products/${{ secrets.EDGE_PRODUCT_ID }}/submissions)
             
           PUBLISH_HTTP_CODE=$(echo "$PUBLISH_RESPONSE" | tail -n1)
-          PUBLISH_BODY=$(echo "$PUBLISH_RESPONSE" | sed '$d')
-          
           if [ "$PUBLISH_HTTP_CODE" != "202" ]; then
             echo "Failed to publish submission. HTTP Code: $PUBLISH_HTTP_CODE"
-            echo "Response omitted for security reasons."
             exit 1
           fi
           

ff-build.zip

@@ -1,6 +1,6 @@
 {
   "name": "harlytics",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",

package.json

@@ -0,0 +1,40 @@
+
+<script>    export let btnClass = '';
+    import { onMount } from 'svelte';
+    
+    let darkMode = false;
+    
+    onMount(() => {
+      // クライアントサイドでのみ実行
+      if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+        darkMode = document.documentElement.classList.contains('dark');
+      }
+    });
+    
+    function toggleDarkMode() {
+      if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+        darkMode = !darkMode;
+        
+        if (darkMode) {
+          document.documentElement.classList.add('dark');
+          window.localStorage.setItem('color-theme', 'dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+          window.localStorage.setItem('color-theme', 'light');
+        }
+      }
+    }
+  </script>
+  
+  <button aria-label="Dark mode" type="button" class={btnClass} on:click={toggleDarkMode}>
+    <span class="hidden dark:block">
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+      </svg>
+    </span>
+    <span class="block dark:hidden">
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+      </svg>
+    </span>
+  </button>

src/lib/components/CustomDarkMode.svelte

@@ -318,12 +318,12 @@
     <div class="table-body">
       {#if showByPage && hasPagesInfo}
         {#each pages as page}
-          <div class="page-header">
-            <div class="flex items-center px-2 py-1 bg-gray-100">
+          <div class="page-header bg-white dark:bg-gray-600 dark:text-gray-200">
+            <div class="flex items-center px-2 py-1">
               <div class="flex-grow font-medium" title={page.title}>
                 {truncateText(page.title, 100) || `Page ${page.id}`}
                 <span
-                  class="text-sm text-gray-600"
+                  class="text-sm"
                   style="display: inline-block; float:right;"
                 >
                   (Load: {page.pageTimings.onLoad !== null
@@ -334,7 +334,7 @@
             </div>
           </div>
 
-          <div class="table-header indent">
+          <div class="table-header indent bg-white dark:bg-gray-700 dark:text-gray-300">
             <div class="path header-cell">Path</div>
             <div class="domain header-cell">Domain</div>
             <div class="method header-cell">Method</div>
@@ -409,7 +409,7 @@
           {/each}
         {/each}
       {:else}
-        <div class="table-header">
+        <div class="table-header bg-white dark:bg-gray-700 dark:text-gray-300">
           <div class="path header-cell">Path</div>
             <div class="domain header-cell">Domain</div>
             <div class="method header-cell">Method</div>
@@ -499,7 +499,7 @@
     display: flex;
     position: sticky;
     top: 0;
-    background: #f2f2f2;
+    /* background: #f2f2f2; */
     border-bottom: 1px solid #ccc;
     z-index: 1;
     padding: 0 0.5rem;

src/lib/components/EntryCacheTable.svelte

@@ -298,11 +298,11 @@
       {#if showByPage && hasPagesInfo}
         {#each pages as page}
           <div class="page-header">
-            <div class="flex items-center px-2 py-1 bg-gray-100">
+            <div class="flex items-center px-2 py-1  bg-white dark:bg-gray-600 dark:text-gray-200">
               <div class="flex-grow font-medium" title={page.title}>
                 {truncateText(page.title, 100) || `Page ${page.id}`}
                 <span
-                  class="text-sm text-gray-600"
+                  class="text-sm"
                   style="display: inline-block; float:right;"
                 >
                   (Load: {page.pageTimings.onLoad !== null
@@ -313,7 +313,7 @@
             </div>
           </div>
 
-          <div class="table-header indent">
+          <div class="table-header indent bg-white dark:bg-gray-700 dark:text-gray-300">
             <div class="path header-cell">Path</div>
             <div class="domain header-cell">Domain</div>
             <div class="method header-cell">Method</div>
@@ -382,7 +382,7 @@
           {/each}
         {/each}
       {:else}
-        <div class="table-header">
+        <div class="table-header bg-white dark:bg-gray-700 dark:text-gray-300">
           <div class="path header-cell">Path</div>
           <div class="domain header-cell">Domain</div>
           <div class="method header-cell">Method</div>
@@ -464,7 +464,7 @@
     display: flex;
     position: sticky;
     top: 0;
-    background: #f2f2f2;
+    /* background: #f2f2f2; */
     border-bottom: 1px solid #ccc;
     z-index: 1;
     padding: 0 0.5rem;