Skip to content

[css-images] image-set() syntax for color scheme specifc images #9470

Open
@nt1m

Description

@nt1m

This bit of code from @emilio in https://phabricator.services.mozilla.com/D190919 :

    &[progress] {
      list-style-image: image-set(
        url("chrome://browser/skin/tabbrowser/tab-loading.png"),
        url("chrome://browser/skin/tabbrowser/[email protected]") 2x
      );

      /* FIXME: This should probably also apply in regular dark mode? */
      :root[lwt-popup="dark"] &[progress]:not([selected]) {
        list-style-image: image-set(
          url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png"),
          url("chrome://browser/skin/tabbrowser/[email protected]") 2x
        );
      }

inspired me to suggest this. It would be nice if image-set() could also select based on color-scheme.

Syntax to be bikeshed, but it would be nice if you could write this:

      list-style-image: image-set(
        url("chrome://browser/skin/tabbrowser/tab-loading.png") light,
        url("chrome://browser/skin/tabbrowser/[email protected]") light 2x,
        url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png") dark,
        url("chrome://browser/skin/tabbrowser/[email protected]") dark 2x
      );

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions