Add dark screenshots

gerbera · Dec 20, 2024 · 7474d7b · 7474d7b
1 parent 87e1272
commit 7474d7b
Show file tree

Hide file tree

Showing 53 changed files with 98 additions and 55 deletions.
diff --git a/doc/_static/clients-view.png b/doc/_static/clients-view.png
diff --git a/doc/_static/clients-view_dark.png b/doc/_static/clients-view_dark.png
diff --git a/doc/_static/config-view.png b/doc/_static/config-view.png
diff --git a/doc/_static/config-view_dark.png b/doc/_static/config-view_dark.png
diff --git a/doc/_static/database-largegrid-view.png b/doc/_static/database-largegrid-view.png
diff --git a/doc/_static/database-largegrid-view_dark.png b/doc/_static/database-largegrid-view_dark.png
diff --git a/doc/_static/database-single-view.png b/doc/_static/database-single-view.png
diff --git a/doc/_static/database-single-view_dark.png b/doc/_static/database-single-view_dark.png
diff --git a/doc/_static/database-smallgrid-view.png b/doc/_static/database-smallgrid-view.png
diff --git a/doc/_static/database-smallgrid-view_dark.png b/doc/_static/database-smallgrid-view_dark.png
diff --git a/doc/_static/database-view.png b/doc/_static/database-view.png
diff --git a/doc/_static/database-view_dark.png b/doc/_static/database-view_dark.png
diff --git a/doc/_static/edit-autoscan-details.png b/doc/_static/edit-autoscan-details.png
diff --git a/doc/_static/edit-autoscan-details_dark.png b/doc/_static/edit-autoscan-details_dark.png
diff --git a/doc/_static/edit-autoscan.png b/doc/_static/edit-autoscan.png
diff --git a/doc/_static/edit-autoscan_dark.png b/doc/_static/edit-autoscan_dark.png
diff --git a/doc/_static/edit-item-details.png b/doc/_static/edit-item-details.png
diff --git a/doc/_static/edit-item-details_dark.png b/doc/_static/edit-item-details_dark.png
diff --git a/doc/_static/edit-item.png b/doc/_static/edit-item.png
diff --git a/doc/_static/edit-item_dark.png b/doc/_static/edit-item_dark.png
diff --git a/doc/_static/edit-tweak-details.png b/doc/_static/edit-tweak-details.png
diff --git a/doc/_static/edit-tweak-details_dark.png b/doc/_static/edit-tweak-details_dark.png
diff --git a/doc/_static/filesystem-view.png b/doc/_static/filesystem-view.png
diff --git a/doc/_static/filesystem-view_dark.png b/doc/_static/filesystem-view_dark.png
diff --git a/doc/_static/item-operations.png b/doc/_static/item-operations.png
diff --git a/doc/_static/item-operations_dark.png b/doc/_static/item-operations_dark.png
diff --git a/doc/_static/items-view.png b/doc/_static/items-view.png
diff --git a/doc/_static/items-view_dark.png b/doc/_static/items-view_dark.png
diff --git a/doc/_static/login-field-entry.png b/doc/_static/login-field-entry.png
diff --git a/doc/_static/login-field-entry_dark.png b/doc/_static/login-field-entry_dark.png
diff --git a/doc/_static/main-view-empty.png b/doc/_static/main-view-empty.png
diff --git a/doc/_static/main-view-empty_dark.png b/doc/_static/main-view-empty_dark.png
diff --git a/doc/_static/main-view.png b/doc/_static/main-view.png
diff --git a/doc/_static/main-view_dark.png b/doc/_static/main-view_dark.png
diff --git a/doc/_static/menubar_dark.png b/doc/_static/menubar_dark.png
diff --git a/doc/_static/search-view.png b/doc/_static/search-view.png
diff --git a/doc/_static/search-view_dark.png b/doc/_static/search-view_dark.png
diff --git a/doc/_static/task-message.png b/doc/_static/task-message.png
diff --git a/doc/_static/task-message_dark.png b/doc/_static/task-message_dark.png
diff --git a/doc/_static/toast-message.png b/doc/_static/toast-message.png
diff --git a/doc/_static/toast-message_dark.png b/doc/_static/toast-message_dark.png
diff --git a/doc/_static/trail-config-operations.png b/doc/_static/trail-config-operations.png
diff --git a/doc/_static/trail-config-operations_dark.png b/doc/_static/trail-config-operations_dark.png
diff --git a/doc/_static/trail-fs-operations.png b/doc/_static/trail-fs-operations.png
diff --git a/doc/_static/trail-fs-operations_dark.png b/doc/_static/trail-fs-operations_dark.png
diff --git a/doc/_static/trail-operations.png b/doc/_static/trail-operations.png
diff --git a/doc/_static/trail-operations_dark.png b/doc/_static/trail-operations_dark.png
diff --git a/doc/ui.rst b/doc/ui.rst
@@ -34,7 +34,7 @@ When the Gerbera server starts successfully it reports the location of the web b
     2018-01-28 17:05:28    INFO: The Web UI can be reached by following this link: http://127.0.0.1:49152/
 
 .. image:: _static/main-view-empty.png
-   :alt: Gerbera Home Page
+   :alt: Gerbera Home Page with empty database
    :target: _static/main-view-empty.png
 
 
@@ -66,6 +66,10 @@ The main view offers the same links to the sub pages as the menu. It also displa
    :alt: Gerbera Home Page
    :target: _static/main-view.png
 
+.. image:: _static/main-view_dark.png
+   :alt: Gerbera Home Page in dark mode
+   :target: _static/main-view_dark.png
+
 * Home (Gerbera logo or server name)
     *Returns to the start page*
 * Database // Browse indexed files
@@ -138,9 +142,9 @@ Grid View
 ---------
 The small grid view is designed to display many items on one screen without scrolling. To avoid critical clicks, delete and edit actions are hidden.
 
-.. image:: _static/database-smallgrid-view.png
-   :alt: Database view with small grid
-   :target: _static/database-smallgrid-view.png
+.. image:: _static/database-smallgrid-view_dark.png
+   :alt: Database view with small grid in dark view
+   :target: _static/database-smallgrid-view_dark.png
 
 Large Grid View
 ----------------
@@ -175,9 +179,9 @@ Clients View
 The clients view is accessible through the `Clients` menu item.  The view contains details on all clients that contacted the server.
 The second section contains statistics on the items played by the client groups.
 
-.. image:: _static/clients-view.png
-   :alt: Clients view
-   :target: _static/clients-view.png
+.. image:: _static/clients-view_dark.png
+   :alt: Clients view in dark view
+   :target: _static/clients-view_dark.png
 
 
 Config View
@@ -214,13 +218,26 @@ operations
 - Editing the item updates the UPNP meta-data for the item.
 
 .. image:: _static/edit-item.png
+   :width: 300
    :alt: Edit Item dialog
    :target: _static/edit-item.png
 
+.. image:: _static/edit-item_dark.png
+   :width: 300
+   :alt: Edit Item dialog in dark mode
+   :target: _static/edit-item_dark.png
+
+
 .. image:: _static/edit-item-details.png
+   :width: 500
    :alt: Edit Item dialog with details
    :target: _static/edit-item-details.png
 
+.. image:: _static/edit-item-details_dark.png
+   :width: 500
+   :alt: Edit Item dialog with details in dark mode
+   :target: _static/edit-item-details_dark.png
+
 Item operations act upon existing database items.  You can create new custom items using the Gerbera Trail.
 
 
@@ -298,8 +315,8 @@ message bar at the bottom of the page.
 
 
 The task message bar is only visible when there is active processing on the Gerbera server.  The active tasks display in
-the task message bar at the top of the page.
+the task message bar at the bottom of the page.
 
-.. image:: _static/task-message.png
-   :alt: Task message
-   :target: _static/task-message.png
+.. image:: _static/task-message_dark.png
+   :alt: Task message in dark mode
+   :target: _static/task-message_dark.png
diff --git a/gerbera-web/package.json b/gerbera-web/package.json
@@ -9,8 +9,10 @@
     "test:debug": "karma start karma.conf.js --log-level debug",
     "test:e2e": "concurrently --success first --kill-others \"npm start\" \"npm run e2e\"",
     "e2e": "SELENIUM_BROWSER=chrome mocha --timeout 15000 \"test/e2e/**.spec.js\"",
-    "screenshot": "rimraf _build && mkdirp _build/doc && SELENIUM_BROWSER=chrome RUNFILES_DIR=node_modules/@bazel/runfiles/ mocha --timeout 15000 \"test/e2e/screenshot.doc.js\" --folderPath=/_build/doc/",
+    "screenshot": "rimraf _build && mkdirp _build/doc && SELENIUM_BROWSER=chrome RUNFILES_DIR=node_modules/@bazel/runfiles/ mocha --timeout 15000 \"test/e2e/screenshot.doc.js\" --folderPath=/_build/doc/ --scheme=light",
+    "screenshot-dark": "rimraf _build && mkdirp _build/doc && SELENIUM_BROWSER=chrome RUNFILES_DIR=node_modules/@bazel/runfiles/ mocha --timeout 15000 \"test/e2e/screenshot.doc.js\" --folderPath=/_build/doc/ --scheme=dark",
     "doc:screenshot": "concurrently --success first --kill-others \"npm start\" \"npm run screenshot\"",
+    "doc:screenshot-dark": "concurrently --success first --kill-others \"npm start\" \"npm run screenshot-dark\"",
     "lint": "eslint -c .eslintrc ../web/js/*gerbera*.js"
   },
   "config": {

diff --git a/gerbera-web/test/e2e/page/login.page.js b/gerbera-web/test/e2e/page/login.page.js
@@ -52,6 +52,10 @@ module.exports = function (driver) {
     return await driver.wait(until.elementLocated(By.id('logout')), 5000);
   };
 
+  this.setDisplayMode = async (mode) => {
+    await driver.executeScript("document.documentElement.style.setProperty('color-scheme', "+ mode + ")");
+  };
+
   this.getToastMessage = async () => {
     let toastMsg = await driver.findElement(By.id('grb-toast-msg'));
     await driver.wait(until.elementIsVisible(toastMsg), 5000);