Extract colour from custom background

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

.github/workflows/cypress.yml

@@ -0,0 +1,98 @@
+name: Cypress
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+      - stable*
+
+env:
+  APP_NAME: viewer
+  BRANCH: ${{ github.base_ref }}
+  TESTING: true
+
+jobs:
+  init:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout server
+        uses: actions/checkout@v3
+
+      - name: Read package.json node and npm engines version
+        uses: skjnldsv/read-package-engines-version-actions@v1.2
+        id: versions
+        with:
+          fallbackNode: "^12"
+          fallbackNpm: "^6"
+
+      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
+        uses: actions/setup-node@v3
+        with:
+          cache: 'npm'
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+
+      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+        run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
+
+      - name: Install dependencies & build app
+        run: |
+          npm ci
+          TESTING=true npm run build --if-present
+
+      - name: Save context
+        uses: actions/cache@v3
+        with:
+          key: cypress-context-${{ github.run_id }}
+          path: /home/runner/work/server
+
+  cypress:
+    runs-on: ubuntu-latest
+    needs: init
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # run multiple copies of the current job in parallel
+        containers: [1]
+
+    name: runner ${{ matrix.containers }}
+
+    steps:
+      - name: Restore context
+        uses: actions/cache@v3
+        with:
+          key: cypress-context-${{ github.run_id }}
+          path: /home/runner/work/server
+
+      - name: Run E2E cypress tests
+        uses: cypress-io/github-action@v4
+        with:
+          record: true
+          parallel: true
+          # cypress env
+          ci-build-id: ${{ github.sha }}-${{ github.run_number }}
+          tag: ${{ github.event_name }}
+        env:
+          # Needs to be prefixed with CYPRESS_
+          CYPRESS_BRANCH: ${{ env.BRANCH }}
+          CYPRESS_GH: true
+          # https://github.com/cypress-io/github-action/issues/124
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          # Needed for some specific code workarounds
+          TESTING: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+  summary:
+    runs-on: ubuntu-latest
+    needs: [init, cypress]
+
+    if: always()
+
+    name: cypress-summary
+
+    steps:
+      - name: Summary status
+        run: if ${{ needs.init.result != 'success' || ( needs.cypress.result != 'success' && needs.cypress.result != 'skipped' ) }}; then exit 1; fi

.gitignore

@@ -163,3 +163,7 @@ composer.phar
 
 ./.htaccess
 core/js/mimetypelist.js
+
+# Tests - cypress
+cypress/snapshots
+cypress/videos

apps/theming/css/default.css

@@ -54,9 +54,6 @@
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
   --background-image-invert-if-bright: no;
-  --image-background: url('/core/img/app-background.jpg');
-  --image-background-default: url('/core/img/app-background.jpg');
-  --color-background-plain: #0082c9;
   --primary-invert-if-bright: no;
   --color-primary: #006aa3;
   --color-primary-default: #0082c9;
@@ -75,4 +72,6 @@
   --color-primary-element-light-hover: #dbe5ea;
   --color-primary-element-text-dark: #ededed;
   --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+  --image-background-default: url('/apps/theming/img/background/kamil-porembinski-clouds.jpg');
+  --color-background-plain: #0082c9;
 }