{"id":33946,"date":"2021-06-12T15:25:08","date_gmt":"2021-06-12T15:25:08","guid":{"rendered":"https:\/\/ubuntuhandbook.org\/?p=33946"},"modified":"2021-07-02T16:36:03","modified_gmt":"2021-07-02T16:36:03","slug":"toggle-dark-light-mode-ubuntu-extension","status":"publish","type":"post","link":"https:\/\/ubuntuhandbook.org\/index.php\/2021\/06\/toggle-dark-light-mode-ubuntu-extension\/","title":{"rendered":"Easily Toggle Dark \/ Light Mode in Ubuntu 20.04, 21.04 via This Extension"},"content":{"rendered":"<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/12\/gnome-icon250.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/12\/gnome-icon250.png\" alt=\"\" width=\"250\" height=\"250\" class=\"alignleft size-full wp-image-33105\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/12\/gnome-icon250.png 250w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/12\/gnome-icon250-150x150.png 150w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><\/p>\n<p>This simple tutorial shows how to add a system tray menu option to switch between Dark and Light system mode in Ubuntu.<\/p>\n<p>By default, the <i>System Settings -> Appearance<\/i> page offers options to choose Standard, Light, and Dark window colors. It however only apply the app theme.<\/p>\n<p>For system menu, notifications, date and time menu, etc, you have to install <i>user themes<\/i> extension, and change the Gnome Shell theme individually via Gnome Tweak Tool.<\/p>\n<p>Here I&#8217;m going to introduce a new Gnome Shell Extension called &#8216;<i><b>Ubuntu Appearance<\/b><\/i>&#8216;. With it, you can toggle fully dark and light mode easily via a few clicks.<\/p>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2021\/06\/switch-dark-mode.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2021\/06\/switch-dark-mode.gif\" alt=\"\" width=\"600\" height=\"337\" class=\"aligncenter size-full wp-image-33948\" \/><\/a><\/p>\n<p>The extension features:<\/p>\n<ul>\n<li>Integrate Light, Dark, Standard option into system tray menu.<\/li>\n<li>Toggle fully dark \/ light mode, not only app window colors but also system theme (e.g., system menu, calendar, notifications.).<\/li>\n<li>Option name vary according to current system mode.<\/li>\n<li>The user themes extension is not required.<\/li>\n<\/ul>\n<h3>Install Ubuntu Appearance extension:<\/h3>\n<p>1.) Firstly, open terminal by pressing Ctrl+Alt+T on keyboard. When terminal opens, run command to install required packages:<\/p>\n<pre style=\"border:none;\">sudo apt install chrome-gnome-shell gnome-shell-extension-prefs<\/pre>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/10\/apt-chrome-gnome-shell-prefs.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/10\/apt-chrome-gnome-shell-prefs.png\" alt=\"\" width=\"600\" height=\"150\" class=\"aligncenter size-full wp-image-32875\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/10\/apt-chrome-gnome-shell-prefs.png 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/10\/apt-chrome-gnome-shell-prefs-450x113.png 450w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>2.) Secondly, go to the extension web page and click on the slider icon to install it.<\/p>\n<p><i>Though the extension says for Gnome 40, it works well in my Ubuntu 20.04 and Ubuntu 21.04 machine.<\/i><\/p>\n<div class=\"wp-block-buttons aligncenter\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-text-color has-background\" href=\"https:\/\/extensions.gnome.org\/extension\/4335\/ubuntu-appearance-gnome-40\/\" target=\"_blank\" rel=\"noreferrer noopener\">Install Ubuntu Appearance Extension<\/a><\/div>\n<\/div>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2021\/06\/install-ubuntu-appearance.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2021\/06\/install-ubuntu-appearance-600x343.jpg\" alt=\"\" width=\"600\" height=\"343\" class=\"aligncenter size-large wp-image-33949\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2021\/06\/install-ubuntu-appearance-600x343.jpg 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2021\/06\/install-ubuntu-appearance-300x172.jpg 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2021\/06\/install-ubuntu-appearance-768x440.jpg 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2021\/06\/install-ubuntu-appearance.jpg 1015w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Don&#8217;t see the toggle icon? Click the link <i>&#8216;Click here to install browser extension&#8217;<\/i> to install browser extension and refresh the web page.<\/p>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/06\/gnome-browser-extension.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/06\/gnome-browser-extension.png\" alt=\"\" width=\"520\" height=\"256\" class=\"aligncenter size-full wp-image-10357\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/06\/gnome-browser-extension.png 520w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/06\/gnome-browser-extension-450x222.png 450w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/a><\/p>\n<p>Once you installed the extension, the option should appear in system menu immediately. Log out and back in or restart Gnome Shell if you don&#8217;t see the option.<\/p>","protected":false},"excerpt":{"rendered":"<p>This simple tutorial shows how to add a system tray menu option to switch between Dark and Light system mode in Ubuntu. By default, the System Settings -> Appearance page offers options to choose Standard, Light, and Dark window colors. It however only apply the app theme. For system menu, notifications, date and time menu, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":33947,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[2037],"class_list":["post-33946","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gnome-shell","tag-dark-mode"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/33946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/comments?post=33946"}],"version-history":[{"count":0,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/33946\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media\/33947"}],"wp:attachment":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media?parent=33946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/categories?post=33946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/tags?post=33946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}