我们正在开发适用于 Android 和 iOS 的 Ionic-Vue 应用程序。在 Chrome 开发工具中，该应用程序的行为符合预期：默认情况下禁用暗模式，并在切换到“prefers-color-scheme：dark”时启用。然而，在真正的安卓设备上测试应用程序时，即使用户没有在暗模式下运行设备，有时也会启用暗模式。
这是我们的 package.json：
"dependencies": {
"@angular/core": "^12.2.0",
"@capacitor/android": "^3.0.0-rc.4",
"@capacitor/app": "1.0.2",
"@capacitor/core": "^3.0.0-rc.4",
"@capacitor/device": "^1.0.2",
"@capacitor/haptics": "1.0.2",
"@capacitor/ios": "^3.3.3",
"@capacitor/keyboard": "1.0.2",
"@capacitor/push-notifications": "^1.0.3",
"@capacitor/status-bar": "1.0.2",
"@ionic-native/core": "^5.35.0",
"@ionic-native/fingerprint-aio": "^5.36.0",
"@ionic-native/globalization": "^5.36.0",
"@ionic-native/in-app-browser": "^5.35.0",
"@ionic/cli": "^6.18.1",
"@ionic/vue": "6",
"@ionic/vue-router": "6",
"@types/npm": "^7.19.0",
"apexcharts": "^3.27.3",
"axios": "^0.21.1",
"cordova-plugin-fingerprint-aio": "^4.0.2",
"cordova-plugin-globalization": "^1.11.0",
"cordova-plugin-inappbrowser": "^5.0.0",
"core-js": "^3.6.5",
"moment": "^2.29.1",
"node-sass": "^6.0.1",
"path": "^0.12.7",
"vue": "^3.2.31",
"vue-i18n": "^9.1.7",
"vue-router": "^4.0.12",
"vue3-apexcharts": "^1.4.0",
"vuex": "^4.0.0-rc.2",
"webpack": "^4.46.0",
"webpack-dev-server": "^3.11.2"},
"devDependencies": {
"@capacitor/cli": "3.1.2",
"@types/jest": "^24.0.19",
"@vue/cli-plugin-babel": "~5.0.0-rc.3",
"@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.3",
"@vue/cli-plugin-router": "~5.0.0-rc.3",
"@vue/cli-plugin-typescript": "~5.0.0-rc.3",
"@vue/cli-plugin-unit-jest": "~5.0.0-rc.3",
"@vue/cli-service": "~5.0.0-rc.3",
"@vue/compiler-sfc": "^3.0.0-0",
"@vue/test-utils": "^2.0.0-0",
"cypress": "^8.3.0",
"jest": "^27.1.0",
"sass": "^1.35.2",
"sass-loader": "^10.2.0",
"ts-jest": "^27.0.4",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0"
}
这是我们配置颜色主题的 variables.css：
:root {
--ion-color-primary: #0d6efd;
--ion-color-primary-rgb: 13,110,253;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #0b61df;
--ion-color-primary-tint: #257dfd;
--ion-color-secondary: #cfe2ff;
--ion-color-secondary-rgb: 207,226,255;
--ion-color-secondary-contrast: #000000;
--ion-color-secondary-contrast-rgb: 0,0,0;
--ion-color-secondary-shade: #b6c7e0;
--ion-color-secondary-tint: #d4e5ff;
--ion-color-tertiary: #6610f2;
--ion-color-tertiary-rgb: 102,16,242;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #5a0ed5;
--ion-color-tertiary-tint: #7528f3;
--ion-color-success: #198754;
--ion-color-success-rgb: 25,135,84;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255,255,255;
--ion-color-success-shade: #16774a;
--ion-color-success-tint: #309365;
--ion-color-warning: #ffc107;
--ion-color-warning-rgb: 255,193,7;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0aa06;
--ion-color-warning-tint: #ffc720;
--ion-color-danger: #dc3545;
--ion-color-danger-rgb: 220,53,69;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #c22f3d;
--ion-color-danger-tint: #e04958;
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146,148,156;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244,245,248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0,0,0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}
ion-toolbar {
--color: var(--ion-color-primary);
}
ion-list-header{
--color: var(--ion-color-primary);
}
ion-fab-button {
--color: var(--ion-color-primary);
--background: var(--ion-color-primary-contrast);
--background-activated: : var(--ion-color-secondary);
}
ion-item-divider{
--background: var(--ion-color-light-tint);
--color: var(--ion-color-light-contrast);
}
@media (prefers-color-scheme: dark) {
/*
* Dark Colors
* -------------------------------------------
*/
/** Ionic CSS Variables **/
:root {
--ion-color-primary: #084298;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;
--ion-color-secondary: #084298;
--ion-color-secondary-rgb: 66,140,255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #3a7be0;
--ion-color-secondary-tint: #5598ff;
--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;
--ion-color-success: #198754;
--ion-color-success-rgb: 25,135,84;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255,255,255;
--ion-color-success-shade: #16774a;
--ion-color-success-tint: #309365;
--ion-color-warning: #ffc107;
--ion-color-warning-rgb: 255,193,7;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0aa06;
--ion-color-warning-tint: #ffc720;
--ion-color-danger: #dc3545;
--ion-color-danger-rgb: 220,53,69;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #c22f3d;
--ion-color-danger-tint: #e04958;
--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244,245,248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
--ion-color-light: #222428;
--ion-color-light-rgb: 34,36,40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}
ion-toolbar {
--background: var(--ion-color-primary);
--color: var(--ion-color-primary-contrast);
}
ion-list-header{
--background: var(--ion-color-dark-contrast);
--color: var(--ion-color-primary-contrast);
}
ion-fab-button {
--background: var(--ion-color-primary);
--color: var(--ion-color-primary-contrast);
}
/*
* 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-toolbar-background: #0d0d0d;
--ion-item-background: #1c1c1c;
--ion-item-background-activated: #313131;
}
/*
* 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: #1A1B1E;
}
ion-title.title-large {
--color: white;
}
}
该错误不会（似乎）发生在 iOS 中，并且在迁移到 Ionic 6 之前也没有（似乎）发生。我们没有覆盖任何 android 特定配置。任何帮助表示赞赏。