figma-april-fools-windows-95-style.js

// Figma's 2024 April Fools' Day Windows 95 extension. It's messy, but cool

// for buttons
const buttons = document.getElementsByTagName("button");
const buttonList = Array.from(buttons);
buttonList.map((b) =>
  b.setAttribute(
    "style",
    `
        border-radius: 0;
        background: #d2d6da;
        box-shadow: -2px -2px #000 inset, 2px 2px #fff inset, -4px -4px #a7aeb4 inset; 
        color: rgb(10, 10, 10) !important;
      `
  )
);

// for button's svg
const buttonsvgs = document.querySelectorAll(`
      button span svg,
      span[class^="filename_view--pathSeparator"],
      span[class^="filename_view--folderNameInteractive"],
      span[class^="filename_view--titleWithToggleContainer"],
      div[class^="filename_view--folderNameInteractive"],
      div[class^="filename_view--folder"] span
    `);
const buttonsvgsList = Array.from(buttonsvgs);
buttonsvgsList.map((b) =>
  b.setAttribute(
    "style",
    `fill: rgb(10, 10, 10) !important; color: rgb(10, 10, 10) !important;`
  )
);

// zoom amount button
const zoomAmountText = document.querySelector(
  'div [data-testid="zoom-amount"]'
);
zoomAmountText.setAttribute("style", `color: rgb(10, 10, 10) !important;`);

// set primary color, --ramp-blue-500 to rgb(6, 0, 132)
document
  .querySelector("body")
  .style.setProperty("--ramp-blue-500", "rgb(6, 0, 132)");

// main bar
const mainToolbar = document.querySelector('div [aria-label="Main toolbar"]');
mainToolbar.setAttribute(
  "style",
  `
      border-radius: 0;
      background: #d2d6da;
      box-shadow: -2px -2px #000 inset, 2px 2px #fff inset, -4px -4px #a7aeb4 inset; 
      `
);

const mainToolbarToolBtns = document.querySelectorAll(
  '[role="button"], #toolbar-action-component-insert, div [data-testid="set-tool-pen"], div [data-testid="set-tool-rectangle"], div [data-testid="set-tool-frame"]'
);
const mainToolbarToolBtnsList = Array.from(mainToolbarToolBtns);
mainToolbarToolBtnsList.map((b) =>
  b.setAttribute(
    "style",
    `
          border-radius: 0;
          background: #d2d6da;
          box-shadow: -2px -2px #000 inset, 2px 2px #fff inset, -4px -4px #a7aeb4 inset; 
        `
  )
);
const modeToggle = document.querySelector(
  `div[class^="mode_switcher_toggle--toggleWrapper"]`
);
modeToggle.setAttribute(
  "style",
  `border-radius: 0; background: transparent; box-shadow: none`
);

const mainToolbarToolBtnContent = document.querySelectorAll(
  `
        [role="button"] svg,
        #toolbar-action-component-insert svg,
        span[class^="toolbar_view--actionButtonContainer--"] span svg,
        div[data-testid="set-tool-pen"] div span svg,
        div[data-testid="set-tool-rectangle"] div span svg,
        div[data-testid="set-tool-frame"] div span svg,
        div[data-testid="present-as-prototype"] div span svg
      `
);
const mainToolbarToolBtnContentList = Array.from(mainToolbarToolBtnContent);
mainToolbarToolBtnContentList.map((b) =>
  b.setAttribute("style", `fill: rgb(10, 10, 10) !important;`)
);

// left side - diviver
const pageElms = document.querySelectorAll(
  'div[class^="pages_panel--pageRow"], div[class^="pages_panel--pagesPanel"], div[class^="properties_panel--panelContainer"]'
);
const pageElmsList = Array.from(pageElms);
pageElmsList.map((d) => d.setAttribute("style", ` background: #d2d6da;`));
const panelElms = document.querySelectorAll(
  'div[class^="pages_panel--pagesList"], div[class^="object_row--row"]'
);
const panelElmsList = Array.from(panelElms);
panelElmsList.map((d) =>
  d.setAttribute("style", d.getAttribute("style") + ` background: #d2d6da;`)
);
const layerElms = document.querySelectorAll('div[class^="object_row--row"]');
const layerElmsList = Array.from(layerElms);
layerElmsList.map((d) =>
  d.setAttribute("style", d.getAttribute("style") + ` background: #d2d6da;`)
);

// right side - cachedSubtree
const rightPanelElms = document.querySelectorAll(
  'div[class^="properties_panel--propertiesPanel"]'
);
const rightPanelElmsList = Array.from(rightPanelElms);
rightPanelElmsList.map((d) => d.setAttribute("style", ` background: #d2d6da;`));
const cachedSubtreeElms = document.querySelectorAll(
  'div[class^="cachedSubtree"]'
);
const cachedSubtreeElmsList = Array.from(cachedSubtreeElms);
cachedSubtreeElmsList.map((d) =>
  d.setAttribute("style", d.getAttribute("style") + ` background: #d2d6da;`)
);

// small tabs
const smallTabsElms = document.querySelectorAll(
  'div[class^="pages_panel--tab--"]::before'
);
const smallTabsElmsList = Array.from(smallTabsElms);
smallTabsElmsList.map((d) =>
  d.setAttribute("style", d.getAttribute("style") + ` background: #d2d6da;`)
);