UI: Dark Mode (#4749)

redaxo · Sep 26, 2021 · 19382c5 · 19382c5
1 parent da7fdec
commit 19382c5
Show file tree

Hide file tree

Showing 125 changed files with 2,091 additions and 20 deletions.
diff --git a/.github/tests-visual/backup_export--dark.png b/.github/tests-visual/backup_export--dark.png
diff --git a/.github/tests-visual/backup_export.png b/.github/tests-visual/backup_export.png
diff --git a/.github/tests-visual/backup_import--dark.png b/.github/tests-visual/backup_import--dark.png
diff --git a/.github/tests-visual/backup_import_server--dark.png b/.github/tests-visual/backup_import_server--dark.png
diff --git a/.github/tests-visual/cronjob_cronjobs--dark.png b/.github/tests-visual/cronjob_cronjobs--dark.png
diff --git a/.github/tests-visual/cronjob_cronjobs_add--dark.png b/.github/tests-visual/cronjob_cronjobs_add--dark.png
diff --git a/.github/tests-visual/index--dark.png b/.github/tests-visual/index--dark.png
diff --git a/.github/tests-visual/login--dark.png b/.github/tests-visual/login--dark.png
diff --git a/.github/tests-visual/logout--dark.png b/.github/tests-visual/logout--dark.png
diff --git a/.github/tests-visual/media_manager_settings--dark.png b/.github/tests-visual/media_manager_settings--dark.png
diff --git a/.github/tests-visual/media_manager_settings.png b/.github/tests-visual/media_manager_settings.png
diff --git a/.github/tests-visual/media_manager_types--dark.png b/.github/tests-visual/media_manager_types--dark.png
diff --git a/.github/tests-visual/media_manager_types_add--dark.png b/.github/tests-visual/media_manager_types_add--dark.png
diff --git a/.github/tests-visual/media_manager_types_add.png b/.github/tests-visual/media_manager_types_add.png
diff --git a/.github/tests-visual/media_manager_types_edit--dark.png b/.github/tests-visual/media_manager_types_edit--dark.png
diff --git a/.github/tests-visual/mediapool_media--dark.png b/.github/tests-visual/mediapool_media--dark.png
diff --git a/.github/tests-visual/mediapool_media.png b/.github/tests-visual/mediapool_media.png
diff --git a/.github/tests-visual/mediapool_media_file--dark.png b/.github/tests-visual/mediapool_media_file--dark.png
diff --git a/.github/tests-visual/mediapool_media_file.png b/.github/tests-visual/mediapool_media_file.png
diff --git a/.github/tests-visual/mediapool_structure--dark.png b/.github/tests-visual/mediapool_structure--dark.png
diff --git a/.github/tests-visual/mediapool_sync--dark.png b/.github/tests-visual/mediapool_sync--dark.png
diff --git a/.github/tests-visual/mediapool_upload--dark.png b/.github/tests-visual/mediapool_upload--dark.png
diff --git a/.github/tests-visual/metainfo_articles--dark.png b/.github/tests-visual/metainfo_articles--dark.png
diff --git a/.github/tests-visual/metainfo_articles_add--dark.png b/.github/tests-visual/metainfo_articles_add--dark.png
diff --git a/.github/tests-visual/metainfo_categories--dark.png b/.github/tests-visual/metainfo_categories--dark.png
diff --git a/.github/tests-visual/metainfo_clangs--dark.png b/.github/tests-visual/metainfo_clangs--dark.png
diff --git a/.github/tests-visual/metainfo_media--dark.png b/.github/tests-visual/metainfo_media--dark.png
diff --git a/.github/tests-visual/modules_actions--dark.png b/.github/tests-visual/modules_actions--dark.png
diff --git a/.github/tests-visual/modules_actions_add--dark.png b/.github/tests-visual/modules_actions_add--dark.png
diff --git a/.github/tests-visual/modules_modules--dark.png b/.github/tests-visual/modules_modules--dark.png
diff --git a/.github/tests-visual/modules_modules_add--dark.png b/.github/tests-visual/modules_modules_add--dark.png
diff --git a/.github/tests-visual/modules_modules_add.png b/.github/tests-visual/modules_modules_add.png
diff --git a/.github/tests-visual/packages--dark.png b/.github/tests-visual/packages--dark.png
diff --git a/.github/tests-visual/packages_customizer_installed--dark.png b/.github/tests-visual/packages_customizer_installed--dark.png
diff --git a/.github/tests-visual/packages_customizer_installed.png b/.github/tests-visual/packages_customizer_installed.png
diff --git a/.github/tests-visual/phpmailer_config--dark.png b/.github/tests-visual/phpmailer_config--dark.png
diff --git a/.github/tests-visual/phpmailer_config.png b/.github/tests-visual/phpmailer_config.png
diff --git a/.github/tests-visual/setup--dark.png b/.github/tests-visual/setup--dark.png
diff --git a/.github/tests-visual/setup_2--dark.png b/.github/tests-visual/setup_2--dark.png
diff --git a/.github/tests-visual/setup_3--dark.png b/.github/tests-visual/setup_3--dark.png
diff --git a/.github/tests-visual/setup_4--dark.png b/.github/tests-visual/setup_4--dark.png
diff --git a/.github/tests-visual/setup_4.png b/.github/tests-visual/setup_4.png
diff --git a/.github/tests-visual/setup_5--dark.png b/.github/tests-visual/setup_5--dark.png
diff --git a/.github/tests-visual/setup_6--dark.png b/.github/tests-visual/setup_6--dark.png
diff --git a/.github/tests-visual/setup_7--dark.png b/.github/tests-visual/setup_7--dark.png
diff --git a/.github/tests-visual/structure_article_edit--dark.png b/.github/tests-visual/structure_article_edit--dark.png
diff --git a/.github/tests-visual/structure_article_edit.png b/.github/tests-visual/structure_article_edit.png
diff --git a/.github/tests-visual/structure_article_functions--dark.png b/.github/tests-visual/structure_article_functions--dark.png
diff --git a/.github/tests-visual/structure_category_edit--dark.png b/.github/tests-visual/structure_category_edit--dark.png
diff --git a/.github/tests-visual/structure_category_edit.png b/.github/tests-visual/structure_category_edit.png
diff --git a/.github/tests-visual/structure_slice_edit--dark.png b/.github/tests-visual/structure_slice_edit--dark.png
diff --git a/.github/tests-visual/structure_slice_edit.png b/.github/tests-visual/structure_slice_edit.png
diff --git a/.github/tests-visual/system_customizer--dark.png b/.github/tests-visual/system_customizer--dark.png
diff --git a/.github/tests-visual/system_lang--dark.png b/.github/tests-visual/system_lang--dark.png
diff --git a/.github/tests-visual/system_log--dark.png b/.github/tests-visual/system_log--dark.png
diff --git a/.github/tests-visual/system_report--dark.png b/.github/tests-visual/system_report--dark.png
diff --git a/.github/tests-visual/system_settings--dark.png b/.github/tests-visual/system_settings--dark.png
diff --git a/.github/tests-visual/system_settings.png b/.github/tests-visual/system_settings.png
diff --git a/.github/tests-visual/system_settings_safemode--dark.png b/.github/tests-visual/system_settings_safemode--dark.png
diff --git a/.github/tests-visual/system_settings_safemode.png b/.github/tests-visual/system_settings_safemode.png
diff --git a/.github/tests-visual/templates--dark.png b/.github/tests-visual/templates--dark.png
diff --git a/.github/tests-visual/templates_add--dark.png b/.github/tests-visual/templates_add--dark.png
diff --git a/.github/tests-visual/templates_edit--dark.png b/.github/tests-visual/templates_edit--dark.png
diff --git a/.github/tests-visual/templates_edit.png b/.github/tests-visual/templates_edit.png
diff --git a/.github/tests-visual/users_edit--dark.png b/.github/tests-visual/users_edit--dark.png
diff --git a/.github/tests-visual/users_role_add--dark.png b/.github/tests-visual/users_role_add--dark.png
diff --git a/.github/tests-visual/users_roles--dark.png b/.github/tests-visual/users_roles--dark.png
diff --git a/.github/tests-visual/users_users--dark.png b/.github/tests-visual/users_users--dark.png
diff --git a/.github/tests-visual/visual-record.js b/.github/tests-visual/visual-record.js
@@ -119,7 +119,7 @@ function countDiffPixels(img1path, img2path ) {
     return pixelmatch(img1.data, img2.data, null, img1.width, img1.height, {threshold: 0.1});
 }
 
-async function createScreenshot(page, screenshotName) {
+async function processScreenshot(page, screenshotName) {
     mkdirp.sync(WORKING_DIR);
 
     // hide blinking cursor
@@ -162,6 +162,23 @@ async function createScreenshot(page, screenshotName) {
     }
 }
 
+async function createScreenshots(page, screenshotName) {
+    await createLightScreenshot(page, screenshotName);
+    await createDarkScreenshot(page, screenshotName);
+}
+
+async function createLightScreenshot(page, screenshotName) {
+    await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'light' }]);
+    await page.waitForTimeout(200); // wait for UI update
+    await processScreenshot(page, screenshotName);
+}
+
+async function createDarkScreenshot(page, screenshotName) {
+    await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);
+    await page.waitForTimeout(200); // wait for UI update
+    await processScreenshot(page, screenshotName.replace('.png', '--dark.png'));
+}
+
 async function logIntoBackend(page, username = 'myusername', password = '91dfd9ddb4198affc5c194cd8ce6d338fde470e2') {
     await page.goto(START_URL, { waitUntil: 'load' });
     await page.type('#rex-id-login-user', username);
@@ -191,21 +208,21 @@ async function main() {
         case isSetup:
             // setup step 1
             await page.goto(START_URL, { waitUntil: 'load' });
-            await createScreenshot(page, 'setup.png');
+            await createScreenshots(page, 'setup.png');
 
             // setup steps 2-6
             for (var step = 2; step <= 6; step++) {
                 // step 3: wait until `networkidle0` to finish AJAX requests, see https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagegotourl-options
                 await page.goto(START_URL + '?page=setup&lang=de_de&step=' + step, { waitUntil: step === 3 ? 'networkidle0' : 'load'});
                 await page.waitForTimeout(350); // slight buffer for CSS animations or :focus styles etc.
-                await createScreenshot(page, 'setup_' + step + '.png');
+                await createScreenshots(page, 'setup_' + step + '.png');
             }
 
             // step 7
             // requires form in step 6 to be submitted
             await page.$eval('.rex-js-createadminform', form => form.submit());
             await page.waitForTimeout(1000);
-            await createScreenshot(page, 'setup_7.png');
+            await createScreenshots(page, 'setup_7.png');
 
             break;
 
@@ -214,17 +231,17 @@ async function main() {
             await page.goto(START_URL, { waitUntil: 'load' });
             await page.waitForSelector('.rex-background--ready');
             await page.waitForTimeout(1000); // wait for bg image to fade in
-            await createScreenshot(page, 'login.png');
+            await createScreenshots(page, 'login.png');
 
             // login successful
             await logIntoBackend(page);
-            await createScreenshot(page, 'index.png');
+            await createScreenshots(page, 'index.png');
 
             // run through all pages
             for (var fileName in allPages) {
                 await page.goto(allPages[fileName], { waitUntil: 'load' });
                 await page.waitForTimeout(350); // slight buffer for CSS animations or :focus styles etc.
-                await createScreenshot(page, fileName);
+                await createScreenshots(page, fileName);
             }
 
             // test safe mode
@@ -233,7 +250,7 @@ async function main() {
                 page.waitForNavigation(),
                 page.click('.btn-safemode-activate') // enable safe mode
             ]);
-            await createScreenshot(page, 'system_settings_safemode.png');
+            await createScreenshots(page, 'system_settings_safemode.png');
             await Promise.all([
                 page.waitForNavigation(),
                 page.click('.btn-safemode-deactivate') // disable safe mode again
@@ -245,16 +262,16 @@ async function main() {
                 page.waitForNavigation({ waitUntil: 'networkidle0' }),
                 page.click('#package-be_style-customizer .rex-table-action > a:first-child') // install
             ]);
-            await createScreenshot(page, 'packages_customizer_installed.png');
+            await createScreenshots(page, 'packages_customizer_installed.png');
             await page.goto(START_URL + '?page=system/customizer', { waitUntil: 'load' });
             await page.waitForTimeout(350); // slight buffer for CSS animations or :focus styles etc.
-            await createScreenshot(page, 'system_customizer.png');
+            await createScreenshots(page, 'system_customizer.png');
 
             // logout
             await page.click('#rex-js-nav-top .rex-logout');
             await page.waitForSelector('.rex-background--ready');
             await page.waitForTimeout(1000); // wait for bg image to fade in
-            await createScreenshot(page, 'logout.png');
+            await createScreenshots(page, 'logout.png');
 
             break;
     }

diff --git a/redaxo/src/addons/be_style/package.yml b/redaxo/src/addons/be_style/package.yml
@@ -1,5 +1,5 @@
 package: be_style
-version: '2.12.1'
+version: '3.0.0-dev'
 author: 'Jan Kristinus, Markus Staab, Thomas Blum'
 supportpage: https://github.com/redaxo/redaxo
 

diff --git a/redaxo/src/addons/be_style/plugins/customizer/assets/css/styles.css b/redaxo/src/addons/be_style/plugins/customizer/assets/css/styles.css
@@ -55,8 +55,22 @@
 
 .CodeMirror {
     border: 1px solid #c1c9d4;
-    min-height: 490px;  
+    min-height: 490px;
     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     font-size: 12px;
     line-height: 16px !important;
 }
+
+body.rex-theme-dark .be-style-customizer-title a,
+body.rex-theme-dark .be-style-customizer-title a:hover,
+body.rex-theme-dark .be-style-customizer-title a:focus {
+    color: rgba(255, 255, 255, 0.75);
+}
+
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) .be-style-customizer-title a,
+    body:not(.rex-theme-light) .be-style-customizer-title a:hover,
+    body:not(.rex-theme-light) .be-style-customizer-title a:focus {
+        color: rgba(255, 255, 255, 0.75);
+    }
+}
diff --git a/redaxo/src/addons/be_style/plugins/redaxo/assets/css/styles.css b/redaxo/src/addons/be_style/plugins/redaxo/assets/css/styles.css
diff --git a/redaxo/src/addons/be_style/plugins/redaxo/package.yml b/redaxo/src/addons/be_style/plugins/redaxo/package.yml
@@ -1,5 +1,5 @@
 package: be_style/redaxo
-version: '2.12.1'
+version: '3.0.0-dev'
 author: 'Ralph Zumkeller, Thomas Blum'
 supportpage: https://github.com/redaxo/redaxo
 compile: 0

diff --git a/redaxo/src/addons/be_style/plugins/redaxo/scss/_alerts.scss b/redaxo/src/addons/be_style/plugins/redaxo/scss/_alerts.scss
@@ -30,3 +30,29 @@
 .alert-warning a {
     color: $alert-warning-text;
 }
+
+// ----------------------------------------------------------------------------
+
+@mixin _dark-alerts {
+
+    .alert {
+        a,
+        .alert-link {
+            color: $color-text-light-inactive;
+
+            &:hover {
+                color: $color-text-light;
+            }
+        }
+    }
+}
+
+body.rex-theme-dark {
+    @include _dark-alerts;
+}
+
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) {
+        @include _dark-alerts;
+    }
+}
diff --git a/redaxo/src/addons/be_style/plugins/redaxo/scss/_bootstrap-dark-overrides.scss b/redaxo/src/addons/be_style/plugins/redaxo/scss/_bootstrap-dark-overrides.scss
@@ -0,0 +1,36 @@
+/*
+    Bootstrap dark mode overrides
+ */
+
+// Core variables and mixins
+@import "bootstrap-dark-overrides/mixins";
+
+// Core CSS
+@import "bootstrap-dark-overrides/scaffolding";
+@import "bootstrap-dark-overrides/type";
+@import "bootstrap-dark-overrides/code";
+@import "bootstrap-dark-overrides/forms";
+@import "bootstrap-dark-overrides/buttons";
+
+// Components
+@import "bootstrap-dark-overrides/alerts";
+@import "bootstrap-dark-overrides/badges";
+@import "bootstrap-dark-overrides/breadcrumbs";
+@import "bootstrap-dark-overrides/close";
+@import "bootstrap-dark-overrides/dropdowns";
+@import "bootstrap-dark-overrides/input-groups";
+@import "bootstrap-dark-overrides/jumbotron";
+@import "bootstrap-dark-overrides/labels";
+@import "bootstrap-dark-overrides/list-group";
+@import "bootstrap-dark-overrides/navs";
+@import "bootstrap-dark-overrides/pager";
+@import "bootstrap-dark-overrides/pagination";
+@import "bootstrap-dark-overrides/panels";
+@import "bootstrap-dark-overrides/progress-bars";
+@import "bootstrap-dark-overrides/tables";
+@import "bootstrap-dark-overrides/thumbnails";
+@import "bootstrap-dark-overrides/wells";
+
+// Components w/ JavaScript
+@import "bootstrap-dark-overrides/modals";
+@import "bootstrap-dark-overrides/popovers";
diff --git a/redaxo/src/addons/be_style/plugins/redaxo/scss/_buttons.scss b/redaxo/src/addons/be_style/plugins/redaxo/scss/_buttons.scss
@@ -119,3 +119,80 @@
     border-color: $color-b;
     outline: 0px solid rgba($color-b-light, 1);
 }
+
+// ----------------------------------------------------------------------------
+
+@mixin _dark-buttons {
+
+    // grey (default)
+    .btn-default,
+    .btn-abort,
+    .btn-back,
+    .btn-clang,
+    .btn-move,
+    .btn-reset,
+    .btn-search {
+        @include dark-button-variant($color-text-light, rgba($color-grey-5, 0.8), rgba(darken($color-grey-5, 8%), 0.8));
+    }
+
+    // dark (aligned with input elements)
+    .btn-popup,
+    .btn-view {
+        @include dark-button-variant($color-text-light, rgba($color-grey-2, 0.8), rgba($color-grey-1, 0.8));
+
+        &.btn-popup:hover,
+        &.btn-popup:focus {
+            // raise specificity via double class to override mixin styles
+            border-color: rgba($color-grey-1, 0.8);
+        }
+    }
+
+    // blue
+    .btn-primary,
+    .btn-apply,
+    .btn-save,
+    .btn-select,
+    .btn-send,
+    .btn-setup,
+    .btn-update {
+        @include dark-button-variant($color-text-light, $dark-brand-primary, darken($dark-brand-primary, 20%));
+    }
+
+    // special: blue + grey with custom borders
+    .btn-clang {
+        $normal: (color: $color-text-light, background: $color-grey-5, border: darken($color-grey-5, 10%));
+        $hover: (color: $color-text-light, background: lighten($color-grey-5, 4%), border: darken($color-grey-5, 6%));
+        $active: (color: $color-text-light, background: $dark-brand-primary, border: darken($dark-brand-primary, 24%)); // slightly increase contrast
+        $activeHover: (color: $color-text-light, background: lighten($dark-brand-primary, 4%), border: darken($dark-brand-primary, 20%));
+        @include rex-button-variant($normal, $hover, $active, $activeHover);
+    }
+
+    // green
+    .btn-edit,
+    .panel-edit .btn-edit,
+    .btn-save,
+    .btn-apply {
+        @include dark-button-variant($color-text-light, $dark-brand-success, darken($dark-brand-success, 12%));
+    }
+
+    // red
+    .btn-delete {
+        @include dark-button-variant($color-text-light, $dark-brand-danger, darken($dark-brand-danger, 15%));
+    }
+
+    // yellow
+    .btn-debug-mode,
+    .btn-safemode-activate {
+        @include dark-button-variant($color-text-light, $dark-brand-warning, darken($dark-brand-warning, 15%));
+    }
+}
+
+body.rex-theme-dark {
+    @include _dark-buttons;
+}
+
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) {
+        @include _dark-buttons;
+    }
+}
diff --git a/redaxo/src/addons/be_style/plugins/redaxo/scss/_docs.scss b/redaxo/src/addons/be_style/plugins/redaxo/scss/_docs.scss
@@ -221,3 +221,73 @@
         font-size: $font-size-h6;
     }
 }
+
+// ----------------------------------------------------------------------------
+
+@mixin _dark-docs {
+
+    .rex-docs,
+    .rex-readme .rex-readme-content {
+        h1 + ul {
+            border-bottom-color: $color-grey-1;
+        }
+
+        h2 {
+            border-bottom-color: $color-grey-1;
+
+            a,
+            a:hover {
+                color: $color-text-light;
+            }
+        }
+
+        table {
+            th,
+            td {
+                border-color: $color-grey-1;
+            }
+            th {
+                background-color: $color-grey-2;
+            }
+        }
+
+        code,
+        pre {
+            color: $color-blue-5;
+        }
+
+        pre::-moz-selection,
+        pre ::-moz-selection,
+        code::-moz-selection,
+        code ::-moz-selection {
+            background-color: $color-blue-1;
+        }
+
+        pre::selection,
+        pre ::selection,
+        code::selection,
+        code ::selection {
+            background-color: $color-blue-1;
+        }
+
+        :not(pre) > code,
+        pre {
+            background-color: $color-grey-1;
+        }
+    }
+    .rex-readme .rex-readme-content {
+        h2 {
+            border-bottom-color: $color-grey-1;
+        }
+    }
+}
+
+body.rex-theme-dark {
+    @include _dark-docs;
+}
+
+@media (prefers-color-scheme: dark) {
+    body:not(.rex-theme-light) {
+        @include _dark-docs;
+    }
+}