Light Mode Theme Using Tampermonkey

If you’d like to set up your own light mode theme for browsing Unvale, this unofficial user script is for you! This page covers a step by step tutorial on how to install a browser extension and script that will work on most browsers to add light mode to Unvale.

Ponyo

Ponyo

— 3 min read
Light Mode Theme Using Tampermonkey

If you’d like to set up your own light mode theme for browsing Unvale, this unofficial user script is for you! This page covers a step by step tutorial on how to install a browser extension and script that will work on most browsers to add light mode to Unvale.

This tutorial uses a browser extension called Tampermonkey, which makes it possible to use client side scripts to change the appearance of Unvale, without affecting anyone else's experience while using the site. 

Tampermonkey is a well known extension but is not associated with Unvale. It’s important to make sure you are cautious when installing user scripts, and to never install anything from strangers without ensuring you know what they do and where they’re from! 

Keywords:

Browser: A web browser is how you access the internet. Most people use Chrome, but there’s lots of different ones. 

Extension: A piece of software made to help you customize your browser. 

Script: A piece of code made to modify a website's appearance.

Client: Your phone, tablet or computer is a ‘client’ accessing the Unvale website. 

Client side script: A piece of code that uses an extension to operate in your device’s browser. 

Supported browsers:

  • Chrome
  • Microsoft Edge
  • Firefox
  • Safari 
  • Opera

Installing: 

  1. Install Tampermonkey
  1. Navigate to the Tampermonkey Dashboard
  • You can access the dashboard by clicking the extensions button on your toolbar, then the Tampermonkey icon, and finally selecting ‘Dashboard’.
  • On most browsers the extension button looks like a puzzle piece icon!
  • On Opera the extensions button is a cube.
  1. Click the new script button 
  • This will open a new script with a basic template. 
  1. Erase the contents of the template script 

  1. Copy the userscript from below and paste it into the empty template

// ==UserScript==

// @name         Unvale — force light mode (unofficial)

// @namespace    https://unvale.io

// @version      1.0.0

// @description  Strips .dark from <html> so light :root / non-dark: styles win. Unofficial; may flicker.

// @author       you

// @match        https://unvale.io/*

// @match        https://www.unvale.io/*

// @match        https://*.unvale.io/*

// @grant        none

// @run-at       document-start

// ==/UserScript==


(function () {

  'use strict';


  /** Remove next-themes dark class so Tailwind dark: and .dark tokens don’t apply */

  function stripDarkClass() {

    const el = document.documentElement;

    if (!el) return;

    if (el.classList.contains('dark')) {

      el.classList.remove('dark');

    }

  }


  // As early as possible

  stripDarkClass();


  function observe() {

    const el = document.documentElement;

    if (!el) return;


    stripDarkClass();


    const mo = new MutationObserver(() => {

      stripDarkClass();

    });

    mo.observe(el, {

      attributes: true,

      attributeFilter: ['class'],

    });

  }


  if (document.documentElement) {

    observe();

  } else {

    new MutationObserver(function (_, o) {

      if (document.documentElement) {

        o.disconnect();

        observe();

      }

    }).observe(document, { childList: true, subtree: true });

  }

})();

  1. Click ‘File’ and ‘Save’ 
  • This will save the light mode script to your Tampermonkey, and you’re done!

FAQ:

As this script is unofficial, staff can’t provide troubleshooting via support tickets. If something isn’t working, double check the points below or check the official Tampermonkey FAQ: https://www.tampermonkey.net/faq.php?locale=en 

To use this script on mobile browser:

  • Install Firefox and follow the tutorial above. 
  • To access your extensions on Firefox mobile, click the three dots in the top right corner.

If the script did not work:

  1. Check that the script was copied exactly
  2. Enable developer mode in Tampermonkey
  3. Enable ‘Allow user scripts’ in Tampermonkey

To disable light mode:

  1. Click the extensions button (Puzzle piece/cube icon) in your toolbar
  2. Click the Tampermonkey icon
  3. Toggle ‘Unvale — force light mode (unofficial)’ to OFF

As this script does not work in the app, you may like to create a browser shortcut that will act like an Unvale app on your homepage. Here’s how!

https://blog.unvale.io/unvale-mobile-app-look-a-like/ 

Read more