Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark/Light mode icon in Features not wrapped #2923

Closed
4 tasks done
Soitora opened this issue Sep 8, 2023 · 2 comments
Closed
4 tasks done

Dark/Light mode icon in Features not wrapped #2923

Soitora opened this issue Sep 8, 2023 · 2 comments
Labels
has-workaround Has workaround, low priority theme Related to the theme

Comments

@Soitora
Copy link

Soitora commented Sep 8, 2023

Describe the bug

When using a custom Dark/Light icon for Homepage Features, the icon is not in a wrapper.

image

Reproduction

  - title: Extensions
    details: Online and offline reading from over a thousand sources, including MangaDex.
    icon: {
      light: https://styles.redditmedia.com/t5_fljgj/styles/communityIcon_dodprbccfsy71.png?width=256&s=629bb77b210a1c8cf92337032d0540bbfdb19c40,
      dark: https://styles.redditmedia.com/t5_fljgj/styles/communityIcon_dodprbccfsy71.png?width=256&s=629bb77b210a1c8cf92337032d0540bbfdb19c40,
      alt: MangaDex Logo,
      height: 32,
      width: 32,
    }
    link: /extensions/

Expected behavior

The icon should match the other icons

System Info

❯ npx envinfo --system --npmPackages vitepress --binaries --browsers

  System:
    OS: Windows 10 10.0.23536
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 16.03 GB / 31.73 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.7.0 - C:\Program Files\WinGet\Links\pnpm.EXE
  Browsers:
    Edge: Spartan (44.23536.1000.0), Chromium (117.0.2045.21)
    Internet Explorer: 11.0.23536.1000

Additional context

No response

Validations

@Soitora Soitora added the bug: pending triage Maybe a bug, waiting for confirmation label Sep 8, 2023
@brc-dd brc-dd added theme Related to the theme and removed bug: pending triage Maybe a bug, waiting for confirmation labels Sep 10, 2023
@brc-dd
Copy link
Member

brc-dd commented Sep 10, 2023

Your dark/light image appears to be same, so you can do this instead:

  - icon: <img src="https://styles.redditmedia.com/t5_fljgj/styles/communityIcon_dodprbccfsy71.png?width=256&s=629bb77b210a1c8cf92337032d0540bbfdb19c40" alt="MangaDex Logo" height="32" width="32">

@brc-dd brc-dd added the has-workaround Has workaround, low priority label Sep 10, 2023
@Soitora
Copy link
Author

Soitora commented Sep 10, 2023

Your dark/light image appears to be same, so you can do this instead:

They aren't supposed to be the same, they just were in my example. So the workaround is not applicable

Either you can use a single icon or you can use a broken one

2 out of 3 icons I want to use in Features has extremely bad Light contrast, and the best solution would be the appropriate variant of the icon used depending on theme.

@brc-dd brc-dd closed this as completed in 47fd9e4 Sep 10, 2023
brc-dd added a commit that referenced this issue Sep 10, 2023
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 18, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has-workaround Has workaround, low priority theme Related to the theme
Projects
None yet
Development

No branches or pull requests

2 participants