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

@@ -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');
 

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') {
+        let cssFile = `${themeFilesDir}/${theme}.css`;
-          themeFilesDir = '/src/themes/test';
-        }
 
-        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');
 

core/src/themes/test/dark.css

@@ -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;
-}

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>