Skip to content

Adding meta theme-colour for nicer UI :) #4805

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.

Sign up for GitHub

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

Jump to bottom
Closed
wants to merge 3 commits into from
Closed

Adding meta theme-colour for nicer UI :) #4805

wants to merge 3 commits into from

Conversation

@sanjaiyan-dev
Copy link
Contributor

@sanjaiyan-dev sanjaiyan-dev commented Jul 8, 2022

Adding <meta name="theme-color" content="colour_according_theme" />

Extremely sorry if I made any mistakes :(

@github-actions github-actions bot added the beta label Jul 8, 2022
@github-actions
Copy link

github-actions bot commented Jul 8, 2022 •
edited
Loading

Size Changes

📦 Next.js Bundle Analysis

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

One Hundred Ninety Pages Changed Size

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

Page Size (compressed) First Load
/ 48.02 KB (🟡 +51 B) 132.68 KB
/404 47.12 KB (🟡 +51 B) 131.78 KB
/apis 47.9 KB (🟡 +51 B) 132.57 KB
/apis/createcontext 49.65 KB (🟡 +51 B) 134.32 KB
/apis/reactdom 47.84 KB (🟡 +51 B) 132.51 KB
/apis/render 49.88 KB (🟡 +51 B) 134.55 KB
/apis/usecontext 55.61 KB (🟡 +51 B) 140.27 KB
/apis/usereducer 55.24 KB (🟡 +51 B) 139.91 KB
/apis/useref 52.93 KB (🟡 +51 B) 137.6 KB
/apis/usestate 58.88 KB (🟡 +51 B) 143.54 KB
/blog 40.48 KB (🟡 +59 B) 125.15 KB
/blog/2013/06/02/jsfiddle-integration 57.93 KB (🟡 +51 B) 142.59 KB
/blog/2013/06/05/why-react 59.65 KB (🟡 +51 B) 144.32 KB
/blog/2013/06/12/community-roundup 59.36 KB (🟡 +51 B) 144.03 KB
/blog/2013/06/19/community-roundup-2 60.02 KB (🟡 +51 B) 144.69 KB
/blog/2013/06/21/react-v0-3-3 58.07 KB (🟡 +51 B) 142.74 KB
/blog/2013/06/27/community-roundup-3 60.39 KB (🟡 +51 B) 145.06 KB
/blog/2013/07/02/react-v0-4-autobind-by-default 58.69 KB (🟡 +51 B) 143.36 KB
/blog/2013/07/03/community-roundup-4 59.76 KB (🟡 +51 B) 144.43 KB
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values 58.56 KB (🟡 +51 B) 143.23 KB
/blog/2013/07/17/react-v0-4-0 59.27 KB (🟡 +51 B) 143.94 KB
/blog/2013/07/23/community-roundup-5 60.15 KB (🟡 +51 B) 144.82 KB
/blog/2013/07/26/react-v0-4-1 58.04 KB (🟡 +51 B) 142.71 KB
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails 58.64 KB (🟡 +51 B) 143.31 KB
/blog/2013/08/05/community-roundup-6 59.45 KB (🟡 +51 B) 144.12 KB
/blog/2013/08/19/use-react-and-jsx-in-python-applications 58.65 KB (🟡 +51 B) 143.32 KB
/blog/2013/08/26/community-roundup-7 59.62 KB (🟡 +51 B) 144.28 KB
/blog/2013/09/24/community-roundup-8 61.05 KB (🟡 +51 B) 145.72 KB
/blog/2013/10/03/community-roundup-9 59.98 KB (🟡 +51 B) 144.65 KB
/blog/2013/10/16/react-v0.5.0 59.67 KB (🟡 +51 B) 144.34 KB
/blog/2013/10/29/react-v0-5-1 58.03 KB (🟡 +51 B) 142.7 KB
/blog/2013/11/06/community-roundup-10 61.64 KB (🟡 +51 B) 146.31 KB
/blog/2013/11/18/community-roundup-11 60.73 KB (🟡 +51 B) 145.39 KB
/blog/2013/12/18/react-v0.5.2-v0.4.2 58.5 KB (🟡 +51 B) 143.17 KB
/blog/2013/12/19/react-v0.8.0 58.92 KB (🟡 +51 B) 143.59 KB
/blog/2013/12/23/community-roundup-12 60.38 KB (🟡 +51 B) 145.05 KB
/blog/2013/12/30/community-roundup-13 60.16 KB (🟡 +51 B) 144.83 KB
/blog/2014/01/02/react-chrome-developer-tools 58.42 KB (🟡 +51 B) 143.09 KB
/blog/2014/01/06/community-roundup-14 59.76 KB (🟡 +51 B) 144.42 KB
/blog/2014/02/05/community-roundup-15 60.97 KB (🟡 +51 B) 145.64 KB
/blog/2014/02/15/community-roundup-16 60.68 KB (🟡 +51 B) 145.35 KB
/blog/2014/02/16/react-v0.9-rc1 61.09 KB (🟡 +51 B) 145.76 KB
/blog/2014/02/20/react-v0.9 61.54 KB (🟡 +51 B) 146.2 KB
/blog/2014/02/24/community-roundup-17 60.4 KB (🟡 +51 B) 145.07 KB
/blog/2014/03/14/community-roundup-18 61.37 KB (🟡 +51 B) 146.03 KB
/blog/2014/03/19/react-v0.10-rc1 59.67 KB (🟡 +51 B) 144.34 KB
/blog/2014/03/21/react-v0.10 59.7 KB (🟡 +51 B) 144.37 KB
/blog/2014/03/28/the-road-to-1.0 59.81 KB (🟡 +51 B) 144.48 KB
/blog/2014/04/04/reactnet 58.45 KB (🟡 +51 B) 143.12 KB
/blog/2014/05/06/flux 58.58 KB (🟡 +51 B) 143.24 KB
/blog/2014/05/29/one-year-of-open-source-react 58.8 KB (🟡 +51 B) 143.47 KB
/blog/2014/06/27/community-roundup-19 60.34 KB (🟡 +51 B) 145.01 KB
/blog/2014/07/13/react-v0.11-rc1 60.73 KB (🟡 +51 B) 145.4 KB
/blog/2014/07/17/react-v0.11 61.98 KB (🟡 +51 B) 146.65 KB
/blog/2014/07/25/react-v0.11.1 58.93 KB (🟡 +51 B) 143.6 KB
/blog/2014/07/28/community-roundup-20 60.49 KB (🟡 +51 B) 145.15 KB
/blog/2014/07/30/flux-actions-and-the-dispatcher 60.12 KB (🟡 +51 B) 144.79 KB
/blog/2014/08/03/community-roundup-21 60.15 KB (🟡 +51 B) 144.82 KB
/blog/2014/09/03/introducing-the-jsx-specification 58.16 KB (🟡 +51 B) 142.83 KB
/blog/2014/09/12/community-round-up-22 60.63 KB (🟡 +51 B) 145.3 KB
/blog/2014/09/16/react-v0.11.2 58.93 KB (🟡 +51 B) 143.6 KB
/blog/2014/09/24/testing-flux-applications 62.11 KB (🟡 +51 B) 146.78 KB
/blog/2014/10/14/introducing-react-elements 61.06 KB (🟡 +51 B) 145.73 KB
/blog/2014/10/16/react-v0.12-rc1 61.03 KB (🟡 +51 B) 145.7 KB
/blog/2014/10/17/community-roundup-23 61.6 KB (🟡 +51 B) 146.27 KB
/blog/2014/10/27/react-js-conf 58.2 KB (🟡 +51 B) 142.87 KB
/blog/2014/10/28/react-v0.12 60.97 KB (🟡 +51 B) 145.64 KB
/blog/2014/11/24/react-js-conf-updates 58.59 KB (🟡 +51 B) 143.26 KB
/blog/2014/11/25/community-roundup-24 61.83 KB (🟡 +51 B) 146.5 KB
/blog/2014/12/18/react-v0.12.2 58.62 KB (🟡 +51 B) 143.29 KB
/blog/2014/12/19/react-js-conf-diversity-scholarship 59.01 KB (🟡 +51 B) 143.68 KB
/blog/2015/01/27/react-v0.13.0-beta-1 59.98 KB (🟡 +51 B) 144.65 KB
/blog/2015/02/18/react-conf-roundup-2015 61.96 KB (🟡 +51 B) 146.63 KB
/blog/2015/02/20/introducing-relay-and-graphql 61.12 KB (🟡 +51 B) 145.79 KB
/blog/2015/02/24/react-v0.13-rc1 60.02 KB (🟡 +51 B) 144.69 KB
/blog/2015/02/24/streamlining-react-elements 62.57 KB (🟡 +51 B) 147.24 KB
/blog/2015/03/03/react-v0.13-rc2 59.36 KB (🟡 +51 B) 144.02 KB
/blog/2015/03/04/community-roundup-25 60.31 KB (🟡 +51 B) 144.98 KB
/blog/2015/03/10/react-v0.13 60.63 KB (🟡 +51 B) 145.3 KB
/blog/2015/03/16/react-v0.13.1 58.45 KB (🟡 +51 B) 143.12 KB
/blog/2015/03/19/building-the-facebook-news-feed-with-relay 61.21 KB (🟡 +51 B) 145.88 KB
/blog/2015/03/26/introducing-react-native 58.35 KB (🟡 +51 B) 143.02 KB
/blog/2015/03/30/community-roundup-26 60.28 KB (🟡 +51 B) 144.95 KB
/blog/2015/04/17/react-native-v0.4 59.2 KB (🟡 +51 B) 143.86 KB
/blog/2015/04/18/react-v0.13.2 58.53 KB (🟡 +51 B) 143.2 KB
/blog/2015/05/01/graphql-introduction 63.02 KB (🟡 +51 B) 147.69 KB
/blog/2015/05/08/react-v0.13.3 58.42 KB (🟡 +51 B) 143.09 KB
/blog/2015/05/22/react-native-release-process 58.57 KB (🟡 +51 B) 143.24 KB
/blog/2015/06/12/deprecating-jstransform-and-react-tools 59.02 KB (🟡 +51 B) 143.69 KB
/blog/2015/07/03/react-v0.14-beta-1 60.53 KB (🟡 +51 B) 145.2 KB
/blog/2015/08/03/new-react-devtools-beta 59.13 KB (🟡 +51 B) 143.8 KB
/blog/2015/08/11/relay-technical-preview 59.2 KB (🟡 +51 B) 143.87 KB
/blog/2015/08/13/reacteurope-roundup 60.79 KB (🟡 +51 B) 145.46 KB
/blog/2015/09/02/new-react-developer-tools 58.55 KB (🟡 +51 B) 143.22 KB
/blog/2015/09/10/react-v0.14-rc1 64.24 KB (🟡 +51 B) 148.91 KB
/blog/2015/09/14/community-roundup-27 60.71 KB (🟡 +51 B) 145.38 KB
/blog/2015/10/01/react-render-and-top-level-api 59.68 KB (🟡 +51 B) 144.35 KB
/blog/2015/10/07/react-v0.14 64.72 KB (🟡 +51 B) 149.39 KB
/blog/2015/10/19/reactiflux-is-moving-to-discord 60.44 KB (🟡 +51 B) 145.1 KB
/blog/2015/10/28/react-v0.14.1 58.45 KB (🟡 +51 B) 143.11 KB
/blog/2015/11/02/react-v0.14.2 58.47 KB (🟡 +51 B) 143.14 KB
/blog/2015/11/18/react-v0.14.3 58.6 KB (🟡 +51 B) 143.26 KB
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship 59.47 KB (🟡 +51 B) 144.14 KB
/blog/2015/12/16/ismounted-antipattern 59.07 KB (🟡 +51 B) 143.74 KB
/blog/2015/12/18/react-components-elements-and-instances 62.99 KB (🟡 +51 B) 147.66 KB
/blog/2015/12/29/react-v0.14.4 58.27 KB (🟡 +51 B) 142.93 KB
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A 59.28 KB (🟡 +51 B) 143.95 KB
/blog/2016/01/12/discontinuing-ie8-support 58.09 KB (🟡 +51 B) 142.76 KB
/blog/2016/02/19/new-versioning-scheme 59.47 KB (🟡 +51 B) 144.14 KB
/blog/2016/03/07/react-v15-rc1 62.23 KB (🟡 +51 B) 146.89 KB
/blog/2016/03/16/react-v15-rc2 59.09 KB (🟡 +51 B) 143.76 KB
/blog/2016/03/29/react-v0.14.8 58.22 KB (🟡 +51 B) 142.89 KB
/blog/2016/04/07/react-v15 66.41 KB (🟡 +51 B) 151.08 KB
/blog/2016/04/08/react-v15.0.1 58.98 KB (🟡 +51 B) 143.65 KB
/blog/2016/07/11/introducing-reacts-error-code-system 58.69 KB (🟡 +51 B) 143.36 KB
/blog/2016/07/13/mixins-considered-harmful 66.84 KB (🟡 +51 B) 151.51 KB
/blog/2016/07/22/create-apps-with-no-configuration 62.17 KB (🟡 +51 B) 146.84 KB
/blog/2016/08/05/relay-state-of-the-state 62.21 KB (🟡 +51 B) 146.88 KB
/blog/2016/09/28/our-first-50000-stars 63.66 KB (🟡 +51 B) 148.33 KB
/blog/2016/11/16/react-v15.4.0 61.61 KB (🟡 +51 B) 146.28 KB
/blog/2017/04/07/react-v15.5.0 62.18 KB (🟡 +51 B) 146.84 KB
/blog/2017/05/18/whats-new-in-create-react-app 61.57 KB (🟡 +51 B) 146.24 KB
/blog/2017/06/13/react-v15.6.0 60.19 KB (🟡 +51 B) 144.86 KB
/blog/2017/07/26/error-handling-in-react-16 60.54 KB (🟡 +51 B) 145.21 KB
/blog/2017/09/08/dom-attributes-in-react-16 60.97 KB (🟡 +51 B) 145.64 KB
/blog/2017/09/25/react-v15.6.2 59.31 KB (🟡 +51 B) 143.97 KB
/blog/2017/09/26/react-v16.0 64.44 KB (🟡 +51 B) 149.11 KB
/blog/2017/11/28/react-v16.2.0-fragment-support 62.37 KB (🟡 +51 B) 147.04 KB
/blog/2017/12/07/introducing-the-react-rfc-process 58.89 KB (🟡 +51 B) 143.56 KB
/blog/2017/12/15/improving-the-repository-infrastructure 74.68 KB (🟡 +51 B) 159.35 KB
/blog/2018/03/01/sneak-peek-beyond-react-16 58.85 KB (🟡 +51 B) 143.52 KB
/blog/2018/03/27/update-on-async-rendering 64.09 KB (🟡 +51 B) 148.76 KB
/blog/2018/03/29/react-v-16-3 60.91 KB (🟡 +51 B) 145.58 KB
/blog/2018/05/23/react-v-16-4 61.05 KB (🟡 +51 B) 145.72 KB
/blog/2018/06/07/you-probably-dont-need-derived-state 64.71 KB (🟡 +51 B) 149.38 KB
/blog/2018/08/01/react-v-16-4-2 59.7 KB (🟡 +51 B) 144.37 KB
/blog/2018/09/10/introducing-the-react-profiler 61.31 KB (🟡 +51 B) 145.98 KB
/blog/2018/10/01/create-react-app-v2 61.79 KB (🟡 +51 B) 146.46 KB
/blog/2018/10/23/react-v-16-6 60.98 KB (🟡 +51 B) 145.65 KB
/blog/2018/11/13/react-conf-recap 58.7 KB (🟡 +51 B) 143.37 KB
/blog/2018/11/27/react-16-roadmap 64.89 KB (🟡 +51 B) 149.56 KB
/blog/2018/12/19/react-v-16-7 59.82 KB (🟡 +51 B) 144.49 KB
/blog/2019/02/06/react-v16.8.0 62.09 KB (🟡 +51 B) 146.76 KB
/blog/2019/02/23/is-react-translated-yet 61.65 KB (🟡 +51 B) 146.32 KB
/blog/2019/08/08/react-v16.9.0 64.58 KB (🟡 +51 B) 149.25 KB
/blog/2019/08/15/new-react-devtools 59.19 KB (🟡 +51 B) 143.86 KB
/blog/2019/10/22/react-release-channels 61.01 KB (🟡 +51 B) 145.68 KB
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense 65.71 KB (🟡 +51 B) 150.37 KB
/blog/2020/02/26/react-v16.13.0 61.93 KB (🟡 +51 B) 146.6 KB
/blog/2020/08/10/react-v17-rc 68.21 KB (🟡 +51 B) 152.88 KB
/community 47.71 KB (🟡 +51 B) 132.38 KB
/community/acknowledgements 48.9 KB (🟡 +51 B) 133.56 KB
/community/meet-the-team 49.59 KB (🟡 +51 B) 134.26 KB
/learn 52.67 KB (🟡 +51 B) 137.34 KB
/learn/add-react-to-a-website 52.78 KB (🟡 +51 B) 137.45 KB
/learn/adding-interactivity 54.35 KB (🟡 +51 B) 139.02 KB
/learn/choosing-the-state-structure 60.08 KB (🟡 +51 B) 144.74 KB
/learn/conditional-rendering 52.31 KB (🟡 +51 B) 136.97 KB
/learn/describing-the-ui 51.52 KB (🟡 +51 B) 136.19 KB
/learn/editor-setup 48.99 KB (🟡 +51 B) 133.66 KB
/learn/escape-hatches 47.04 KB (🟡 +51 B) 131.71 KB
/learn/extracting-state-logic-into-a-reducer 57.71 KB (🟡 +51 B) 142.38 KB
/learn/importing-and-exporting-components 50.7 KB (🟡 +51 B) 135.37 KB
/learn/installation 48.31 KB (🟡 +51 B) 132.98 KB
/learn/javascript-in-jsx-with-curly-braces 50.78 KB (🟡 +51 B) 135.45 KB
/learn/keeping-components-pure 54.91 KB (🟡 +51 B) 139.58 KB
/learn/managing-state 53.63 KB (🟡 +51 B) 138.3 KB
/learn/manipulating-the-dom-with-refs 55.88 KB (🟡 +51 B) 140.55 KB
/learn/passing-data-deeply-with-context 55.43 KB (🟡 +51 B) 140.09 KB
/learn/passing-props-to-a-component 54.48 KB (🟡 +51 B) 139.15 KB
/learn/preserving-and-resetting-state 58.45 KB (🟡 +51 B) 143.12 KB
/learn/queueing-a-series-of-state-updates 52.28 KB (🟡 +51 B) 136.94 KB
/learn/react-developer-tools 48.27 KB (🟡 +51 B) 132.94 KB
/learn/reacting-to-input-with-state 56.89 KB (🟡 +51 B) 141.56 KB
/learn/referencing-values-with-refs 53.8 KB (🟡 +51 B) 138.46 KB
/learn/render-and-commit 50.78 KB (🟡 +51 B) 135.44 KB
/learn/rendering-lists 54.87 KB (🟡 +51 B) 139.53 KB
/learn/responding-to-events 53.8 KB (🟡 +51 B) 138.47 KB
/learn/scaling-up-with-reducer-and-context 51.84 KB (🟡 +51 B) 136.51 KB
/learn/sharing-state-between-components 52.93 KB (🟡 +51 B) 137.59 KB
/learn/start-a-new-react-project 49.34 KB (🟡 +51 B) 134.01 KB
/learn/state-a-components-memory 58 KB (🟡 +51 B) 142.67 KB
/learn/state-as-a-snapshot 51.58 KB (🟡 +51 B) 136.25 KB
/learn/synchronizing-with-effects 64.65 KB (🟡 +51 B) 149.32 KB
/learn/thinking-in-react 53.64 KB (🟡 +51 B) 138.31 KB
/learn/updating-arrays-in-state 55.88 KB (🟡 +51 B) 140.54 KB
/learn/updating-objects-in-state 55.61 KB (🟡 +51 B) 140.28 KB
/learn/writing-markup-with-jsx 51.02 KB (🟡 +51 B) 135.69 KB
/learn/you-might-not-need-an-effect 62.97 KB (🟡 +51 B) 147.63 KB
/learn/your-first-component 51.61 KB (🟡 +51 B) 136.28 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.

@sanjaiyan-dev
Copy link
Contributor Author

sanjaiyan-dev commented Jul 8, 2022

(typeof window !== "undefined") ? window?.__theme === "dark" ? '#23272F' : '#F6F7F9' : "#23272F"

According to above line of code, on initial mount meta theme colour will be #23272F (darker one looks nice 😃)
Then we are checking if it is in client or ssr if client we are getting __theme value from window and checking the colour mode and applying theme colour according to it 🖌🎨🖌

@harish-sethuraman
Copy link
Collaborator

harish-sethuraman commented Jul 8, 2022

Can you run lint:fix and then commit?

@sanjaiyan-dev
Copy link
Contributor Author

sanjaiyan-dev commented Jul 8, 2022 •
edited
Loading

@harish-sethuraman ok, actually I used browser based editor (github.dev) :(

@harish-sethuraman
Copy link
Collaborator

harish-sethuraman commented Jul 14, 2022

We'd recommend you make a setup locally and lint the files and then submit them or find someway to fix the lint errors in github.dev so that it is easy for us to see the preview build.

@sanjaiyan-dev
Copy link
Contributor Author

sanjaiyan-dev commented Jul 14, 2022

We'd recommend you make a setup locally and lint the files and then submit them or find someway to fix the lint errors in github.dev so that it is easy for us to see the preview build.

Ok , sure :)

@sanjaiyan-dev
Copy link
Contributor Author

sanjaiyan-dev commented Jul 14, 2022

We'd recommend you make a setup locally and lint the files and then submit them or find someway to fix the lint errors in github.dev so that it is easy for us to see the preview build.

We'd recommend you make a setup locally and lint the files and then submit them or find someway to fix the lint errors in github.dev so that it is easy for us to see the preview build.

Sir, I think I have ran lint:fix successfully (not sure if it is correct :( )

@sanjaiyan-dev sanjaiyan-dev mentioned this pull request Jul 14, 2022
Closed
@harish-sethuraman
Copy link
Collaborator

harish-sethuraman commented Jul 15, 2022

Hey nope seems like lint:fix wasn't run

@sanjaiyan-dev
Copy link
Contributor Author

sanjaiyan-dev commented Jul 15, 2022

Hey nope seems like lint:fix wasn't run

Sir, Please check #4821

@sanjaiyan-dev
Copy link
Contributor Author

sanjaiyan-dev commented Jul 29, 2022

#4821

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

Reviewers

No reviews

Assignees

No one assigned

Labels

beta CLA Signed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@sanjaiyan-dev @harish-sethuraman @facebook-github-bot