Skip to content

Commit

Permalink
feat: Start working on dark mode variables
Browse files Browse the repository at this point in the history
jerelmiller committed Jun 23, 2020
1 parent 670c726 commit 296a537
Showing 2 changed files with 42 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/components/Layout.js
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@ import Sidebar from './Sidebar';
import styles from './Layout.module.scss';
import 'normalize.css';
import './styles.scss';
import '../theme.scss';

const Layout = ({ children }) => {
const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
41 changes: 41 additions & 0 deletions src/theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.light-mode {
--primary-background: var(--color-white);
--primary-text-color: var(--color-neutrals-700);
--primary-button-background-color: var(--color-brand-800);

--secondary-background-color: var(--color-neutrals-100);
--secondary-text-color: var(--color-neutrals-600);
--secondary-button-background-color: var(--color-white);
--secondary-button-text-color: var(--color-brand-800);

--link-color: var(--color-brand-800);
--border-color: var(--color-neutrals-400);
--divider-color: var(--color-neutrals-100);
}

.dark-mode {
--color-neutrals-050: #131f23;
--color-neutrals-100: #22353c;
--color-neutrals-200: #233940;
--color-neutrals-300: #2a4249;
--color-neutrals-400: #37484e;
--color-neutrals-500: #495b5c;
--color-neutrals-600: #7c9799;
--color-neutrals-700: #a5bbbd;
--color-neutrals-800: #cedede;
--color-neutrals-900: #e8eaea;

--primary-background-color: #1c2a2f;
--primary-text-color: var(--color-white);
--primary-button-background-color: var(--color-brand-800);
--primary-button-text-color: var(--color-brand-800);

--secondary-background-color: var(--color-neutrals-100);
--secondary-text-color: var(--color-neutrals-600);
--secondary-button-background-color: var(--color-white);
--secondary-button-text-color: var(--color-brand-800);

--link-color: var(--color-brand-400);
--border-color: var(--color-neutrals-300);
--divider-color: var(--color-neutrals-200);
}

0 comments on commit 296a537

Please sign in to comment.