light / dark toggling

Author: thefringeninja

src/SqlStreamStoreBrowser.tsx

@@ -1,7 +1,15 @@
-import { AppBar, CssBaseline, Toolbar, Typography } from '@material-ui/core';
+import {
+    AppBar,
+    CssBaseline,
+    IconButton,
+    Theme,
+    Toolbar,
+    Typography,
+} from '@material-ui/core';
 import { MuiThemeProvider } from '@material-ui/core/styles';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import { JSONSchema7 } from 'json-schema';
-import React, { ComponentType } from 'react';
+import React, { ComponentType, createElement } from 'react';
 import { Observable as obs } from 'rxjs';
 import {
     AuthorizationProvider,
@@ -11,10 +19,14 @@ import {
     Notifications,
     withAuthorization,
 } from './components';
-import { SqlStreamStore } from './components/Icons';
+import {
+    LightbulbFull,
+    LightbulbOutline,
+    SqlStreamStore,
+} from './components/Icons';
 import { connect, createState } from './reactive';
 import { actions, store, Viewer } from './stream-store';
-import theme from './theme';
+import themes from './themes';
 import { AuthorizationProps, HalLink, HalLinks } from './types';
 import { mediaTypes } from './utils';
 
@@ -39,6 +51,7 @@ interface SqlStreamStoreBrowserState {
     mediaType: string;
     _links: HalLinks;
     self: HalLink;
+    theme: Theme;
     forms: { [rel: string]: JSONSchema7 };
 }
 const state$ = createState<SqlStreamStoreBrowserState>(
@@ -48,6 +61,7 @@ const state$ = createState<SqlStreamStoreBrowserState>(
         store.hal$.forms$.map(forms => ['forms', () => forms]),
         store.hal$.loading$.map(loading => ['loading', () => loading]),
         store.hal$.mediaType$.map(mediaType => ['mediaType', () => mediaType]),
+        themes.theme$.map(theme => ['theme', () => theme]),
     ),
     obs.of({
         _links: {},
@@ -57,6 +71,7 @@ const state$ = createState<SqlStreamStoreBrowserState>(
         self: {
             href: '',
         },
+        theme: themes.defaultTheme,
     }),
 );
 
@@ -70,13 +85,21 @@ const initialNavigation = ({ authorization }: AuthorizationProps) =>
         authorization,
     );
 
-const Hero = () => (
+const lightbulbs: { [key: string]: ComponentType<SvgIconProps> } = {
+    dark: LightbulbFull,
+    light: LightbulbOutline,
+};
+
+const Hero = ({ theme }: { theme: Theme }) => (
     <AppBar position={'static'}>
         <Toolbar>
             <SqlStreamStore color={'action'} />
             <Typography variant={'h6'} color={'inherit'}>
                 Sql Stream Store
             </Typography>
+            <IconButton onClick={() => themes.actions.type.next(void 0)}>
+                {createElement(lightbulbs[theme.palette.type])}
+            </IconButton>
         </Toolbar>
     </AppBar>
 );
@@ -85,19 +108,21 @@ const SqlStreamStoreBrowser: ComponentType<
     SqlStreamStoreBrowserState
 > = withAuthorization()(
     mount<SqlStreamStoreBrowserState & AuthorizationProps>(initialNavigation)(
-        ({ loading, ...props }) => (
-            <MuiThemeProvider theme={theme}>
-                <div>
-                    <CssBaseline />
-                    <Hero />
-                    <Loading open={loading} />
-                    <NavigationProvider onNavigate={onNavigate}>
-                        <Viewer {...props} />
-                        <Notifications />
-                    </NavigationProvider>
-                </div>
-            </MuiThemeProvider>
-        ),
+        ({ loading, theme, ...props }) => {
+            return (
+                <MuiThemeProvider theme={theme}>
+                    <div>
+                        <CssBaseline />
+                        <Hero theme={theme} />
+                        <Loading open={loading} />
+                        <NavigationProvider onNavigate={onNavigate}>
+                            <Viewer {...props} />
+                            <Notifications />
+                        </NavigationProvider>
+                    </div>
+                </MuiThemeProvider>
+            );
+        },
     ),
 );
 

src/components/Hyperlink.tsx

@@ -1,13 +1,14 @@
-import { WithStyles, withStyles } from '@material-ui/core';
+import { Theme, WithStyles, withStyles } from '@material-ui/core';
 import React, { ComponentType } from 'react';
-import theme from '../theme';
 import { HalLink, HalLinks, NavigatableProps } from '../types';
 import { preventDefault } from '../utils';
 import { withNavigation } from './NavigationProvider';
 
-const color = theme.palette.action.active;
-
-const styles = {
+const styles = ({
+    palette: {
+        action: { active: color },
+    },
+}: Theme) => ({
     hyperlink: {
         '&:active': {
             color,
@@ -20,7 +21,7 @@ const styles = {
         },
         color,
     },
-};
+});
 
 interface HyperlinkProps {
     rel: string;

src/components/Icons/index.ts

@@ -21,3 +21,4 @@ export { default as SpaceBar } from '@material-ui/icons/SpaceBar';
 export { default as Search } from '@material-ui/icons/Search';
 export { default as List } from '@material-ui/icons/List';
 export { default as Help } from '@material-ui/icons/Help';
+export { LightbulbFull, LightbulbOutline } from './mui';

src/components/Icons/mui/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/components/Icons/mui/LightbulbFull.tsx

@@ -0,0 +1,15 @@
+/* tslint:disable:max-line-length */
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+import React from 'react';
+
+const LightbulbFull = (props: SvgIconProps) => (
+    <SvgIcon {...props}>
+        <path
+            d={
+                'm9,21c0,0.55 0.45,1 1,1l4,0c0.55,0 1,-0.45 1,-1l0,-1l-6,0l0,1zm3,-19c-3.86,0 -7,3.14 -7,7c0,2.38 1.19,4.47 3,5.74l0,2.26c0,0.55 0.45,1 1,1l6,0c0.55,0 1,-0.45 1,-1l0,-2.26c1.81,-1.27 3,-3.36 3,-5.74c0,-3.86 -3.14,-7 -7,-7z'
+            }
+        />
+    </SvgIcon>
+);
+
+export default LightbulbFull;

src/components/Icons/mui/LightbulbOutline.tsx

@@ -0,0 +1,17 @@
+/* tslint:disable:max-line-length */
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+import React from 'react';
+
+const LightbulbOutline = (props: SvgIconProps) => (
+    <SvgIcon {...props}>
+        <path
+            d={
+                'M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z'
+            }
+        />
+    </SvgIcon>
+);
+
+LightbulbOutline.muiName = 'SvgIcon';
+
+export default LightbulbOutline;

src/components/Icons/mui/index.ts

@@ -0,0 +1,2 @@
+export { default as LightbulbFull } from './LightbulbFull';
+export { default as LightbulbOutline } from './LightbulbOutline';

src/theme.ts

@@ -0,0 +1,48 @@
+import { createMuiTheme, PaletteType, Theme } from '@material-ui/core';
+import { PaletteOptions } from '@material-ui/core/styles/createPalette';
+import { Observable } from 'rxjs';
+import { createAction, createState } from './reactive';
+
+const palette = (type: PaletteType): PaletteOptions => ({
+    action: {
+        active: '#42c0fb',
+    },
+    type,
+});
+
+const typography = {
+    useNextVariants: true,
+};
+
+const createTheme = (type: PaletteType) =>
+    createMuiTheme({
+        palette: palette(type),
+        typography,
+    });
+
+const actions = {
+    type: createAction<void>(),
+};
+
+const defaultTheme = createTheme('light');
+
+interface ThemeState {
+    theme: Theme;
+}
+
+const theme$ = createState<ThemeState>(
+    actions.type.map(() => [
+        'theme',
+        ({ palette: { type } }: Theme) =>
+            createTheme(type === 'light' ? 'dark' : 'light'),
+    ]),
+    Observable.of({
+        theme: defaultTheme,
+    }),
+).map(({ theme }) => theme);
+
+export default {
+    actions,
+    defaultTheme,
+    theme$,
+};