mirror of
https://github.com/NohamR/gitprofile.git
synced 2026-05-25 12:27:17 +00:00
Change theme
This commit is contained in:
MD. Ariful Alam
231
src/App.js
231
src/App.js
@@ -1,8 +1,237 @@
|
||||
import { useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import Demo from "./components/Demo";
|
||||
import ThemeChanger from "./components/ThemeChanger";
|
||||
|
||||
function App() {
|
||||
const theme = useSelector(state => state.theme);
|
||||
|
||||
useEffect(() => {
|
||||
if (theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
}, [theme])
|
||||
|
||||
return (
|
||||
<Demo/>
|
||||
<div className="fade-in h-screen">
|
||||
<div className="p-4 lg:p-10 bg-base-200">
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3 lg:bg-base-200 rounded-box">
|
||||
<div className="row-span-3">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div>
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div className="flex-1">
|
||||
<h2 className="card-title">Theme</h2>
|
||||
<p className="text-base-content text-opacity-40">Change Theme</p>
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
<ThemeChanger />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<figure>
|
||||
<img src="https://picsum.photos/id/1005/600/400" />
|
||||
</figure>
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div>
|
||||
<h2 className="card-title">Karolann Collins</h2>
|
||||
<p className="text-base-content text-opacity-40">Direct Interactions Liaison</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div>
|
||||
<div className="avatar">
|
||||
<div className="rounded-full w-14 h-14 shadow">
|
||||
<img src="https://i.pravatar.cc/500?img=32" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="card-title">Janis Johnson</h2>
|
||||
<p className="text-base-content text-opacity-40">Accounts Agent</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div className="flex-1">
|
||||
<h2 className="card-title">Meredith Mayer</h2>
|
||||
<p className="text-base-content text-opacity-40">Data Liaison</p>
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
<button className="btn btn-sm">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div className="flex-1">
|
||||
<h2 className="card-title text-primary">4,600</h2>
|
||||
<p className="text-base-content text-opacity-40">Page views</p>
|
||||
</div>
|
||||
<div className="flex space-x-2 flex-0">
|
||||
<button className="btn btn-sm btn-square">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className="btn btn-sm btn-square">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<label className="flex-0">
|
||||
<input type="checkbox" defaultChecked="checked" className="toggle toggle-primary" />
|
||||
</label>
|
||||
<div className="flex-1">
|
||||
<h2 className="card-title">
|
||||
Enable Notifications
|
||||
</h2>
|
||||
<p className="text-base-content text-opacity-40">
|
||||
To get latest updates
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card col-span-1 row-span-3 shadow-lg xl:col-span-2 bg-base-100">
|
||||
<div className="card-body">
|
||||
<h2 className="my-4 text-4xl font-bold card-title">
|
||||
Top 10 UI Components
|
||||
</h2>
|
||||
<div className="mb-4 space-x-2 card-actions">
|
||||
<div className="badge badge-ghost">
|
||||
Colors
|
||||
</div>
|
||||
<div className="badge badge-ghost">
|
||||
UI Design
|
||||
</div>
|
||||
<div className="badge badge-ghost">
|
||||
Creativity
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.
|
||||
</p>
|
||||
<div className="justify-end space-x-2 card-actions">
|
||||
<button className="btn btn-primary">
|
||||
Login
|
||||
</button>
|
||||
<button className="btn">
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div className="flex-1">
|
||||
<h2 className="flex card-title">
|
||||
<button className="btn btn-ghost btn-sm btn-circle loading" />
|
||||
Downloading...
|
||||
</h2>
|
||||
<progress value={70} max={100} className="progress progress-secondary" />
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
<button className="btn btn-circle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<label className="cursor-pointer label">
|
||||
<input type="checkbox" defaultChecked="checked" className="checkbox checkbox-accent" />
|
||||
<span className="mx-4 label-text">
|
||||
Enable Autosave
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="menu row-span-3 p-4 shadow-lg bg-base-100 text-base-content text-opacity-40 rounded-box">
|
||||
<li className="menu-title">
|
||||
<span>Menu Title
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
Item with icon
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
Item with icon
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
Item with icon
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="alert col-span-1 xl:col-span-2 bg-base-100">
|
||||
<div className="flex-1">
|
||||
<label className="mx-3">
|
||||
Lorem ipsum dolor sit amet, consectetur adip!
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<button className="btn btn-sm btn-ghost mr-2">
|
||||
Cancel
|
||||
</button>
|
||||
<button className="btn btn-sm btn-primary">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="alert col-span-1 xl:col-span-2 alert-info">
|
||||
<div className="flex-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="w-6 h-6 mx-2 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<label>
|
||||
Lorem ipsum dolor sit amet, consectetur adip!
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="alert col-span-1 xl:col-span-2 alert-success">
|
||||
<div className="flex-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="w-6 h-6 mx-2 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
<label>
|
||||
Lorem ipsum dolor sit amet, consectetur adip!
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,59 +1,34 @@
|
||||
import ThemeChanger from "./ThemeChanger";
|
||||
|
||||
const Demo = () => {
|
||||
return (
|
||||
<div className="p-4 lg:p-10 bg-base-200">
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3 lg:bg-base-200 rounded-box">
|
||||
{/* <div className="navbar col-span-1 shadow-lg xl:col-span-3 bg-neutral-focus text-neutral-content rounded-box">
|
||||
<div className="flex-none">
|
||||
<button className="btn btn-square btn-ghost">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-none px-2 mx-2">
|
||||
<span className="text-lg font-bold">
|
||||
DaisyUI
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-center flex-1 px-2 mx-2">
|
||||
<div className="items-stretch hidden lg:flex">
|
||||
<a className="btn btn-ghost btn-sm rounded-btn">
|
||||
Home
|
||||
</a>
|
||||
<a className="btn btn-ghost btn-sm rounded-btn">
|
||||
Portfolio
|
||||
</a>
|
||||
<a className="btn btn-ghost btn-sm rounded-btn">
|
||||
About
|
||||
</a>
|
||||
<a className="btn btn-ghost btn-sm rounded-btn">
|
||||
Contact
|
||||
</a>
|
||||
<div className="row-span-3">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div>
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div className="flex-1">
|
||||
<h2 className="card-title">Theme</h2>
|
||||
<p className="text-base-content text-opacity-40">Change Theme</p>
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
<ThemeChanger/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<button className="btn btn-square btn-ghost">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<button className="btn btn-square btn-ghost">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="card row-span-3 shadow-lg compact bg-base-100">
|
||||
<figure>
|
||||
<img src="https://picsum.photos/id/1005/600/400" />
|
||||
</figure>
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div>
|
||||
<h2 className="card-title">Karolann Collins</h2>
|
||||
<p className="text-base-content text-opacity-40">Direct Interactions Liaison</p>
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<figure>
|
||||
<img src="https://picsum.photos/id/1005/600/400" />
|
||||
</figure>
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div>
|
||||
<h2 className="card-title">Karolann Collins</h2>
|
||||
<p className="text-base-content text-opacity-40">Direct Interactions Liaison</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
30
src/components/ThemeChanger.js
Normal file
30
src/components/ThemeChanger.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Fragment } from 'react';
|
||||
import { Select } from 'antd';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { setTheme } from '../store/slices/themeSlice';
|
||||
import config from '../config';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const ThemeChanger = () => {
|
||||
const dispatch = useDispatch();
|
||||
const theme = useSelector(state => state.theme);
|
||||
|
||||
const handleChange = (value) => {
|
||||
dispatch(setTheme(value));
|
||||
}
|
||||
|
||||
return (
|
||||
<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange} bordered={false} value={theme}>
|
||||
{
|
||||
config.themes.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
<span className="capitalize text-base-content text-opacity-60">{item === config.defaultTheme ? 'Default' : item}</span>
|
||||
</Option>
|
||||
))
|
||||
}
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeChanger;
|
||||
26
src/config.js
Normal file
26
src/config.js
Normal file
@@ -0,0 +1,26 @@
|
||||
module.exports = {
|
||||
defaultTheme: 'light',
|
||||
themes: [
|
||||
'light',
|
||||
'dark',
|
||||
'cupcake',
|
||||
'bumblebee',
|
||||
'emerald',
|
||||
'corporate',
|
||||
'synthwave',
|
||||
'retro',
|
||||
'cyberpunk',
|
||||
'valentine',
|
||||
'halloween',
|
||||
'garden',
|
||||
'forest',
|
||||
'aqua',
|
||||
'lofi',
|
||||
'pastel',
|
||||
'fantasy',
|
||||
'wireframe',
|
||||
'black',
|
||||
'luxury',
|
||||
'dracula'
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import config from "../config";
|
||||
|
||||
export const getThemeValue = () => {
|
||||
if (localStorage.hasOwnProperty('theme')) {
|
||||
let theme = localStorage.getItem('theme');
|
||||
return theme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : config.defaultTheme;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
::-webkit-scrollbar, .scroller {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #888;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import './index.scss';
|
||||
import App from './App';
|
||||
import { Provider } from 'react-redux';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
103
src/index.scss
Normal file
103
src/index.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
@use "sass:meta";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
::-webkit-scrollbar, .scroller {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #888;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]),
|
||||
html:not([data-theme="halloween"]),
|
||||
html:not([data-theme="forest"]),
|
||||
html:not([data-theme="black"]),
|
||||
html:not([data-theme="luxury"]),
|
||||
html:not([data-theme="dracula"]) {
|
||||
@include meta.load-css("node_modules/antd/dist/antd.css", $with: null);
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"],
|
||||
html[data-theme="halloween"],
|
||||
html[data-theme="forest"],
|
||||
html[data-theme="black"],
|
||||
html[data-theme="luxury"],
|
||||
html[data-theme="dracula"] {
|
||||
@include meta.load-css("node_modules/antd/dist/antd.dark.css", $with: null);
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: unset
|
||||
}
|
||||
|
||||
.z-hover {
|
||||
transition: all ease-in-out 0.3s !important;
|
||||
}
|
||||
|
||||
.z-hover:hover,
|
||||
.z-hover:focus,
|
||||
.z-hover:active {
|
||||
transition: transform 0.3s !important;
|
||||
-ms-transform: scale(1.03) !important;
|
||||
-webkit-transform: scale(1.03) !important;
|
||||
transform: scale(1.03) !important;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
animation-name: fadeIn;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
23
src/store/slices/themeSlice.js
Normal file
23
src/store/slices/themeSlice.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
import { getThemeValue } from '../../helpers/utils';
|
||||
|
||||
const initialState = getThemeValue();
|
||||
|
||||
export const themeSlice = createSlice({
|
||||
name: 'theme',
|
||||
initialState: initialState,
|
||||
reducers: {
|
||||
setTheme: (state, action) => {
|
||||
state = action.payload;
|
||||
|
||||
document.documentElement.setAttribute('data-theme', state);
|
||||
localStorage.setItem('theme', state);
|
||||
|
||||
return state;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const { setTheme } = themeSlice.actions;
|
||||
|
||||
export default themeSlice.reducer;
|
||||
@@ -1,8 +1,10 @@
|
||||
import { combineReducers, configureStore } from '@reduxjs/toolkit';
|
||||
import profileSlice from './slices/profileSlice';
|
||||
import themeSlice from './slices/themeSlice';
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
profile: profileSlice
|
||||
profile: profileSlice,
|
||||
theme: themeSlice,
|
||||
})
|
||||
|
||||
export const store = configureStore({
|
||||
|
||||
Reference in New Issue
Block a user