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

feat: add system theme option #586

Open

akulsr0 wants to merge 9 commits into eslint:main from akulsr0:akul/add-system-theme-option

akulsr0 commented Jun 18, 2024 •

edited

Loading

Prerequisites checklist

I have read the contributing guidelines.

What is the purpose of this pull request?

Closes eslint/eslint#18190

What changes did you make? (Give an overview)

Add System button for theme switcher

Related Issues

Is there anything you'd like reviewers to focus on?

Translations, I've added by searching on google translate, can be double checked by reviewers.


          feat: add system theme option

eslint-github-bot bot added the feature label

github-actions bot added the translation label

netlify bot commented Jun 18, 2024 •

edited

Loading

✅ Deploy Preview for hi-eslint ready!

Name	Link
🔨 Latest commit	`cc86347`
🔍 Latest deploy log	https://app.netlify.com/sites/hi-eslint/deploys/667d088f5ef83c0008b9d547
😎 Deploy Preview	https://deploy-preview-586--hi-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Jun 18, 2024 •

edited

Loading

✅ Deploy Preview for es-eslint ready!

Name	Link
🔨 Latest commit	`cc86347`
🔍 Latest deploy log	https://app.netlify.com/sites/es-eslint/deploys/667d088f84ea9b00086d22ff
😎 Deploy Preview	https://deploy-preview-586--es-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Jun 18, 2024 •

edited

Loading

✅ Deploy Preview for new-eslint ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`cc86347`
🔍 Latest deploy log	https://app.netlify.com/sites/new-eslint/deploys/667d088f6dcd210008062897
😎 Deploy Preview	https://deploy-preview-586--new-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Jun 18, 2024 •

edited

Loading

✅ Deploy Preview for zh-hans-eslint ready!

Name	Link
🔨 Latest commit	`cc86347`
🔍 Latest deploy log	https://app.netlify.com/sites/zh-hans-eslint/deploys/667d088f908d450008982619
😎 Deploy Preview	https://deploy-preview-586--zh-hans-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Jun 18, 2024 •

edited

Loading

✅ Deploy Preview for pt-br-eslint ready!

Name	Link
🔨 Latest commit	`cc86347`
🔍 Latest deploy log	https://app.netlify.com/sites/pt-br-eslint/deploys/667d088f87d7180008c24f5c
😎 Deploy Preview	https://deploy-preview-586--pt-br-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Jun 18, 2024 •

edited

Loading

✅ Deploy Preview for fr-eslint ready!

Name	Link
🔨 Latest commit	`cc86347`
🔍 Latest deploy log	https://app.netlify.com/sites/fr-eslint/deploys/667d088fbec2a700081b447e
😎 Deploy Preview	https://deploy-preview-586--fr-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Jun 18, 2024 •

edited

Loading

✅ Deploy Preview for ja-eslint ready!

Name	Link
🔨 Latest commit	`cc86347`
🔍 Latest deploy log	https://app.netlify.com/sites/ja-eslint/deploys/667d088f47aac300084435fd
😎 Deploy Preview	https://deploy-preview-586--ja-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify bot commented Jun 18, 2024 •

edited

Loading

✅ Deploy Preview for de-eslint ready!

Name	Link
🔨 Latest commit	`cc86347`
🔍 Latest deploy log	https://app.netlify.com/sites/de-eslint/deploys/667d088f3c5be200075c1344
😎 Deploy Preview	https://deploy-preview-586--de-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Contributor

snitin315 commented Jun 18, 2024

@akulsr0 The npm run build script is failing, can you fix it?

akulsr0 added 2 commits

June 18, 2024 16:20


          chore: add translations for system word

ea91f79


          chore: handle playground theming

8eb2365

Author

akulsr0 commented Jun 20, 2024

@snitin315 This is fixed, translation was missing for other languages, added it.

amareshsm added the accepted label

amareshsm reviewed

View reviewed changes

src/_includes/layouts/base.html Outdated

@@ @@ -77,6 +77,8 @@ @@
                   <script>
                           (function () {
                               var theme = window.localStorage.getItem("theme");
+                              var isSystemTheme = window.localStorage.getItem("system-theme") === "true";

Member

amareshsm Jun 20, 2024

Suggested change

      
                            var isSystemTheme = window.localStorage.getItem("system-theme") === "true";
          
                            var isSystemTheme = window.localStorage.getItem("system-theme") === "true";

We don't need another key system-theme instead we can use the existing theme key and set the value as "system"

amareshsm reviewed

View reviewed changes

src/assets/js/themes.js Outdated

-                          dark_theme_toggle = document.getElementById('dark-theme-toggle');
+                          dark_theme_toggle = document.getElementById('dark-theme-toggle'),
+                          system_theme_toggle = document.getElementById('system-theme-toggle');
+                      var isSystemTheme = document.documentElement.getAttribute("data-system-theme") === "true";

Member

amareshsm Jun 20, 2024

Suggested change

      
                    var isSystemTheme = document.documentElement.getAttribute("data-system-theme") === "true";
          
                    var isSystemTheme = document.documentElement.getAttribute("data-system-theme") === "true";

We don't need "data-system-theme" attribute as well.

Member

amareshsm commented Jun 20, 2024 •

edited

Loading

Thank you for the PR.

Here are a few suggestions:

Instead of adding a new key system-theme, use the existing theme key and set its value to "system" when the user selects the system theme.
The data-system-theme attribute is unnecessary.
In tablet view, the new system button causes the language selection option to be cropped in the UI.

Pls refer to this PR eslint/eslint#18617 I have made the changes for https://eslint.org/docs/

akulsr0 added 2 commits

June 21, 2024 07:56


          refactor: remove seperate key for system theme

fe4771c


          refactor: remove unintended semicolon

8a3892a

harish-sethuraman reviewed

View reviewed changes

src/_includes/components/theme-switcher.html Outdated

                           <svg class="theme-switcher__icon" focusable="false" width="22" height="22" viewBox="0 0 100 100" aria-hidden="true"><g transform="translate(0,-952.36218)"><path d="m 50,955.36218 c 1.6568,0 3,1.3431 3,3 l 0,16 c 0,1.6569 -1.3432,3 -3,3 -1.6569,0 -3,-1.3431 -3,-3 l 0,-16 c 0,-1.6569 1.3431,-3 3,-3 z m 31.125,12.875 c 0.76777,0 1.50798,0.3205 2.09375,0.9062 1.17159,1.1717 1.17157,3.0472 0,4.2188 l -11.3125,11.3125 c -1.17157,1.1716 -3.04714,1.1716 -4.21875,0 -1.17153,-1.1715 -1.17158,-3.0472 0,-4.2187 L 79,969.14338 c 0.58579,-0.5857 1.35723,-0.9062 2.125,-0.9062 z m -62.25,0 c 0.76777,0 1.53921,0.3205 2.125,0.9062 l 11.3125,11.3126 c 1.17158,1.1715 1.17153,3.0472 0,4.2187 -1.17161,1.1716 -3.04718,1.1716 -4.21875,0 l -11.3125,-11.3125 c -1.17157,-1.1716 -1.17159,-3.0471 0,-4.2188 0.58577,-0.5857 1.32598,-0.9062 2.09375,-0.9062 z M 50,983.36218 c 10.45786,0 19,8.5422 19,19.00002 0,10.4579 -8.54214,19 -19,19 -10.45784,0 -19,-8.5421 -19,-19 0,-10.45792 8.54216,-19.00002 19,-19.00002 z m 0,6 c -7.21516,0 -13,5.7848 -13,13.00002 0,7.2152 5.78484,13 13,13 7.21518,0 13,-5.7848 13,-13 0,-7.21522 -5.78482,-13.00002 -13,-13.00002 z m 44,10 c 1.65686,0 2.99999,1.34322 3,3.00002 -1e-5,1.6569 -1.34315,3 -3,3 l -16,0 c -1.65685,0 -3,-1.3431 -3,-3 0,-1.6568 1.34316,-3.00002 3,-3.00002 l 16,0 z m -72,0 c 1.65684,0 3,1.34322 3,3.00002 0,1.6569 -1.34315,3 -3,3 l -16,0 c -1.65685,0 -2.99999,-1.3431 -3,-3 1e-5,-1.6568 1.34314,-3.00002 3,-3.00002 l 16,0 z m 47.8125,19.81252 c 0.76777,0 1.50797,0.2892 2.09375,0.875 l 11.3125,11.3125 c 1.17158,1.1716 1.17152,3.0472 0,4.2188 -1.1716,1.1715 -3.04718,1.1715 -4.21875,0 l -11.3125,-11.3126 c -1.17157,-1.1715 -1.1716,-3.0471 0,-4.2187 0.58577,-0.5858 1.35723,-0.875 2.125,-0.875 z m -39.625,0 c 0.76777,0 1.53923,0.2892 2.125,0.875 1.1716,1.1716 1.17157,3.0472 0,4.2187 L 21,1035.581 c -1.17157,1.1715 -3.04715,1.1715 -4.21875,0 -1.17152,-1.1716 -1.17158,-3.0472 0,-4.2188 l 11.3125,-11.3125 c 0.58578,-0.5858 1.32598,-0.875 2.09375,-0.875 z M 50,1027.3622 c 1.6568,0 3,1.3431 3,3 l 0,16 c 0,1.6569 -1.3432,3 -3,3 -1.6569,0 -3,-1.3431 -3,-3 l 0,-16 c 0,-1.6569 1.3431,-3 3,-3 z" fill="currentColor" fill-opacity="1" stroke="none"></path></g></svg>
                           <span>{{ site.footer.theme_switcher.light }}</span>
                       </button>
+                      <button class="theme-switcher__button js-toggle-button" id="system-theme-toggle" data-theme="system">
+                          <svg class="theme-switcher__icon" focusable="false" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-monitor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>

Member

harish-sethuraman Jun 21, 2024

make sure to add aria-hidden to svg as we don't expose it to accessibility API like other icons in theme buttons

akulsr0 added 2 commits

June 21, 2024 12:03


          chore: add aria-hidden=true to svg icon

5554efe


          chore: add aria-hidden=true to svg icon

f41924d

Tanujkanti4441 reviewed

View reviewed changes

Contributor

Tanujkanti4441 left a comment

the footer is still going out of the screen can you fix this also?

akulsr0 added 2 commits

June 24, 2024 10:16


          fix: footer language option getting out of screen

f2cabb3


          Merge branch 'main' into akul/add-system-theme-option

cc86347

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