Skip to content

added functionality for theming #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

added functionality for theming #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dark-mode/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
15,740 changes: 15,740 additions & 0 deletions dark-mode/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions dark-mode/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,18 @@
"version": "1.0.0",
"private": true,
"engines": {
"node" : ">= 15.0.0"
"node": ">= 15.0.0"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"bulma": "^0.8.2",
"sass": "^1.43.4",
"classnames": "^2.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
"react-scripts": "4.0.3",
"sass": "^1.43.4"
},
"scripts": {
"start": "react-scripts start",
Expand Down
6 changes: 6 additions & 0 deletions dark-mode/src/contexts/ThemeContext/constants/themes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const Themes = {
LIGHT: "light",
DARK: "dark-mode",
};

export default Themes;
14 changes: 14 additions & 0 deletions dark-mode/src/contexts/ThemeContext/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React, { useState, createContext } from "react";
import Themes from "./constants/themes";

export const ThemeContext = createContext();

export const ThemeProvider = (props) => {
const [currentTheme, setCurrentTheme] = useState(Themes.LIGHT); //can have this as bool. using string to support multiple themes.

return (
<ThemeContext.Provider value={[currentTheme, setCurrentTheme]}>
{props.children}
</ThemeContext.Provider>
);
};
24 changes: 15 additions & 9 deletions dark-mode/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
import React from 'react';
import ReactDOM from 'react-dom';
import AppContainer from './common/containers/App';
import './styles/_main.scss';
import Routes from './routes';
import React from "react";
import ReactDOM from "react-dom";

import AppContainer from "./common/containers/App";

import { ThemeProvider } from "./contexts/ThemeContext";

import "./styles/_main.scss";
import Routes from "./routes";

ReactDOM.render(
<AppContainer>
<Routes />
</AppContainer>,
document.getElementById('root')
<ThemeProvider>
<AppContainer>
<Routes />
</AppContainer>
</ThemeProvider>,
document.getElementById("root")
);
141 changes: 94 additions & 47 deletions dark-mode/src/routes/App/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,99 @@
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMoon } from '@fortawesome/free-solid-svg-icons';
import '../styles/_app.scss';
import React, { useContext } from "react";
import cx from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";

import { ThemeContext } from "../../../contexts/ThemeContext";
import Themes from "../../../contexts/ThemeContext/constants/themes";

import "../styles/_app.scss";

function App() {
return (
<div className="app">
<div className="level">
<div>
<h1 className="title">Dark Mode Challenge</h1>
</div>

{/* --The button that should toggle dark mode-- */}
<button className="app__dark-mode-btn icon level-right">
<FontAwesomeIcon icon={faMoon} />
</button>

</div>

<div className="columns">
<div className="column">
<p>Lollipop powder powder. Cotton candy caramels chupa chups halvah muffin caramels apple pie topping cake. Topping chocolate bar pastry chocolate cake. Cupcake tart jujubes dragée jelly-o icing sugar plum. Chocolate bar lollipop candy canes. Biscuit croissant apple pie pudding caramels wafer tart tootsie roll macaroon. Croissant tiramisu chocolate bar carrot cake lemon drops halvah.</p>
</div>
<div className="column">
<p>Marshmallow tiramisu liquorice bear claw chocolate bar bear claw tart. Muffin chupa chups pie. Brownie apple pie topping lemon drops marzipan toffee. Pudding macaroon icing ice cream bonbon cake tart. Pudding sugar plum chocolate cake cake biscuit pastry pastry chocolate bar tart. Lemon drops dessert gummies icing.</p>
</div>
</div>

<div className="field">
<div className="control">
<input className="input" type="text" placeholder="Name" />
</div>
</div>

<div className="field">
<div className="control">
<input className="input" type="text" placeholder="Email" />
</div>
</div>

<section className="section">
<div className="buttons level-right">
<a className="button is-primary">Save</a>
<a className="button is-link">Submit</a>
</div>
</section>
</div>
);
const [currentTheme, setCurrentTheme] = useContext(ThemeContext);

const root = document.querySelector("html");

const toggleTheme = () => {
setCurrentTheme(
currentTheme === Themes.DARK ? Themes.LIGHT : Themes.DARK
);
if (root.classList.contains(Themes.DARK)) {
root.removeAttribute("class");
} else {
root.classList.add(Themes.DARK);
}
};

return (
<div
className={cx("app", {
"dark-mode": currentTheme === Themes.DARK,
})}
>
<div className="level">
<div>
<h1 className="title">Dark Mode Challenge</h1>
</div>

{/* --The button that should toggle dark mode-- */}
<button
className="app__dark-mode-btn icon level-right"
onClick={() => toggleTheme()}
>
<FontAwesomeIcon
icon={currentTheme === Themes.DARK ? faSun : faMoon}
color={
currentTheme === Themes.DARK ? "#FFA500" : "#000"
}
/>
</button>
</div>

<div className="columns">
<div className="column">
<p>
Lollipop powder powder. Cotton candy caramels chupa
chups halvah muffin caramels apple pie topping cake.
Topping chocolate bar pastry chocolate cake. Cupcake
tart jujubes dragée jelly-o icing sugar plum. Chocolate
bar lollipop candy canes. Biscuit croissant apple pie
pudding caramels wafer tart tootsie roll macaroon.
Croissant tiramisu chocolate bar carrot cake lemon drops
halvah.
</p>
</div>
<div className="column">
<p>
Marshmallow tiramisu liquorice bear claw chocolate bar
bear claw tart. Muffin chupa chups pie. Brownie apple
pie topping lemon drops marzipan toffee. Pudding
macaroon icing ice cream bonbon cake tart. Pudding sugar
plum chocolate cake cake biscuit pastry pastry chocolate
bar tart. Lemon drops dessert gummies icing.
</p>
</div>
</div>

<div className="field">
<div className="control">
<input className="input" type="text" placeholder="Name" />
</div>
</div>

<div className="field">
<div className="control">
<input className="input" type="text" placeholder="Email" />
</div>
</div>

<section className="section">
<div className="buttons level-right">
<a className="button is-primary">Save</a>
<a className="button is-link">Submit</a>
</div>
</section>
</div>
);
}

export default App;