Skip to content

Add favicon theme listener#45864

Merged
avatus merged 1 commit intomasterfrom
avatus/favicon
Aug 27, 2024
Merged

Add favicon theme listener#45864
avatus merged 1 commit intomasterfrom
avatus/favicon

Conversation

@avatus
Copy link
Copy Markdown
Contributor

@avatus avatus commented Aug 26, 2024

This PR changes the way we update our favicon based on system theme preference. Currently, we rely on the media attr in the link tag to obey the system preference, but some browsers don't seem to support that very well. Instead, we will now add a listener when Teleport loads to the theme and set the favicon dynamically.

Note: this means the favicon will match the theme of the system/browser and NOT the theme of the page (which can be different, depending on user). The goal of the favicon theme switch is to make the favicon visible based on the browser's theme, rather than necessarily matching the page theme.

This can eventually be expanded upon to be included in a theme switch when we have a user settings page that allows "system" as a theme choice.

example below (ignore safari, they are trying their best)

062f8096203003011f14590f6b60fd82.mp4

Closes #45258

This PR changes the way we update our favicon based on system theme
preference. Currently, we rely on the media attr in the link tag to obey
the system preference, but some browsers don't seem to support that very
well. Instead, we will now add a listener when Teleport loads to the
theme and set the favicon dynamically.

Note: this means the favicon will match the theme of the system/browser
and NOT the theme of the page (which can be different, depending on
user). The goal of the favicon theme switch is to make the favicon
visible based on the browser's theme, rather than necessarily matching
the page theme.

This can eventually be expanded upon to be included in a theme switch
when we have a user settings page that allows "system" as a theme choice
@avatus avatus added backport-required no-changelog Indicates that a PR does not require a changelog entry backport/branch/v16 labels Aug 26, 2024
@github-actions github-actions Bot requested review from ravicious and rudream August 26, 2024 20:02
@avatus avatus requested review from kiosion and ryanclark and removed request for ravicious August 26, 2024 20:02
Copy link
Copy Markdown
Contributor

@kiosion kiosion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

@public-teleport-github-review-bot public-teleport-github-review-bot Bot removed the request for review from rudream August 27, 2024 15:44
@avatus avatus added this pull request to the merge queue Aug 27, 2024
github-merge-queue Bot pushed a commit that referenced this pull request Aug 27, 2024
This PR changes the way we update our favicon based on system theme
preference. Currently, we rely on the media attr in the link tag to obey
the system preference, but some browsers don't seem to support that very
well. Instead, we will now add a listener when Teleport loads to the
theme and set the favicon dynamically.

Note: this means the favicon will match the theme of the system/browser
and NOT the theme of the page (which can be different, depending on
user). The goal of the favicon theme switch is to make the favicon
visible based on the browser's theme, rather than necessarily matching
the page theme.

This can eventually be expanded upon to be included in a theme switch
when we have a user settings page that allows "system" as a theme choice
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Aug 27, 2024
@avatus avatus added this pull request to the merge queue Aug 27, 2024
Merged via the queue into master with commit 984e2ec Aug 27, 2024
@avatus avatus deleted the avatus/favicon branch August 27, 2024 18:35
@public-teleport-github-review-bot
Copy link
Copy Markdown

@avatus See the table below for backport results.

Branch Result
branch/v16 Create PR

avatus added a commit that referenced this pull request Oct 7, 2024
This PR changes the way we update our favicon based on system theme
preference. Currently, we rely on the media attr in the link tag to obey
the system preference, but some browsers don't seem to support that very
well. Instead, we will now add a listener when Teleport loads to the
theme and set the favicon dynamically.

Note: this means the favicon will match the theme of the system/browser
and NOT the theme of the page (which can be different, depending on
user). The goal of the favicon theme switch is to make the favicon
visible based on the browser's theme, rather than necessarily matching
the page theme.

This can eventually be expanded upon to be included in a theme switch
when we have a user settings page that allows "system" as a theme choice
@avatus avatus mentioned this pull request Oct 7, 2024
avatus added a commit that referenced this pull request Oct 8, 2024
This PR changes the way we update our favicon based on system theme
preference. Currently, we rely on the media attr in the link tag to obey
the system preference, but some browsers don't seem to support that very
well. Instead, we will now add a listener when Teleport loads to the
theme and set the favicon dynamically.

Note: this means the favicon will match the theme of the system/browser
and NOT the theme of the page (which can be different, depending on
user). The goal of the favicon theme switch is to make the favicon
visible based on the browser's theme, rather than necessarily matching
the page theme.

This can eventually be expanded upon to be included in a theme switch
when we have a user settings page that allows "system" as a theme choice
github-merge-queue Bot pushed a commit that referenced this pull request Oct 8, 2024
* [v15] Fix theme picker text when unspecified theme

* Add favicon theme listener (#45864)

This PR changes the way we update our favicon based on system theme
preference. Currently, we rely on the media attr in the link tag to obey
the system preference, but some browsers don't seem to support that very
well. Instead, we will now add a listener when Teleport loads to the
theme and set the favicon dynamically.

Note: this means the favicon will match the theme of the system/browser
and NOT the theme of the page (which can be different, depending on
user). The goal of the favicon theme switch is to make the favicon
visible based on the browser's theme, rather than necessarily matching
the page theme.

This can eventually be expanded upon to be included in a theme switch
when we have a user settings page that allows "system" as a theme choice

* Use dynamic base path for favicon images (#46719)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport-required no-changelog Indicates that a PR does not require a changelog entry size/sm ui

Projects

None yet

Development

Successfully merging this pull request may close these issues.

More contrast favicon

3 participants