New feature: cloak mode

src/app.jsx

@@ -208,6 +208,12 @@ function App() {
     }
   }, [snapStates.settings.shortcutsViewMode]);
 
+  // Add/Remove cloak class to body
+  useEffect(() => {
+    const $body = document.body;
+    $body.classList.toggle('cloak', snapStates.settings.cloakMode);
+  }, [snapStates.settings.cloakMode]);
+
   return (
     <>
       <Routes location={nonRootLocation || location}>

src/cloak-mode.css

@@ -1,6 +1,8 @@
 body.cloak .name-text,
 body.cloak .status .content-container,
-body.cloak .account-container :is(header, main > *:not(.actions)) {
+body.cloak .account-container :is(header, main > *:not(.actions)),
+body.cloak .header-account,
+body.cloak .account-block {
   text-decoration-thickness: 1.1em;
   text-decoration-line: line-through;
   text-rendering: optimizeSpeed;

src/pages/settings.jsx

@@ -259,6 +259,18 @@ function Settings({ onClose }) {
                 </p>
               </div>
             </li>
+            <li>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={snapStates.settings.cloakMode}
+                  onChange={(e) => {
+                    states.settings.cloakMode = e.target.checked;
+                  }}
+                />{' '}
+                Cloak mode
+              </label>
+            </li>
             <li>
               <button
                 type="button"

src/utils/states.js

@@ -51,6 +51,7 @@ const states = proxy({
       store.account.get('settings-contentTranslationTargetLanguage') || null,
     contentTranslationHideLanguages:
       store.account.get('settings-contentTranslationHideLanguages') || [],
+    cloakMode: store.account.get('settings-cloakMode') ?? false,
   },
 });
 
@@ -88,6 +89,9 @@ subscribe(states, (changes) => {
     if (path?.[0] === 'shortcuts') {
       store.account.set('shortcuts', states.shortcuts);
     }
+    if (path.join('.') === 'settings.cloakMode') {
+      store.account.set('settings-cloakMode', !!value);
+    }
   }
 });