Arc boost - google docs dark mode

gistfile1.txt

/* --- 1. Document Canvas (The Paper) --- */
canvas.kix-canvas-tile-content {
    filter: invert(90%) hue-rotate(180deg);
}

/* --- 2. Main Editor Background & Document Boundaries --- */
.kix-appview-editor {
    background-color: #121212 !important;
}

/* Removes the borders and drop-shadows that delimit the page boundaries */
.kix-page,
.kix-page-paginated,
.kix-page-bottom {
    box-shadow: none !important;
    border: none !important;
}

/* --- 3. Top Header Container --- */
#docs-chrome {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333333 !important;
    border-top: 1px solid #333333 !important;
}

/* --- 4. Main Toolbar & Rulers (Inverts everything inside) --- */
#docs-toolbar-wrapper,
#docs-rulers {
    filter: invert(90%) hue-rotate(180deg) !important;
    border: none !important;
}

/* Fixes the white square mask in the top left corner of the rulers */
.docs-ruler-mask {
    background-color: #121212 !important;
    border: none !important;
}

/* --- 5. Left Sidebar & Right Companion Apps --- */
/* Aggressively targets every possible sidebar and header container */
.navigation-widget,
.left-sidebar-container,
.companion-app-switcher-container,
.docs-navigation-widget-header,
.navigation-widget-header,
.docs-navigation-header-container,
.docs-navigation-tab-group-header,
.docs-documenttabs-header,
.kix-documenttabs-header,
.kix-outlines-widget-header-contents,
.docs-documenttabs-container {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

/* --- 6. Text Colors & Title Fixes --- */
.docs-title-input-label {
    color: #e0e0e0 !important;
    visibility: hidden;
    -webkit-text-fill-color: #e0e0e0 !important;
    -webkit-text-stroke: 0px transparent !important;
}

.docs-title-input:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #333333 !important;
}

.docs-title-inner {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 0 !important;
}

/* Sidebar tab names and menus */
.menu-button,
.navigation-item,
.navigation-item-content,
.docs-navigation-tab-name,
.docs-navigation-tab-button,
.navigation-widget-header,
.docs-navigation-search-input {
    color: #f1f1f1 !important;
    opacity: 1 !important;
}

/* --- 7. Sidebar Icons --- */
.docs-icon,
.app-switcher-button-icon,
.docs-navigation-icon {
    filter: invert(80%) !important;
}

/* --- 8. Top Right Utility Area (Collaborators, History, Comments) --- */
.docs-titlebar-buttons,
#docs-header .docs-titlebar-badges {
    background-color: transparent !important;
}

/* Direct targeting of the action buttons that are not avatars */
.docs-titlebar-button {
    filter: invert(90%) !important;
}

/* --- Avatar Fixes --- */
/* Ensure avatars are not inverted by any other rules and use dynamic colors. */
/* Specifically resets filters on the avatar containers to correct dynamic background and face saturation. */
.docs-titlebar-badge,
.docs-material-avatar {
   filter: sepia(0) hue-rotate(0) saturate(1) contrast(1) invert(0) !important;
}

/* Prevent generic text/bg rules (like from Section 6) from affecting avatar interior elements. */
/* This allows dynamic background colors for letter-avatars to show correctly. */
.docs-titlebar-badge * {
   color: inherit !important;
   background-color: initial !important;
   fill: inherit !important;
}

/* Specific targeting for the letter-avatars to ensure the text color visibility against the dynamic background */
.docs-titlebar-collaborator-avatar-contents {
    color: #ffffff !important;
}

/* --- 9. Cursor Fix --- */
/* Forces the blinking caret to be white */
.kix-cursor-caret {
    border-color: #ffffff !important;
}