From d42f5ed78b66d733f12d2cf60908a8d1e1f3a1e0 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 9 Jan 2024 12:36:00 -0500
Subject: [PATCH] test: always use official dark mode theme (#28795)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Our theme tests currently consume an internal dark theme. This was
needed to add light/dark theme tests prior to us shipping separate
stylesheets to developers. However, now that these stylesheets have been
created we should always be testing with them so we can catch any bugs
in the dark mode stylesheet.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Remove the custom dark.css file and removed references to it
- Added a TODO to do the same thing for the light theme once FW-5862 is
done.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 core/src/themes/test/colors/index.html        |   8 +-
 core/src/themes/test/css-variables/index.html |  14 +-
 core/src/themes/test/dark.css                 | 155 ------------------
 .../test/playwright/page/utils/set-content.ts |   2 +-
 4 files changed, 18 insertions(+), 161 deletions(-)
 delete mode 100644 core/src/themes/test/dark.css

diff --git a/core/src/themes/test/colors/index.html b/core/src/themes/test/colors/index.html
index 76da3c4fa4..8fe5baf7c2 100644
--- a/core/src/themes/test/colors/index.html
+++ b/core/src/themes/test/colors/index.html
@@ -328,7 +328,13 @@
       });
 
       function toggleTheme(theme) {
-        var cssFile = `/src/themes/test/${theme}.css`;
+        let cssFile = `/css/themes/${theme}.always.css`;
+        if (theme === 'default') {
+          // TODO FW-5862 update this to not
+          // load a file when default is set. The light
+          // theme is automatically set when importing ionic.bundle.css
+          cssFile = `/src/themes/test/${theme}.css`;
+        }
 
         var oldLink = document.getElementById('theme');
 
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index f94681ada3..51dfa1cc41 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -983,11 +983,17 @@
 
         // The default and dark themes are official Ionic
         // themes so they are located outside of this test
-        if (theme == 'default' || theme == 'dark') {
-          themeFilesDir = '/src/themes/test';
-        }
+        let cssFile = `${themeFilesDir}/${theme}.css`;
 
-        var cssFile = `${themeFilesDir}/${theme}.css`;
+        // TODO FW-5862 update this to not
+        // load a file when default is set. The light
+        // theme is automatically set when importing ionic.bundle.css
+        if (theme == 'default') {
+          themeFilesDir = '/src/themes/test';
+        } else if (theme === 'dark') {
+          themeFilesDir = '/css/themes/';
+          cssFile = `${themeFilesDir}/${theme}.always.css`;
+        }
 
         var oldLink = document.getElementById('theme');
 
diff --git a/core/src/themes/test/dark.css b/core/src/themes/test/dark.css
deleted file mode 100644
index 95c1caba3d..0000000000
--- a/core/src/themes/test/dark.css
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
- * Dark Colors
- * -------------------------------------------
- */
-
-:root {
-  --ion-color-primary: #4d8dff;
-  --ion-color-primary-rgb: 77, 141, 255;
-  --ion-color-primary-contrast: #000000;
-  --ion-color-primary-contrast-rgb: 0, 0, 0;
-  --ion-color-primary-shade: #447ce0;
-  --ion-color-primary-tint: #5f98ff;
-
-  --ion-color-secondary: #62bdff;
-  --ion-color-secondary-rgb: 98, 189, 255;
-  --ion-color-secondary-contrast: #000000;
-  --ion-color-secondary-contrast-rgb: 0, 0, 0;
-  --ion-color-secondary-shade: #56a6e0;
-  --ion-color-secondary-tint: #72c4ff;
-
-  --ion-color-tertiary: #8482fb;
-  --ion-color-tertiary-rgb: 132, 130, 251;
-  --ion-color-tertiary-contrast: #000000;
-  --ion-color-tertiary-contrast-rgb: 0, 0, 0;
-  --ion-color-tertiary-shade: #7472dd;
-  --ion-color-tertiary-tint: #908ffb;
-
-  --ion-color-success: #2dd55b;
-  --ion-color-success-rgb: 45, 213, 91;
-  --ion-color-success-contrast: #000000;
-  --ion-color-success-contrast-rgb: 0, 0, 0;
-  --ion-color-success-shade: #28bb50;
-  --ion-color-success-tint: #42d96b;
-
-  --ion-color-warning: #ffce31;
-  --ion-color-warning-rgb: 255, 206, 49;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0b52b;
-  --ion-color-warning-tint: #ffd346;
-
-  --ion-color-danger: #f56570;
-  --ion-color-danger-rgb: 245, 101, 112;
-  --ion-color-danger-contrast: #000000;
-  --ion-color-danger-contrast-rgb: 0, 0, 0;
-  --ion-color-danger-shade: #d85963;
-  --ion-color-danger-tint: #f6747e;
-
-  --ion-color-dark: #f3f3f3;
-  --ion-color-dark-rgb: 243, 243, 243;
-  --ion-color-dark-contrast: #000000;
-  --ion-color-dark-contrast-rgb: 0, 0, 0;
-  --ion-color-dark-shade: #d6d6d6;
-  --ion-color-dark-tint: #f4f4f4;
-
-  --ion-color-medium: #959595;
-  --ion-color-medium-rgb: 149, 149, 149;
-  --ion-color-medium-contrast: #000000;
-  --ion-color-medium-contrast-rgb: 0, 0, 0;
-  --ion-color-medium-shade: #838383;
-  --ion-color-medium-tint: #a0a0a0;
-
-  --ion-color-light: #2f2f2f;
-  --ion-color-light-rgb: 47, 47, 47;
-  --ion-color-light-contrast: #ffffff;
-  --ion-color-light-contrast-rgb: 255, 255, 255;
-  --ion-color-light-shade: #292929;
-  --ion-color-light-tint: #444444;
-}
-
-/*
- * iOS Dark Theme
- * -------------------------------------------
- */
-
-.ios body {
-  --ion-background-color: #000000;
-  --ion-background-color-rgb: 0, 0, 0;
-
-  --ion-text-color: #ffffff;
-  --ion-text-color-rgb: 255, 255, 255;
-
-  --ion-color-step-50: #0d0d0d;
-  --ion-color-step-100: #1a1a1a;
-  --ion-color-step-150: #262626;
-  --ion-color-step-200: #333333;
-  --ion-color-step-250: #404040;
-  --ion-color-step-300: #4d4d4d;
-  --ion-color-step-350: #595959;
-  --ion-color-step-400: #666666;
-  --ion-color-step-450: #737373;
-  --ion-color-step-500: #808080;
-  --ion-color-step-550: #8c8c8c;
-  --ion-color-step-600: #999999;
-  --ion-color-step-650: #a6a6a6;
-  --ion-color-step-700: #b3b3b3;
-  --ion-color-step-750: #bfbfbf;
-  --ion-color-step-800: #cccccc;
-  --ion-color-step-850: #d9d9d9;
-  --ion-color-step-900: #e6e6e6;
-  --ion-color-step-950: #f2f2f2;
-
-  --ion-item-background: #000000;
-
-  --ion-card-background: #1c1c1d;
-}
-
-.ios ion-modal {
-  --ion-background-color: var(--ion-color-step-100);
-  --ion-toolbar-background: var(--ion-color-step-150);
-  --ion-toolbar-border-color: var(--ion-color-step-250);
-}
-
-/*
- * Material Design Dark Theme
- * -------------------------------------------
- */
-
-.md body {
-  --ion-background-color: #121212;
-  --ion-background-color-rgb: 18, 18, 18;
-
-  --ion-text-color: #ffffff;
-  --ion-text-color-rgb: 255, 255, 255;
-
-  --ion-border-color: #222222;
-
-  --ion-color-step-50: #1e1e1e;
-  --ion-color-step-100: #2a2a2a;
-  --ion-color-step-150: #363636;
-  --ion-color-step-200: #414141;
-  --ion-color-step-250: #4d4d4d;
-  --ion-color-step-300: #595959;
-  --ion-color-step-350: #656565;
-  --ion-color-step-400: #717171;
-  --ion-color-step-450: #7d7d7d;
-  --ion-color-step-500: #898989;
-  --ion-color-step-550: #949494;
-  --ion-color-step-600: #a0a0a0;
-  --ion-color-step-650: #acacac;
-  --ion-color-step-700: #b8b8b8;
-  --ion-color-step-750: #c4c4c4;
-  --ion-color-step-800: #d0d0d0;
-  --ion-color-step-850: #dbdbdb;
-  --ion-color-step-900: #e7e7e7;
-  --ion-color-step-950: #f3f3f3;
-
-  --ion-item-background: #1e1e1e;
-
-  --ion-toolbar-background: #1f1f1f;
-
-  --ion-tab-bar-background: #1f1f1f;
-
-  --ion-card-background: #1e1e1e;
-}
diff --git a/core/src/utils/test/playwright/page/utils/set-content.ts b/core/src/utils/test/playwright/page/utils/set-content.ts
index b66afc4863..a64492008e 100644
--- a/core/src/utils/test/playwright/page/utils/set-content.ts
+++ b/core/src/utils/test/playwright/page/utils/set-content.ts
@@ -42,7 +42,7 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
-        ${theme !== 'light' ? `<link href="${baseUrl}/src/themes/test/${theme}.css" rel="stylesheet" />` : ''}
+        ${theme !== 'light' ? `<link href="${baseUrl}/css/themes/${theme}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>