Ionic 浏览器应用程序的离子5强制灯主题

prdp8dxp  于 2022-12-08  发布在  Ionic
关注(0)|答案(8)|浏览(261)

我已经构建了这个应用程序https://cvirus.app，并在浏览器上构建和部署。
在Android手机上的Chrome浏览器上，它呈现黑色背景（因为默认情况下，黑色主题似乎正在应用）。
我想在任何设备和浏览器上都强制使用灯光主题。我该怎么做？
注解主题/变量中的深色portins.scss不起作用

ionic-framework

8条答案

按热度按时间
bjp0bcyl

bjp0bcyl1#

Since version 79 of the Chrome browser, you can choose between CSS prefers-color-sheme media feature values. Ionic respects this media feature and reacts to changes to it.
To change it without changing your OS preference and color theme, you need to open the Rendering panel in the Chrome Dev Tools:

  1. Open the the Chrome Dev Tools.
  2. Press Crtl+Shift+P on PC or Cmd+Shift+P on Mac.
  3. Type "Show rendering" in the Command Palette.
  4. Press Enter with the option Drawer | Show rendering selected, which should be already selected.
    The Rendering drawer opens. Then on the "Emulate CSS media..." option, select the color scheme you prefer.

赞(0）分享  回复(0）举报  2022-12-08
uelo1irk

uelo1irk2#

要解决此问题，您必须转到src文件夹下的theme/variable.scss并找到

@media (prefers-color-scheme: dark)

如果你还没有修改variable.scss.，它应该在第79行。点击查看screenshot of my own code，我希望这对你有帮助。

赞(0）分享  回复(0）举报  2022-12-08
wvyml7n5

wvyml7n53#

你应该在theme/variables.scss中注解ios主体和md主体类，然后它将变成light mode. x1c 0d1x

赞(0）分享  回复(0）举报  2022-12-08
qgelzfjb

qgelzfjb4#

在离子5+只需重命名prefers-color-scheme: dark到prefers-color-scheme: light然后它不会切换到黑暗的主题，无论什么。

赞(0）分享  回复(0）举报  2022-12-08
cbwuti44

cbwuti445#

在我的例子中，在theme/variables.scss中评论黑暗主题效果很好。
我在第70行注解@media (prefers-color-scheme: dark) {直到文件结束.这是我的文件

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/
:root {
  --ion-color-primary                : #633A82;
  --ion-color-primary-rgb            : 99, 58, 130;
  --ion-color-primary-contrast       : #FFFFFF;
  --ion-color-primary-contrast-rgb   : 255, 255, 255;
  --ion-color-primary-shade          : #573372;
  --ion-color-primary-tint           : #734E8F;

  --ion-color-secondary              : #72B5B7;
  --ion-color-secondary-rgb          : 114, 181, 183;
  --ion-color-secondary-contrast     : #000000;
  --ion-color-secondary-contrast-rgb : 0, 0, 0;
  --ion-color-secondary-shade        : #649FA1;
  --ion-color-secondary-tint         : #80BCBE;

  --ion-color-tertiary               : #F1FCFC;
  --ion-color-tertiary-rgb           : 241, 252, 252;
  --ion-color-tertiary-contrast      : #000000;
  --ion-color-tertiary-contrast-rgb  : 0, 0, 0;
  --ion-color-tertiary-shade         : #D4DEDE;
  --ion-color-tertiary-tint          : #F2FCFC;

  --ion-color-success                : #10DC60;
  --ion-color-success-rgb            : 16, 220, 96;
  --ion-color-success-contrast       : #FFFFFF;
  --ion-color-success-contrast-rgb   : 255, 255, 255;
  --ion-color-success-shade          : #0EC254;
  --ion-color-success-tint           : #28E070;

  --ion-color-warning                : #FFCE00;
  --ion-color-warning-rgb            : 255, 206, 0;
  --ion-color-warning-contrast       : #FFFFFF;
  --ion-color-warning-contrast-rgb   : 255, 255, 255;
  --ion-color-warning-shade          : #E0B500;
  --ion-color-warning-tint           : #FFD31A;

  --ion-color-danger                 : #F04141;
  --ion-color-danger-rgb             : 245, 61, 61;
  --ion-color-danger-contrast        : #FFFFFF;
  --ion-color-danger-contrast-rgb    : 255, 255, 255;
  --ion-color-danger-shade           : #D33939;
  --ion-color-danger-tint            : #F25454;

  --ion-color-dark                   : #222428;
  --ion-color-dark-rgb               : 34, 34, 34;
  --ion-color-dark-contrast          : #FFFFFF;
  --ion-color-dark-contrast-rgb      : 255, 255, 255;
  --ion-color-dark-shade             : #1E2023;
  --ion-color-dark-tint              : #383A3E;

  --ion-color-medium                 : #989AA2;
  --ion-color-medium-rgb             : 152, 154, 162;
  --ion-color-medium-contrast        : #FFFFFF;
  --ion-color-medium-contrast-rgb    : 255, 255, 255;
  --ion-color-medium-shade           : #86888F;
  --ion-color-medium-tint            : #A2A4AB;

  --ion-color-light                  : #F4F5F8;
  --ion-color-light-rgb              : 244, 244, 244;
  --ion-color-light-contrast         : #000000;
  --ion-color-light-contrast-rgb     : 0, 0, 0;
  --ion-color-light-shade            : #D7D8DA;
  --ion-color-light-tint             : #F5F6F9;
}

//@media (prefers-color-scheme: dark) {
//  /*
//   * Dark Colors
//   * -------------------------------------------
//   */
//
//  body {
//    --ion-color-primary: #428cff;
//    --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: #50c8ff;
//    --ion-color-secondary-rgb: 80,200,255;
//    --ion-color-secondary-contrast: #ffffff;
//    --ion-color-secondary-contrast-rgb: 255,255,255;
//    --ion-color-secondary-shade: #46b0e0;
//    --ion-color-secondary-tint: #62ceff;
//
//    --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: #2fdf75;
//    --ion-color-success-rgb: 47,223,117;
//    --ion-color-success-contrast: #000000;
//    --ion-color-success-contrast-rgb: 0,0,0;
//    --ion-color-success-shade: #29c467;
//    --ion-color-success-tint: #44e283;
//
//    --ion-color-warning: #ffd534;
//    --ion-color-warning-rgb: 255,213,52;
//    --ion-color-warning-contrast: #000000;
//    --ion-color-warning-contrast-rgb: 0,0,0;
//    --ion-color-warning-shade: #e0bb2e;
//    --ion-color-warning-tint: #ffd948;
//
//    --ion-color-danger: #ff4961;
//    --ion-color-danger-rgb: 255,73,97;
//    --ion-color-danger-contrast: #ffffff;
//    --ion-color-danger-contrast-rgb: 255,255,255;
//    --ion-color-danger-shade: #e04055;
//    --ion-color-danger-tint: #ff5b71;
//
//    --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;
//  }
//
//  /*
//   * 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;
//  }
//}

希望能对你有所帮助

赞(0）分享  回复(0）举报  2022-12-08
8xiog9wr

8xiog9wr6#

一种方法是通过使用媒体查询强制使用灯光样式。在喜欢灯光的设备上，您可以提供暗主题变量，但需要用灯光主题变量覆盖@media (prefers-color-scheme: dark)作用域。
实现这一点的一种方法是为您的主题使用一个mixin，并将其包含在:root作用域和@media (prefers-color-scheme: dark)中。
相反，如果你想强制使用暗主题，可以为你的主题使用一个mixin，并将其包含在:root作用域和@media (prefers-color-scheme: light)中。
注：离子（离子/cli@6.10.0）和SCSS

/**
* {@mixin} - Supplies dark theme variables to the included scope
*/
@mixin eternal-darkness() {
   // Dark theme variables...
}

:root {
   @include eternal-darkness;
}

@media (prefers-color-scheme: light) {
   @include eternal-darkness;
}
赞(0）分享  回复(0）举报  2022-12-08
4ktjp1zp

4ktjp1zp7#

在我的网页浏览器中，主题是轻。这是我想要的。
在ios模拟器中，它是黑暗的。为了使它变亮，我这样做了：

In variables.css

@media (prefers-color-scheme: lights) {
 ...
}
赞(0）分享  回复(0）举报  2022-12-08
2lpgd968

2lpgd9688#

Simply have this tag placed in index.html file
<meta name="color-scheme" content="light dark" />
It works for me! Thanks

赞(0）分享  回复(0）举报  2022-12-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com