PocketBase Dark Mode

Adds a simple css inject that inverts the colors except for images on PocketBase UI.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name        PocketBase Dark Mode
// @namespace   ModLabs
// @version     1.0.0-GitHub
// @description Adds a simple css inject that inverts the colors except for images on PocketBase UI.
// @license     Apache License 2.0
// @author      ModLabs
// @match       *://*/*
// @grant       none
// ==/UserScript==

const isPocketBaseAdminPage = () =>
  !!document.querySelector(
    'link[rel="prefetch"][href="./libs/tinymce/skins/ui/pocketbase/skin.min.css"][as="style"]'
  );

let pbIntervalId = null;

if (isPocketBaseAdminPage()) {
  pbIntervalId = setInterval(() => {
    if (!document.querySelector("#pb_dark_mode_patch")) {
      const el = document.createElement("style");
      el.id = "pb_dark_mode_patch";
      el.textContent = `
        body { filter: invert(1); }
        img  { filter: invert(1); }
      `;
      document.head.appendChild(el);
    }
  }, 1);
}