TamperMonkey script to make a Quip doc look like a paper in Word or Google docs.

QuipDocEditor.js

// ==UserScript==
// @name         Make a quip doc an actual Doc
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add a doc-like user interface to quip.
// @author       You
// @match        https://quip.com
// @icon         https://www.google.com/s2/favicons?sz=64&domain=quip.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const DARK_THEME_CLASSNAME = "dark-theme"

    const doc = document.querySelector(".editor-drag-overlay").parentElement
    const background = doc.parentElement
    const bodyElement = document.querySelector("body")

    // These styles create the doc-against-a- background effect
    // by adding rounder doc borders and slight shadow.
    // Note the shadow in dark mode won't do much.
        doc.style.paddingTop = "3em";
        doc.style.borderWidth = "0px 0px 0px 0px";
        doc.style.borderColor = "rgba(255, 255, 255, 1)";
        doc.style.borderRadius = "6px";
        doc.style.borderStyle = "solid";
        doc.style.boxShadow = "0px 5px 15px -2px rgba(10, 16, 34, 0.4)";


    if (bodyElement.classList.contains(DARK_THEME_CLASSNAME)) {
        // Material Theme Dark
        // ------------------
        // These are the values that Material design uses in their designs
        // The two hexes can be swapped depending on your style preferences
        // I prefer to have the doc the lighter, and the background darker.
        // but that's just me
        // -------------------
        // Darker material hex: "#1D1D1D";
        // Lighter material hex: "#121212";


        // Material Theme Dark
        //   -- Note: If you'd like the colors inverted, swap the values
        doc.style.backgroundColor="#1D1D1D";
        background.style.backgroundColor="#121212";


    } else {
        // Mimics Google Docs
        doc.style.backgroundColor = "#FFFFFF";
        background.style.backgroundColor="#F2F2F2";
    }

})();