[core] Add theme support to page base

Author: rtivital

assets.sketch

@@ -1,15 +1,26 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import cx from 'classnames';
+import { useTheme } from '../../../ThemeProvider';
 import GithubButton from '../../GithubButton/GithubButton';
 import logoText from '../../../assets/logo-text.svg';
+import logoTextWhite from '../../../assets/logo-text-white.svg';
 import classes from './Header.styles.less';
 
 export default function Header() {
+  const [theme] = useTheme();
+
   return (
-    <header className={classes.header}>
+    <header className={cx(classes.header, classes[theme])}>
       <div className={classes.headerBody}>
         <Link to="/">
-          <img className={classes.logo} src={logoText} alt="" width={340} height={72} />
+          <img
+            className={classes.logo}
+            src={theme === 'light' ? logoText : logoTextWhite}
+            alt=""
+            width={340}
+            height={72}
+          />
         </Link>
         <p className={classes.description}>Open source browser tools for everyday use</p>
       </div>

src/assets/logo-text-white.svg

@@ -29,3 +29,11 @@
     margin-bottom: 18px;
   }
 }
+
+.dark {
+  border-bottom-color: @oc-gray-6;
+
+  .description {
+    color: @oc-gray-1;
+  }
+}

src/components/PageBase/Header/Header.jsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useTheme } from '../../ThemeProvider';
 import Footer from './Footer/Footer';
 import Header from './Header/Header';
 import classes from './PageBase.styles.less';
 
 export default function PageBase({ children }) {
+  const [theme] = useTheme();
+
   return (
-    <main className={classes.wrapper}>
+    <main className={cx(classes.wrapper, classes[theme])}>
       <div className={classes.container}>
         <Header />
         {children}

src/components/PageBase/Header/Header.styles.less

@@ -11,3 +11,7 @@
   padding-left: 20px;
   padding-right: 20px;
 }
+
+.dark {
+  background-color: @oc-gray-9;
+}