liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix the dark mode so it shows up on popups

Browse Source
This commit is contained in:
Spectralitree 2021-10-03 19:10:57 +02:00
parent 283bd5f8fb
commit 884f600d3e
3 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.js
View File

@ -1,4 +1,4 @@
import React, { useState, useCallback} from 'react';
import React, { useState, useCallback, useEffect } from 'react';
import { Router, Switch, Route, Redirect } from 'react-router-dom';
import * as BS from 'react-bootstrap'
@ -24,8 +24,20 @@ export default function App() {
const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
useEffect(() => {
if (localStorage.getItem("pk-darkmode")) {
localStorage.removeItem("pk-darkmode");
document.body.classList.add('dark-mode')
}
else {
localStorage.setItem("pk-darkmode", "true");
document.body.classList.remove('dark-mode')
}
forceUpdate();
}, []);
return (
<div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""} ${localStorage.getItem("pk-darkmode") ? "dark-mode" : ""}`}>
<div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
<Router history={history}>
<Navbar forceUpdate={forceUpdate} setIsSubmit={setIsSubmit} />
<div className="content">
@ -36,7 +48,7 @@ export default function App() {
}
</Route>
<Route exact path="/">
<Home isLoading={isLoading} setIsLoading={setIsLoading} isSubmit={isSubmit} setIsSubmit={setIsSubmit} isInvalid={isInvalid} setIsInvalid={setIsInvalid}/>
<Home forceUpdate={forceUpdate} isLoading={isLoading} setIsLoading={setIsLoading} isSubmit={isSubmit} setIsSubmit={setIsSubmit} isInvalid={isInvalid} setIsInvalid={setIsInvalid}/>
</Route>
<Route path="/profile">
<Public />

11
src/Components/Navbar.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import * as BS from 'react-bootstrap'
import Toggle from 'react-toggle'
@ -9,9 +9,14 @@ import history from "../History.js";
const Navbar = ({ setIsSubmit, forceUpdate}) => {
function toggleDarkMode() {
if (localStorage.getItem("pk-darkmode"))
if (localStorage.getItem("pk-darkmode")) {
localStorage.removeItem("pk-darkmode");
else localStorage.setItem("pk-darkmode", "true");
document.body.classList.add('dark-mode')
}
else {
localStorage.setItem("pk-darkmode", "true");
document.body.classList.remove('dark-mode')
}
forceUpdate();
};

10
src/Custom.scss
View File

@ -29,7 +29,6 @@ html, body {
.dark-mode {
background-color: $gray-800;
transition: background-color 0.3s ease;
}
.card-header {
@ -50,13 +49,11 @@ html, body {
.dark-mode .card-body {
color: $white;
background-color: $gray-800;
transition: background-color 0.3s ease;
}
.dark-mode .card-header {
color: $gray-100 !important;
background-color: $gray-900 !important;
transition: background-color 0.3s ease;
}
.navbar {
@ -68,7 +65,6 @@ html, body {
.dark-mode .navbar {
color: $gray-100;
background-color: $gray-900;
transition: background-color 0.3s ease;
}
.dark-mode .navbar-brand {
@ -83,14 +79,12 @@ html, body {
color: $gray-200;
border-color: #191c1f;
background-color: $gray-900;
transition: background-color 0.3s ease;
}
.dark-mode .form-control:disabled {
color: $gray-600;
border-color: #191c1f;
background-color: $gray-900;
transition: background-color 0.3s ease;
}
.dark-mode .form-control:focus {
@ -148,21 +142,18 @@ html, body {
color: $white;
background-color: $danger;
border: $gray-900;
transition: background-color 0.3s ease;
}
.dark-mode .alert-primary {
color: $white;
background-color: $primary;
border: $gray-900;
transition: background-color 0.3s ease;
}
.dark-mode .alert-light {
color: $white;
background-color: $gray-900;
border: #191c1f;
transition: background-color 0.3s ease;
}
code {
@ -177,7 +168,6 @@ code {
.dark-mode code {
color: white !important;
background-color: $gray-900;
transition: background-color 0.3s ease;
}
pre {