Dark mode for Mem.ai

script.js

// ==UserScript==
// @name        Mem.ai dark mode
// @namespace   Violentmonkey Scripts
// @match       https://mem.ai/*
// @grant       none
// @version     1.0
// @author      Will Willems
// @description 12/02/2023, 15:00:05
// ==/UserScript==


let stylesheet = [...document.styleSheets].at(-1) // random

let nameSelector = '.css-qkst4a'
let tagsSelector = '.css-1tybtsk'
let moreTagsSelector = 'css-1n8j4i'
let footerSelector = '.css-1pjyud6'

const CSS = (strings, ...a) => stylesheet.insertRule(strings.reduce((acc, cur, i) => acc + cur + (a[i] ?? ''), ''), stylesheet.cssRules.length)
const DOM = (...a) => fn => setTimeout(() => ([...document.querySelectorAll(...a)]).forEach(fn), 1000)

// SIDEBAR //
// HEADER
CSS`${nameSelector} { color: #DEDFDF; }`

// SIDEBAR //
// BODY
CSS`.menu-pane { background: #2C2D2F; color: #ABACAB; }`;
CSS`.menu .item { background: none; }`; // remove item bg`s and let pane take care of it
CSS`.menu .item:hover { background: inherit; color: inherit; }` // remove hover styles
CSS`.menu .item.active { background: #535354; color: inherit; }`

CSS`.menu .item svg { color: #AAABAC }`
// CSS`.item.tasks-button svg { color: #AAABAC }`

// BODY TAGS
CSS`.menu ${tagsSelector} .item > *{
  color: inherit;
  background: inherit;
}`
// CSS`.menu ${tagsSelector} .item > *:first-child::before{
//   content: "# ";
// }`


// BODY NOTE
CSS`.home-note-container { border: none }`

// SIDEBAR //
// FOOTER //
CSS`${footerSelector} {
  background: none;

  border-top: none;

  display: flex;
  flex-direction: row;
  justify-content: start;

  padding: 16px 8px;

}`
CSS`.menu ${footerSelector} .item {
  padding: 0px;

}`
CSS`.menu ${footerSelector} .item .tag-name {
  display: none
}` // Don't display tags

let sidebarBodySelector = '.css-895lgd'
CSS`${sidebarBodySelector} {
  max-height: calc(100% - 50px);
}` // quick hack



// TYPOGRAPHY //
CSS`.note [data-type="note"].mention.light, .note [data-type="note"].mention.dark { color: #44A2E5; }`
CSS`.note [data-type="note"].mention.light:hover, .note [data-type="note"].mention.dark:hover { background: none }`



// CSS`.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
//   margin: 0em;
// }`





// MAIN //
CSS`.app-container {
  background: #1D1E1F;
}`
CSS`.note-editor-top-bar {
  background: none;
}` // delegate BG to .note-editor
CSS`.note-editor-note-body-container {
  background: none;
}` // delegate BG to .note-editor
CSS`.suggested-actions-container {
  background: none;
}` // delegate BG to .note-editor
CSS`.suggested-actions-empty-gradient-div {
  background: none;
}` // temp remove gradient background
CSS`.note-editor {
  background: none;

  filter: invert(1) hue-rotate(0.5turn);
}` // includes quick filter hack
CSS`.note-editor-border {
  border: none;
  box-shadow: none;
}` // Dank AF class
CSS`.light-mode .app-top-bar, .dark-mode .app-top-bar {
  background: none;
}`

CSS`.sidenote-container {
  background: none;
}`



// MEM X SIDEBAR //
CSS`.note-editor-sidebar-container {
  filter: invert(1) hue-rotate(0.5turn);
}`
CSS`.note-editor-sidebar-section-memX, .note-editor-sidebar-section {
  background: none;
}`


// TOP BAR

CSS`.app-top-bar-button.logo {
  filter: saturate(0) brightness(2);
}`

CSS`.light-mode .app-top-bar-search-container, .dark-mode .app-top-bar-search-container {
  background: none;
}`
CSS`.light-mode .app-top-bar-search-container:not(.searching):hover, .dark-mode .app-top-bar-search-container:not(.searching):hover {
  background: none;
}`
CSS`.app-top-bar-button.global-compose-button {
  width: 36px;
  box-shadow: none;
}`
CSS`.app-top-bar-button.global-compose-button svg { margin: 0 0 -1px -1px; }` // hackey
DOM('.global-compose-button')(e => e.lastChild.remove())



// NOTE HEADER
CSS`.note-viewers, .sharing-status-button-normal { display: none; }`
CSS`.sharing-status-button-short { display: initial !important; }`



let homeHeaderSelector = '.css-1teh2yj'

// /home //
CSS`${homeHeaderSelector} {
  background: none;
}`

// this needs a different BG or something else
CSS`.slice-event-container:hover, .slice-event-container.is-highlighted {
  background: none;
}`

CSS`.timeline-note-large {
  background: none;
  border: none;
}`
CSS`.mock-quill-input {
  background: none;
}`

CSS`.timeline-note-large.composer::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #1D1E1F);
}`
CSS`.slice-scroll-container {
  filter: invert(1) hue-rotate(0.5turn);
}` // temp fix for /home
CSS`.slice-event-container:not(.Contact):not(.SliceCollectionItem):not(.SliceCollectionAddItem):not(.SliceSkeletonNote):after {
  display: none;
}`// remove black borders between home items