Dark mode toggle

src/components/gui/gui.jsx

@@ -95,6 +95,7 @@ const GUIComponent = props => {
         onClickAccountNav,
         onCloseAccountNav,
         onClickAddonSettings,
+        onClickTheme,
         onLogOut,
         onOpenRegistration,
         onToggleLoginOpen,
@@ -235,6 +236,7 @@ const GUIComponent = props => {
                     onClickAbout={onClickAbout}
                     onClickAccountNav={onClickAccountNav}
                     onClickAddonSettings={onClickAddonSettings}
+                    onClickTheme={onClickTheme}
                     onClickLogo={onClickLogo}
                     onCloseAccountNav={onCloseAccountNav}
                     onLogOut={onLogOut}
@@ -411,6 +413,7 @@ GUIComponent.propTypes = {
     onClickAbout: PropTypes.func,
     onClickAccountNav: PropTypes.func,
     onClickAddonSettings: PropTypes.func,
+    onClickTheme: PropTypes.func,
     onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,
     onExtensionButtonClick: PropTypes.func,

src/components/menu-bar/menu-bar.css

@@ -239,3 +239,13 @@
     color: $ui-white !important;
     text-decoration: none;
 }
+
+.theme-button {
+    background-image: url("./tw-sun.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 48px;
+}
+[theme="dark"] .theme-button {
+    background-image: url("./tw-moon.svg");
+}

src/components/menu-bar/menu-bar.jsx

@@ -464,6 +464,12 @@ class MenuBar extends React.Component {
                                 </MenuBarMenu>
                             </div>
                         </div>}
+                        {this.props.onClickTheme && (
+                            <div
+                                className={classNames(styles.menuBarItem, styles.hoverable, styles.themeButton)}
+                                onMouseUp={this.props.onClickTheme}
+                            />
+                        )}
                         {(this.props.canManageFiles) && (
                             <div
                                 className={classNames(styles.menuBarItem, styles.hoverable, {
@@ -1031,6 +1037,7 @@ MenuBar.propTypes = {
     onClickAbout: PropTypes.func,
     onClickAccount: PropTypes.func,
     onClickAddonSettings: PropTypes.func,
+    onClickTheme: PropTypes.func,
     onClickEdit: PropTypes.func,
     onClickFile: PropTypes.func,
     onClickLanguage: PropTypes.func,

src/components/menu-bar/tw-moon.svg

@@ -0,0 +1,2 @@
+<!-- https://material.io/resources/icons/?search=brightness_3&icon=brightness_3&style=baseline -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 2c-1.05 0-2.05.16-3 .46 4.06 1.27 7 5.06 7 9.54 0 4.48-2.94 8.27-7 9.54.95.3 1.95.46 3 .46 5.52 0 10-4.48 10-10S14.52 2 9 2z"/></svg>

src/components/menu-bar/tw-sun.svg

@@ -0,0 +1,2 @@
+<!-- https://material.io/resources/icons/?search=brightness_5&icon=brightness_5&style=baseline -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 15.31L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>

src/lib/tw-theme-hoc.jsx

@@ -7,9 +7,9 @@ const ThemeHOC = function (WrappedComponent) {
         constructor (props) {
             super(props);
             this.handleQueryChange = this.handleQueryChange.bind(this);
-            const urlParams = new URLSearchParams(location.search);
+            this.handleClickTheme = this.handleClickTheme.bind(this);
             this.state = {
-                dark: urlParams.has('theme') ? urlParams.get('theme') === 'dark' : darkMediaQuery.matches
+                dark: darkMediaQuery.matches
             };
         }
         componentDidMount () {
@@ -23,10 +23,16 @@ const ThemeHOC = function (WrappedComponent) {
                 dark: darkMediaQuery.matches
             });
         }
+        handleClickTheme () {
+            this.setState(state => ({
+                dark: !state.dark
+            }));
+        }
         render () {
             return (
                 <div theme={this.state.dark ? 'dark' : 'light'}>
                     <WrappedComponent
+                        onClickTheme={this.handleClickTheme}
                         {...this.props}
                     />
                 </div>

src/playground/render-interface.jsx

@@ -75,7 +75,8 @@ const WrappedMenuBar = compose(
 const Interface = ({
     description,
     isFullScreen,
-    isPlayerOnly
+    isPlayerOnly,
+    onClickTheme
 }) => {
     const isHomepage = isPlayerOnly && !isFullScreen;
     return (
@@ -86,6 +87,7 @@ const Interface = ({
                         canManageFiles
                         canChangeLanguage
                         enableSeeInside
+                        onClickTheme={onClickTheme}
                     />
                 </div>
             ) : null}
@@ -94,6 +96,7 @@ const Interface = ({
                 <GUI
                     onClickAddonSettings={handleClickAddonSettings}
                     onLoadAddons={handleLoadAddons}
+                    onClickTheme={onClickTheme}
                 />
                 {isHomepage ? (
                     <React.Fragment>
@@ -216,7 +219,8 @@ Interface.propTypes = {
         instructions: PropTypes.string
     }),
     isFullScreen: PropTypes.bool,
-    isPlayerOnly: PropTypes.bool
+    isPlayerOnly: PropTypes.bool,
+    onClickTheme: PropTypes.func
 };
 
 const mapStateToProps = state => ({