react.dev icon indicating copy to clipboard operation
react.dev copied to clipboard

Adding `<meta name="theme-color" />` 🎨

Open sanjaiyan-dev opened this issue 3 years ago • 7 comments
trafficstars

Adding <meta name="theme-color" /> for the website. For more info https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

I choosed

  • light mode-: #F5F5F5
  • dark mode -: #23272F as a theme-colour hence it looks nice in light mode and dark mode, and that colour in presents in React js website too.

Sorry if I made any mistakes :(

sanjaiyan-dev avatar Sep 06 '22 15:09 sanjaiyan-dev

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

Three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load
/404 43.57 KB (🟡 +21 B) 127.89 KB
/500 43.55 KB (🟡 +21 B) 127.87 KB
/[[...markdownPath]] 43.64 KB (🟡 +21 B) 127.95 KB
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

github-actions[bot] avatar Sep 06 '22 15:09 github-actions[bot]

can you add some screenshots before/after pls?

gaearon avatar Sep 07 '22 22:09 gaearon

can you add some screenshots before/after pls?

Before -: Screenshot_2022-09-08-03-56-00-199_com android chrome

After -: Screenshot_2022-09-08-03-55-49-836_com android chrome

sanjaiyan-dev avatar Sep 07 '22 22:09 sanjaiyan-dev

can you add some screenshots before/after pls?

@gaearon Ok 🙌

sanjaiyan-dev avatar Sep 07 '22 22:09 sanjaiyan-dev

It's rather bright... @lebo thoughts on what color should be used?

gaearon avatar Sep 08 '22 11:09 gaearon

It's rather bright... @lebo thoughts on what color should be used?

I have currently made <meta name="theme-color" /> to change according to theme mode :)

sanjaiyan-dev avatar Sep 09 '22 13:09 sanjaiyan-dev

I think the theme color may look best if it matches the navigation bar color, that way it will seamlessly blend in. Does that work here?

lebo avatar Sep 09 '22 17:09 lebo