sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: further reduce darkmode init flash (#5701)

Browse Source 
* feat: further reduce darkmode init flash

* fix lint

* tweak doc

* colocate code
This commit is contained in:
David Luzar 2022-09-16 17:12:24 +02:00 committed by GitHub
parent 7eaf47c9d4
commit 9cccac1458
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/index.html
View File

@ -52,6 +52,25 @@
content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
/>
<!------------------------------------------------------------------------->
<!-- to minimize white flash on load when user has dark mode enabled -->
<script>
try {
//
const theme = window.localStorage.getItem("excalidraw-theme");
if (theme === "dark") {
document.documentElement.classList.add("dark");
}
} catch {}
</script>
<style>
html.dark {
background-color: #121212;
color: #fff;
}
</style>
<!------------------------------------------------------------------------->
<script>
// Redirect Excalidraw+ users which have auto-redirect enabled.
//
@ -98,7 +117,7 @@
/>
<link rel="stylesheet" href="fonts.css" type="text/css" />
<% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD === "true") { %>
<% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD==="true" ) { %>
<script>
{
const _WebSocket = window.WebSocket;
@ -155,7 +174,7 @@
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
white-space: nowrap;
user-select: none;
}

4
src/css/app.scss
View File

@ -34,6 +34,6 @@
}
.LoadingMessage--dark {
background-color: $oc-black;
color: $oc-white;
background-color: #121212;
color: #ced4da;
}

3
src/excalidraw-app/index.tsx
View File

@ -524,6 +524,9 @@ const ExcalidrawWrapper = () => {
useEffect(() => {
localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_THEME, theme);
// currently only used for body styling during init (see public/index.html),
// but may change in the future
document.documentElement.classList.toggle("dark", theme === THEME.DARK);
}, [theme]);
const onChange = (