Colour themes for the new Material You–styled Google Drive.
M3 Themes for Google Drive by winghongchan

Details
Authorwinghongchan
LicenseGPL-3.0-or-later
Categorygoogle
Created
Updated
Size52 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This userstyle lets you change the colours in Google Drive similar to how you can change themes in Android 12 and up.
Included colour themes: red, yellow, green, blue, violet, nord
Each theme supports light and dark modes.
Latest updates
-
2023.07.21
- Search bar fix. Should be more resilient to randomly changing class names now.
- The “Clear all” button that appears when using filter chips is now legible in dark themes.
-
2023.07.05
- Search bar and search suggestion fixes for Google Workspace accounts
- The unfilled portion of the storage meter is now a dark colour when in dark mode using a Google Workspace account
- The red “Get more storage” button is now legible in dark mode
-
2023.06.04
- Updated the regex that targets the details sidebar (it’s an iframe)
- NEW orange theme
Browser-specific notes
Firefox
M3 Themes for Google Drive uses the newer :has()
selector. Support for it in Firefox is currently in development, but you can enable support for it by going to about:config and setting layout.css.has-selector.enabled to true. Follow along with Mozilla’s work on this at Bugzilla.
Chromium-based browsers have full support of the :has()
selector.
If you are using an older version of Firefox (prior to version 113), you may not see some hover and focus effects because they rely on the color-mix() function to allow for theming to be more consistently implemented. To enable support for it, go to about:config and set layout.css.color-mix.enabled to true. Firefox 113 and newer has this enabled by default.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name M3 Themes for Google Drive
@namespace userstyles.world/user/winghongchan
@version 2023.07.21
@description Colour themes for the new Material You–styled Google Drive.
@author Walter winghongchan
@supportURL https://github.com/winghongchan/m3-themer-gdrive/issues
@license GPL-3.0-or-later
@preprocessor less
@var select dynamic-colour-theme "Colour theme" ["Red", "Orange", "Yellow", "Green", "Blue", "Violet", "Nord*"]
@var select light-dark-auto "Light/Dark Mode" ["Light", "Dark", "Auto:Use device theme*"]
==/UserStyle== */
// Please note
// If you change things in the configuration dialog, you may have to turn M3 Themable Google Drive off and on again to apply changes.
// To users of Firefox: the has() selector, which M3 Themable Google Drive uses, is currently in development. You can enable it by going to about:config and setting layout.css.has-selector.enabled to true.
// To users of Firefox versions before 113: color-mix() was in development during these older versions and needs to be enabled manually by going to about:config and setting layout.css.color-mix.enabled to true.
@-moz-document url-prefix("https://drive.google.com/drive/"), regexp("https:\\/\\/drive\\.google\\.com.*\\/odp\\/embed\\?host_context=CAgSGCICIAEqAggBMgoIARABGAEgASgBOAFIARohZHJpdmUud2ViLWZyb250ZW5kXzIwMjMwN.*&origin=https%3A%2F%2Fdrive.google.com&odbc=1&online=1") {
// Recolouring
.light-theme() when (@dynamic-colour-theme = Red) {
--m3themer-primary: #a03f28;
--m3themer-on-primary: #ffffff;
--m3themer-primary-container: #ffdad2;
--m3themer-on-primary-container: #3d0700;
--m3themer-secondary: #7a564d;
--m3themer-on-secondary: #ffffff;
--m3themer-secondary-container: #ffdad2;
--m3themer-on-secondary-container: #2e150e;
--m3themer-tertiary: #6e5d28;
--m3themer-on-tertiary: #ffffff;
--m3themer-tertiary-container: #f9e09f;
--m3themer-on-tertiary-container: #241a00;
--m3themer-error: #ba1a1a;
--m3themer-on-error: #ffffff;
--m3themer-error-container: #ffdad6;
--m3themer-on-error-container: #410002;
--m3themer-background: #FFF8F6;
--m3themer-on-background: #201a19;
--m3themer-surface-dim: #E8D6D2;
--m3themer-surface: #FFF8F6;
--m3themer-surface-bright: #FFF8F6;
// The HCT color picker at https://www.figma.com/community/plugin/1227923985322908257/HCT-color-picker was very useful in this. Turns out, HCT stands for hue, chroma, tone and is what the Material Design website means when they refer to different tones. HCT is a new colour system Google invented. I’m adopting it mostly so the dark theme looks better with the surface bright role.
--m3themer-surface-container-lowest: #FFFFFF;
--m3themer-surface-container-low: #FFF0ED;
--m3themer-surface-container: #FCEAE6;
--m3themer-surface-container-high: #F7E4E0;
--m3themer-surface-container-highest: #F1DFDB;
--m3themer-on-surface: #201a19;
--m3themer-on-surface-variant: #534340;
--m3themer-inverse-surface: #362f2d;
--m3themer-inverse-on-surface: #fbeeeb;
--m3themer-outline: #85736f;
--m3themer-outline-variant: #d8c2bd;
}
.light-theme() when (@dynamic-colour-theme = Orange) {
// Generated by the Material Theme Generator https://m3.material.io/theme-builder
// Using this image: https://unsplash.com/photos/ZwPuquZBnyM
--m3themer-primary: #7c563f;
--m3themer-on-primary: #ffffff;
--m3themer-primary-container: #ffdbc9;
--m3themer-on-primary-container: #2f1504;
--m3themer-secondary: #695c54;
--m3themer-on-secondary: #ffffff;
--m3themer-secondary-container: #f2dfd5;
--m3themer-on-secondary-container: #231914;
--m3themer-tertiary: #615f4c;
--m3themer-on-tertiary: #ffffff;
--m3themer-tertiary-container: #e7e3cb;
--m3themer-on-tertiary-container: #1d1c0d;
--m3themer-error: #ba1a1a;
--m3themer-on-error: #ffffff;
--m3themer-error-container: #ffdad6;
--m3themer-on-error-container: #410002;
--m3themer-background: #FFF8F5;
--m3themer-on-background: #221A15;
--m3themer-surface-dim: #E7D7CF;
--m3themer-surface: #FFF8F5;
--m3themer-surface-bright: #FFF8F5;
--m3themer-surface-container-lowest: #FFFFFF;
--m3themer-surface-container-low: #FFF1EA;
--m3themer-surface-container: #FCEAE2;
--m3themer-surface-container-high: #F6E5DD;
--m3themer-surface-container-highest: #F0DFD7;
--m3themer-on-surface: #221A15;
--m3themer-on-surface-variant: #4c4542;
--m3themer-inverse-surface: #1A120D;
--m3themer-inverse-on-surface: #F0DFD7;
--m3themer-outline: #7e7572;
--m3themer-outline-variant: #cfc4c0;
}
.light-theme() when (@dynamic-colour-theme = Yellow) {
--m3themer-primary: #626033;
--m3themer-on-primary: #ffffff;
--m3themer-primary-container: #e9e5ac;
--m3themer-on-primary-container: #1e1d00;
--m3themer-secondary: #605f51;
--m3themer-on-secondary: #ffffff;
--m3themer-secondary-container: #e6e3d1;
--m3themer-on-secondary-container: #1d1c11;
--m3themer-tertiary: #52625a;
--m3themer-on-tertiary: #ffffff;
--m3themer-tertiary-container: #d5e7dc;
--m3themer-on-tertiary-container: #101e18;
--m3themer-error: #ba1a1a;
--m3themer-on-error: #ffffff;
--m3themer-error-container: #ffdad6;
--m3themer-on-error-container: #410002;
--m3themer-background: #FDF9EC;
--m3themer-on-background: #1c1c19;
--m3themer-surface-dim: #DEDACD;
--m3themer-surface: #FDF9EC;
--m3themer-surface-bright: #FDF9EC;
--m3themer-surface-container-lowest: #FFFFFF;
--m3themer-surface-container-low: #F8F4E6;
--m3themer-surface-container: #F2EEE0;
--m3themer-surface-container-high: #ECE8DB;
--m3themer-surface-container-highest: #E6E2D5;
--m3themer-on-surface: #1c1c19;
--m3themer-on-surface-variant: #484741;
--m3themer-inverse-surface: #31302e;
--m3themer-inverse-on-surface: #f4f0ec;
--m3themer-outline: #797770;
--m3themer-outline-variant: #c9c6be;
}
.light-theme() when (@dynamic-colour-theme = Green) {
--m3themer-primary: #496727;
--m3themer-on-primary: #ffffff;
--m3themer-primary-container: #c9ee9e;
--m3themer-on-primary-container: #0f2000;
--m3themer-secondary: #59614e;
--m3themer-on-secondary: #ffffff;
--m3themer-secondary-container: #dde6cd;
--m3themer-on-secondary-container: #171e0e;
--m3themer-tertiary: #426462;
--m3themer-on-tertiary: #ffffff;
--m3themer-tertiary-container: #c5eae7;
--m3themer-on-tertiary-container: #00201f;
--m3themer-error: #ba1a1a;
--m3themer-on-error: #ffffff;
--m3themer-error-container: #ffdad6;
--m3themer-on-error-container: #410002;
--m3themer-background: #F9FAEF;
--m3themer-on-background: #1b1c18;
--m3themer-surface-dim: #D9DBD0;
--m3themer-surface: #F9FAEF;
--m3themer-surface-bright: #F9FAEF;
--m3themer-surface-container-lowest: #FFFFFF;
--m3themer-surface-container-low: #F3F5E9;
--m3themer-surface-container: #EEEFE4;
--m3themer-surface-container-high: #E8E9DE;
--m3themer-surface-container-highest: #E2E3D8;
--m3themer-on-surface: #1A1C16;
--m3themer-on-surface-variant: #45483f;
--m3themer-inverse-surface: #30312d;
--m3themer-inverse-on-surface: #f2f1eb;
--m3themer-outline: #75786e;
--m3themer-outline-variant: #c5c8bc;
}
.light-theme() when (@dynamic-colour-theme = Blue) {
--m3themer-primary: #255fa4;
--m3themer-on-primary: #ffffff;
--m3themer-primary-container: #d5e3ff;
--m3themer-on-primary-container: #001c3b;
--m3themer-secondary: #555f70;
--m3themer-on-secondary: #ffffff;
--m3themer-secondary-container: #d9e3f8;
--m3themer-on-secondary-container: #121c2b;
--m3themer-tertiary: #6e5675;
--m3themer-on-tertiary: #ffffff;
--m3themer-tertiary-container: #f7d8fe;
--m3themer-on-tertiary-container: #27142f;
--m3themer-error: #ba1a1a;
--m3themer-on-error: #ffffff;
--m3themer-error-container: #ffdad6;
--m3themer-on-error-container: #410002;
--m3themer-background: #F9F9FF;
--m3themer-on-background: #191C20;
--m3themer-surface-dim: #D9DAE0;
--m3themer-surface: #F9F9FF;
--m3themer-surface-bright: #F9F9FF;
--m3themer-surface-container-lowest: #FFFFFF;
--m3themer-surface-container-low: #F3F3FA;
--m3themer-surface-container: #EDEDF4;
--m3themer-surface-container-high: #E7E8EE;
--m3themer-surface-container-highest: #E1E2E9;
--m3themer-on-surface: #191C20;
--m3themer-on-surface-variant: #43474e;
--m3themer-inverse-surface: #2f3033;
--m3themer-inverse-on-surface: #f1f0f4;
--m3themer-outline: #74777f;
--m3themer-outline-variant: #c4c6cf;
}
.light-theme() when (@dynamic-colour-theme = Violet) {
--m3themer-primary: #6750A4;
--m3themer-on-primary: #ffffff;
--m3themer-primary-container: #EADDFF;
--m3themer-on-primary-container: #21005D;
--m3themer-secondary: #625B71;
--m3themer-on-secondary: #ffffff;
--m3themer-secondary-container: #E8DEF8;
--m3themer-on-secondary-container: #1D192B;
--m3themer-tertiary: #7D5260;
--m3themer-on-tertiary: #ffffff;
--m3themer-tertiary-container: #FFD8E4;
--m3themer-on-tertiary-container: #31111D;
--m3themer-error: #B3261E;
--m3themer-on-error: #ffffff;
--m3themer-error-container: #F9DEDC;
--m3themer-on-error-container: #410E0B;
--m3themer-background: #FDF7FF;
--m3themer-on-background: #1D1B20;
--m3themer-surface-dim: #DED8E0;
--m3themer-surface: #FDF7FF;
--m3themer-surface-bright: #FDF7FF;
--m3themer-surface-container-lowest: #FFFFFF;
--m3themer-surface-co...