[UI]Dark Theme

[Harshit-Dandriyal]

Signed-off-by: Harshit Dandriyal 56961488+Harshit-Dandriyal@users.noreply.github.com

Description Dark Theme initialization

This PR fixes #

Notes for Reviewers

Signed commits

• [x] Yes, I signed my commits.

[Harshit-Dandriyal]

This PR is not completed yet, This PR is made only to show the approach by which I am enabling a dark Theme and color palette of a dark theme, Many Pages still need to be changed in the dark theme. :smile:

[l5io]

🚀 Preview for commit 183aae21f0dcc7fea20676804fafaa8d9718e955 at: https://62a662fd6ba27a37d837f1d2--layer5.netlify.app

[Nikhil-Ladha]

The approach is nice but would require updates in color in some places. Though I think we can avoid the use of cookies just to set the theme state, it seems like unnecessary overhead. Secondly, a lot of time people disable cookies in their browser, and in that case, the feature might not work as expected.

[Harshit-Dandriyal]

The approach is nice but would require updates in color in some places. Though I think we can avoid the use of cookies just to set the theme state, it seems like unnecessary overhead. Secondly, a lot of time people disable cookies in their browser, and in that case, the feature might not work as expected.

I actually preferred cookies because I saw in many websites which have dark themes always have used cookies to enable it, but Yes, if the browser disables cookies, Our Website will always start with the light theme as default without remembering its previous theme.

[Harshit-Dandriyal]

@Nikhil-Ladha should I use local storage?

[Nikhil-Ladha]

@Nikhil-Ladha should I use local storage?

Let's have it discussed on the websites call today

[l5io]

🚀 Preview for commit 9f04556e399a4d9fea1bb87b87ab266e4786b5cc at: https://62a79f2076326529d1d81377--layer5.netlify.app

[l5io]

🚀 Preview for commit b03a032a01382a69b2744d9d2186b680a9777801 at: https://62a8f8885618541b092e2036--layer5.netlify.app

[l5io]

🚀 Preview for commit 950cb20c722d91070681aa50b18a17f52ab518e9 at: https://62aa1f40b6554d62a77c0147--layer5.netlify.app

[l5io]

🚀 Preview for commit 0a46bca4f46c47eea76c3b3265c54702f6f2e572 at: https://62ac6d7fe121274c8d424c33--layer5.netlify.app

[subhradwip01]

Some of the issues I found across different pages till now: 1)

https://62ac6d7fe121274c8d424c33--layer5.netlify.app/learn/service-mesh-labs

Text is not visible properly and hover effect on the card is not working properly(text visibility issue)

You can see the difference b/w light mode and dark mode

2)

https://62ac6d7fe121274c8d424c33--layer5.netlify.app/projects/service-mesh-interface-conformance texts are not visible in that page eg-

3)

https://62ac6d7fe121274c8d424c33--layer5.netlify.app/blog 1) You can use #00d3a9(check in the https://layer5.io/company/brand) color for the view options it may look good 2)Text(see more -> is not visible)

4)

https://62ac6d7fe121274c8d424c33--layer5.netlify.app/service-mesh-landscape Text is not visible in the Service mesh comparison matrix table

Also hovering over a particular row hover color is not good to see the text

check the Service Mesh Interface Compliance table on that page same issue with the heading of the table—text is not visible

5) text in the feature section of the dropdown menu in the navbar is not visible properly may be white color or #00d3a9 can be used

6) You can use white color for that subscribe text for better visibility (my suggestion)

Also, I saw that for some pages dark theme is not working I guess you are still on that like: -- https://62ac6d7fe121274c8d424c33--layer5.netlify.app/learn/learning-paths/mastering-service-meshes-for-developers -- Pages under the community section -- Particular blog page -- Resource page and particular resource page etc.

[Harshit-Dandriyal]

Thanks @subhradwip01

[Harshit-Dandriyal]

Recent Changes

[Harshit-Dandriyal]

[l5io]

🚀 Preview for commit d14a61087379a7f3ff1399ff59b74fc416596e89 at: https://62bcb5ad6f1e77082f99c35d--layer5.netlify.app

[l5io]

🚀 Preview for commit b6e8bb843c61fde042b486041ab4c16743863204 at: https://62bcbb628f38000056be287c--layer5.netlify.app

[l5io]

🚀 Preview for commit 0fe45902c5cafebea4eb58e4aca00df1f7672037 at: https://62bcc0d1f5865400b430ec37--layer5.netlify.app

[leecalcote]

Faithfully, chipping away here. Excellent to see, @Harshit-Dandriyal, @subhradwip01

[leecalcote]

There is a small item to attend to in the Blockquotes component.

[Harshit-Dandriyal]

There is a small item to attend to in the Blockquotes component.

fixed :+1:

[l5io]

🚀 Preview for commit dc258bfd8778d96432e65d97f99ae670a241fb46 at: https://62bd4200179b1147544f56b5--layer5.netlify.app

[subhradwip01]

Really Nice work @Harshit-Dandriyal ... we will go through the whole website again before merging 😃

[l5io]

🚀 Preview for commit 8ec85a5f72d1477944ccf0d35a3d5e8fe5109062 at: https://62bd5002f3c94a4dc8228cb1--layer5.netlify.app

[l5io]

🚀 Preview for commit 8b7e81603998f041fa8e1436e9326328560a886c at: https://62bdf7b24a30ae05794ea82c--layer5.netlify.app

[l5io]

🚀 Preview for commit 6ba21b9874e676802fb2f31fd92acaac441725e3 at: https://62be242fd543cb2abb901ad9--layer5.netlify.app

[l5io]

🚀 Preview for commit 07b004086a9ea9540a96d011493c64ea2702b29d at: https://62beb31ccf75f8340aa71f5c--layer5.netlify.app

[l5io]

🚀 Preview for commit ade6dd2269b94f1f53273e90a8a2d930f1bc92cd at: https://62beea573c9a895c9ae041cc--layer5.netlify.app

[subhradwip01]

Some color combination issue in blogs https://62beea573c9a895c9ae041cc--layer5.netlify.app/blog/envoy/debug-envoy-proxy When we are visiting a special blog category links are not highlighted while in main site it is highlighted Try to chsnge the RSS feed color to white

[Harshit-Dandriyal]

Thanks, @subhradwip01, Please find more :smile:

[Harshit-Dandriyal]

Some color combination issue in blogs https://62beea573c9a895c9ae041cc--layer5.netlify.app/blog/envoy/debug-envoy-proxy When we are visiting a special blog category links are not highlighted while in main site it is highlighted Try to chsnge the RSS feed color to white

Fixing them all :+1:

[Harshit-Dandriyal]

@subhradwip01 I am not getting that second issue in which you mentioned the special blog category link is not being highlighted, can you explain a bit?

[l5io]

🚀 Preview for commit 8c2e9c9d2fdac0c611c756330e8d6aa06d765c78 at: https://62bf0479f91f0a751bef9cbe--layer5.netlify.app

[l5io]

🚀 Preview for commit d33ded56181622aab5f9b529ac9214a8bc3d9cd8 at: https://62bf0b16f7a48c7ee274e4b8--layer5.netlify.app

[l5io]

🚀 Preview for commit e2788b7052ad14f4c36adcb7c9e8a632ddc163d1 at: https://62bf63edbafb1735c4fa2e7c--layer5.netlify.app

[l5io]

🚀 Preview for commit a74c345fb6d193ba84cc56794918eabb8046313b at: https://62c0a07b31de8d7dd853bcef--layer5.netlify.app

[Harshit-Dandriyal]

The buttons aren't working the way they should here.

Screen.Recording.2022-07-03.at.4.35.50.AM.mov

It is not happening in my browser, can you reload the website, is it happening again?

[Harshit-Dandriyal]

Thanks @debo19 , working on this :+1:

[l5io]

🚀 Preview for commit 353bc3533fa64934942e456fba4799eef52359a2 at: https://62c186058f3591058cb9b4ea--layer5.netlify.app

[l5io]

🚀 Preview for commit 5d844d59737fdfcd29949fdb6bf9c3535cf501c8 at: https://62c1974930935f0bd74ab6e4--layer5.netlify.app

[l5io]

🚀 Preview for commit 85a456b24cedce883772556c1219d2eb7a0aae4b at: https://62c27e5191bd052729572e50--layer5.netlify.app

[Santosh1176]

@Harshit-Dandriyal Hi, Could you also look at this styling issue? The cards are overflowing the viewport. This behavior is also visible on the current light theme as well, so not sure whether it's intentional or a bug.

[Nikhil-Ladha]

@Harshit-Dandriyal Hi, Could you also look at this styling issue? The cards are overflowing the viewport. This behavior is also visible on the current light theme as well, so not sure whether it's intentional or a bug.

It is intentional. Not a bug. Just like the one above, in partners section.

[Nikhil-Ladha]

That involved going through all the pages, and I think once the above issues are addressed we should be good.

P.S: My best-looking page is Meshery! Looks like the design was made keeping dark-them in mind, and Harshit you have ironed it just perfectly!

[Harshit-Dandriyal]

A couple of issues (in dark theme):

• In this page, under the distributed performance management section the box-shadow of the columns are overlapping with the cards. That needs to be fixed.
• Some CSS spacing issue in the Choose your power-up's section in this page.
• The istio image in this page needs to be replaced with an SVG. Scroll to the end of the How Meshery Manages Meshes section to notice that.
• The color of the arrow icons (make the arrows dark) and Today (keep it the same as light theme).
• Color issues all across the careers page. Headings should have white color.
• Single job/internship page also needs to have the colors fixed, example
• Preferably, have a similar dark card color for Contacts page. And, fix the text color.
• Background color needs to be fixed in multiple places across the brand page.
• Text color issues across the pricing page.

Issues in light theme:

• The card background color is gone for the members page. Same applies for MeshMates page.
• The name and social media logo's should be of white color for individual member pages. Example.

1. In the currently hosted layer 5 websites, columns are also overlapping, I thought it was part of the design, Should I change for both themes?
2. Issue Resolved.
3. Issue Resolved.
4. Issue Resolved.
5. Issue Resolved.
6. Issue Resolved.
7. Issue Resolved.
8. Issue Resolved.
9. Issue Resolved. White Theme Issue
10. Issue Resolved.
11. Issue Resolved.

[l5io]

🚀 Preview for commit 2d5649d7b3b44481b54e2b2bc352bca179af63e4 at: https://62c339c540024926ebc890aa--layer5.netlify.app

[l5io]

🚀 Preview for commit eefc478806a16b2c2200aa8e7021f614bb9d5c33 at: https://62c3be6d2f4236062634e8ca--layer5.netlify.app

[Harshit-Dandriyal]

@Nikhil-Ladha Let's do this. 😁

[Nikhil-Ladha]

1. In the currently hosted layer 5 websites, columns are also overlapping, I thought it was part of the design, Should I change for both themes?

Yeah, change for both themes.

[l5io]

🚀 Preview for commit 0b8685876f234567fb777ed6239e852ec7a49b18 at: https://62c4482257cf60156ed81ea3--layer5.netlify.app

[Santosh1176]

@Harshit-Dandriyal The text color in the buttons in Cloud native Leaders section and a few below are White. Can the text colors be changed to Black or darker color? please pass this, if that issue is already discussed.