Skip to content

Wrong Dialog colors on android in dark mode and no way to handle dark/light mode #9462

Closed

Description

@wendt88

Environment

  • nativescript: 8.0.2
  • @nativescript/core: 8.0.8
  • @nativescript/android: 8.0.0
  • @nativescript/ios: 8.0.0

Describe the bug
Could not set label and button colors for Dialogs via css (to handle dark mode colors)

To Reproduce

  • run: ns create ...
  • add somewhere a Dialog.alert('Hi')
  • replace the scss as followed:
Page {
  Label,
  Button {
    color: gray;
  }

  &.ns-dark {
    Label,
    Button {
      color: white;
    }
  }
  &.ns-light {
    Label,
    Button {
      color: black;
    }
  }
}

Label,
Button {
  color: blue;

  &.ns-dark {
    color: yellow;
  }
  &.ns-light {
    color: green;
  }
}

Result on Android
android

Result on iOS
ios

Expected behavior

  • in light mode, the Dialogs text and button colors should be black or green in light mode and white or yellow in dark mode
  • without dark/light mode support they shloud be gray or blue;

Sample project
Playground is useless, because it it's last version runs on NS 6.5 (released a year ago).

Additional context

color: {
  _argb: 4278190335
  _name: "blue"
  a: 255
  android: -16776961
  argb: 4278190335
  b: 255
  g: 0
  hex: "#0000FF"
  ios: undefined
  name: "blue"
  r: 0
}

there are a some existing issues about this problem, wich are opend over moths, like:
#8484
NativeScript/theme#184

Summarized:

  • no chance to apply custom colors for dark mode on both platforms (this is realy bad -> dialogs are not usable in dark mode)
  • on android in dark mode gets generated "magically" a custom color (but at least is a bit lighter and could be used in dark mode)
  • If I'm not wrong, this issue could not be solved, by css (and @nativescript/theme)

Activity

  1. michael-dots commented on Jul 9, 2021

    @michael-dots

    Having the same problem with action type dialog with options. Also can't find any way to solve by css, even using .ns-dark styles . Not even sure the options in action mode are buttons, or how to style them?

  2. micahlt commented on Jul 2, 2022

    @micahlt

    Same issue here!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions