diff --git a/src/app.jsx b/src/app.jsx index 9d09548..d73e2a0 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,6 +1,5 @@ import './app.css'; -// import './cloak-mode.css'; import { useEffect, useLayoutEffect, diff --git a/src/cloak-mode.css b/src/cloak-mode.css index 5e2bc61..66c65a1 100644 --- a/src/cloak-mode.css +++ b/src/cloak-mode.css @@ -1,12 +1,15 @@ -@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Noto+Emoji&display=swap'); - -.status-pre-meta, -.status { - font-family: 'Flow Circular', 'Noto Emoji', cursive; +body.cloak .name-text, +body.cloak .status .content-container, +body.cloak .account-container :is(header, main > *:not(.actions)) { + text-decoration-thickness: 1.1em; + text-decoration-line: line-through; + text-rendering: optimizeSpeed; } -.status :is(img, video, audio), -.avatar { - filter: invert(0.5); +body.cloak .status :is(img, video, audio), +body.cloak .avatar, +body.cloak .emoji, +body.cloak .header-banner { + filter: contrast(0) !important; background-color: #000 !important; } diff --git a/src/main.jsx b/src/main.jsx index e2006db..e7eec37 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,5 +1,7 @@ import './index.css'; +import './cloak-mode.css'; + import { render } from 'preact'; import { HashRouter } from 'react-router-dom'; @@ -35,3 +37,7 @@ setTimeout(() => { localStorage.removeItem('settings:boostsCarousel'); } catch (e) {} }, 5000); + +window.__CLOAK__ = () => { + document.body.classList.toggle('cloak'); +};