Dark theme for UC3M sites - inspired by Google Drive dark theme
UC3M - Dark by alonso-herreros
Details
Authoralonso-herreros
LicenseCC-SA
Categoryuc3m.es
Created
Updated
Size36 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name UC3M - Dark
@version 20250219.16.33
@namespace https://userstyles.world/user/alonso-herreros
@description Dark theme for UC3M sites - inspired by Google Drive dark theme
@author alonso-herreros
@license CC-SA
==/UserStyle== */
@-moz-document domain("uc3m.es") {
/* ===== Definitions ===== */
:root {
--dt-on-background: #e3e3e3;
--dt-on-background-secondary: #ababab;
--dt-background: #131314;
--dt-on-surface: #e3e3e3;
--dt-inverse-surface: #e3e3e3;
--dt-on-surface-secondary: #ababab;
--dt-on-surface-variant: #c4c7c5;
--dt-surface-variant: #444746;
--dt-inverse-on-surface: #303030;
--dt-surface: #131314;
--dt-surface-action: #222222;
--dt-surface-tint: #d1e1ff;
--dt-shadow-elevation-1: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
--dt-shadow-elevation-2: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
--dt-shadow-elevation-3: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--dt-shadow-elevation-4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--dt-shadow-elevation-5: 0px 8px 10px -6px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
--dt-surface-container-lowest: #0E0E0E;
--dt-surface-container-low: #1B1B1B;
--dt-surface-container: #1E1F20;
--dt-surface-container-high: #282A2C;
--dt-surface-container-highest: #333537;
--dt-surface-dim: #131313;
--dt-surface-bright: #37393B;
--dt-scrim: rgba(0, 0, 0, 0.32);
--dt-scrim-2x: rgba(0, 0, 0, 0.64);
--dt-on-primary-container: #d3e3fd;
--dt-primary-container-icon: #d3e3fd;
--dt-primary-container-link: #d3e3fd;
--dt-primary: #a8c7fa;
--dt-primary-action: #a8c7fa;
--dt-primary-action-stateful: #d4dff1;
--dt-primary-outline: #a8c7fa;
--dt-primary-action-state-layer: #1b6ef3;
--dt-primary-container: #0842a0;
--dt-on-primary: #062e6f;
--dt-primary-icon: #062e6f;
--dt-primary-link: #062e6f;
--dt-on-secondary-container: #c2e7ff;
--dt-secondary-container-icon: #c2e7ff;
--dt-secondary-container-link: #c2e7ff;
--dt-secondary: #7fcfff;
--dt-secondary-action: #7fcfff;
--dt-secondary-action-stateful: #7fcfff;
--dt-secondary-outline: #7fcfff;
--dt-secondary-action-state-layer: #047db7;
--dt-secondary-container: #004a77;
--dt-on-secondary: #035;
--dt-secondary-icon: #035;
--dt-secondary-link: #035;
--dt-on-tertiary-container: #c4eed0;
--dt-tertiary-container-icon: #c4eed0;
--dt-tertiary-container-link: #c4eed0;
--dt-tertiary: #6dd58c;
--dt-tertiary-action: #6dd58c;
--dt-tertiary-action-stateful: #6dd58c;
--dt-tertiary-outline: #6dd58c;
--dt-tertiary-action-state-layer: #198639;
--dt-tertiary-container: #0f5223;
--dt-on-tertiary: #0a3818;
--dt-tertiary-icon: #0a3818;
--dt-tertiary-link: #0a3818;
--dt-on-neutral-container: #e3e3e3;
--dt-neutral-container-icon: #e3e3e3;
--dt-neutral-container-link: #e3e3e3;
--dt-neutral: #ababab;
--dt-neutral-action: #ababab;
--dt-neutral-action-stateful: #ababab;
--dt-neutral-outline: #ababab;
--dt-neutral-action-state-layer: #ababab;
--dt-neutral-container: #474747;
--dt-on-neutral: #1f1f1f;
--dt-neutral-icon: #ababab;
--dt-neutral-link: #ababab;
--dt-on-warning-container: #fff0d1;
--dt-warning-container-icon: #fff0d1;
--dt-warning-container-link: #fff0d1;
--dt-warning: #ffbb29;
--dt-warning-action: #ffbb29;
--dt-warning-action-stateful: #ffbb29;
--dt-warning-outline: #fff0d1;
--dt-warning-action-state-layer: #ffbb29;
--dt-warning-container: #562d00;
--dt-on-warning: #1f1f1f;
--dt-warning-icon: #421f00;
--dt-warning-link: #421f00;
--dt-on-error-container: #f9dedc;
--dt-error-container-icon: #f9dedc;
--dt-error-container-link: #f9dedc;
--dt-error: #f2b8b5;
--dt-error-action: #f2b8b5;
--dt-error-action-stateful: #f2b8b5;
--dt-error-outline: #f2b8b5;
--dt-error-action-state-layer: #dc362e;
--dt-error-container: #8c1d18;
--dt-on-error: #601410;
--dt-error-icon: #601410;
--dt-error-link: #601410;
--dt-mime-type-blue: rgb(138, 180, 248);
--dt-mime-type-dark-blue: #5f73e5;
--dt-mime-type-green: rgb(129, 201, 149);
--dt-mime-type-grey: rgb(154, 160, 166);
--dt-mime-type-purple: rgb(197, 138, 249);
--dt-mime-type-deep-purple: #9575cd;
--dt-mime-type-red: rgb(242, 139, 130);
--dt-mime-type-yellow: #FFE082;
--dt-disabled: rgba(227, 227, 227, 0.12);
--dt-on-disabled: rgba(227, 227, 227, 0.38);
--dt-outline: #8e918f;
--dt-outline-variant: #444746;
--dt-light-info-banner-button: #a8c7fa;
--dt-light-neutral-banner-button: #ababab;
--dt-light-success-banner-button: #6dd58c;
--dt-light-warning-banner-button: #ffbb29;
--dt-light-error-banner-button: #f2b8b5;
--gm3-sys-color-background: #1f1f1f;
--gm3-sys-color-error: #f2b8b5;
--gm3-sys-color-error-container: #8c1d18;
--gm3-sys-color-inverse-on-surface: #303030;
--gm3-sys-color-inverse-primary: #0b57d0;
--gm3-sys-color-inverse-surface: #e3e3e3;
--gm3-sys-color-on-background: #e3e3e3;
--gm3-sys-color-on-error: #601410;
--gm3-sys-color-on-error-container: #f9dedc;
--gm3-sys-color-on-primary: #062e6f;
--gm3-sys-color-on-primary-container: #d3e3fd;
--gm3-sys-color-on-primary-fixed: #041e49;
--gm3-sys-color-on-primary-fixed-variant: #0842a0;
--gm3-sys-color-on-secondary: #035;
--gm3-sys-color-on-secondary-container: #c2e7ff;
--gm3-sys-color-on-secondary-fixed: #001d35;
--gm3-sys-color-on-secondary-fixed-variant: #004a77;
--gm3-sys-color-on-surface: #e3e3e3;
--gm3-sys-color-on-surface-variant: #c4c7c5;
--gm3-sys-color-on-tertiary: #0a3818;
--gm3-sys-color-on-tertiary-container: #c4eed0;
--gm3-sys-color-on-tertiary-fixed: #072711;
--gm3-sys-color-on-tertiary-fixed-variant: #0f5223;
--gm3-sys-color-outline: #8e918f;
--gm3-sys-color-outline-variant: #444746;
--gm3-sys-color-primary: #a8c7fa;
--gm3-sys-color-primary-container: #0842a0;
--gm3-sys-color-primary-fixed: #d3e3fd;
--gm3-sys-color-primary-fixed-dim: #a8c7fa;
--gm3-sys-color-scrim: #000;
--gm3-sys-color-secondary: #7fcfff;
--gm3-sys-color-secondary-container: #004a77;
--gm3-sys-color-secondary-fixed: #c2e7ff;
--gm3-sys-color-secondary-fixed-dim: #7fcfff;
--gm3-sys-color-shadow: #000;
--gm3-sys-color-surface: #1f1f1f;
--gm3-sys-color-surface-bright: #37393b;
--gm3-sys-color-surface-container: #1e1f20;
--gm3-sys-color-surface-container-high: #282a2c;
--gm3-sys-color-surface-container-highest: #333537;
--gm3-sys-color-surface-container-low: #1b1b1b;
--gm3-sys-color-surface-container-lowest: #0e0e0e;
--gm3-sys-color-surface-dim: #131313;
--gm3-sys-color-surface-tint: #d1e1ff;
--gm3-sys-color-surface-variant: #444746;
--gm3-sys-color-tertiary: #6dd58c;
--gm3-sys-color-tertiary-container: #0f5223;
--gm3-sys-color-tertiary-fixed: #c4eed0;
--gm3-sys-color-tertiary-fixed-dim: #6dd58c;
}
}
@-moz-document domain("aulaglobal.uc3m.es"), regexp(".*aplicaciones.uc3m.es((?!atenea).)*$"), regexp(".*uc3m.es/(bachelor-degree|grado)/.*") {
/* ===== Common ===== */
body {
background-color: var(--dt-surface-container-low);
color: var(--dt-on-background);
}
/* General elemens */
header, footer {
background-color: var(--dt-surface-container-high);
color: var(--dt-on-background);
margin: 0;
}
a {
color: var(--dt-primary-action);
}
a:hover {
color: var(--dt-primary-action-stateful);
}
a:visited {
color: var(--dt-primary-action-stateful);
}
hr, hr.barra {
border-color: var(--dt-outline);
}
caption, legend {
color: var(--dt-primary);
}
}
@-moz-document domain("aulaglobal.uc3m.es") {
/* ===== AulaGlobal ===== */
/* General */
header {
background-color: transparent;
}
a {
padding: 0.1rem 0.4rem;
box-shadow: none;
border-radius: 0.5rem;
}
a:hover,
.aalink.focus, a.focus.autolink, .aalink:focus, a.autolink:focus {
color: var(--dt-primary-action-stateful);
background-color: var(--dt-surface-bright);
box-shadow: none;
}
a:not([class]):focus {
color: var(--dt-on-primary);
background: var(--dt-on-primary-container);
}
pre {
color: inherit;
}
aside .card-body img.icon {
filter: invert(0.7);
}
.bg-white { background-color: var(--dt-surface-container-high) !important; }
.bg-light { background-color: var(--dt-surface-container-low) !important; }
.bg-secondary { background-color: var(--dt-surface-container-highest) !important; }
.text-muted {
color: var(--dt-on-surface-secondary) !important;
}
.border { border-color: var(--dt-outline-variant) !important; }
.border-bottom { border-bottom-color: var(--dt-outline-variant) !important; }
.btn, .btn:hover { color: var(--dt-on-surface); }
.btn-primary:hover { background-color: var(--dt-secondary-container); }
.btn-secondary {
background-color: transparent;
border-color: var(--dt-outline)
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:active,
.btn-secondary:hover,
.btn-secondary:focus {
background-color: rgba(128,128,128,0.2);
color: var(--dt-on-surface);
}
.btn.btn-icon:hover, .btn.btn-icon:focus {
background-color: transparent;
}
.table,
.generaltable {
color: var(--dt-on-surface);
}
.generaltable tbody tr:hover {
color: var(--dt-on-surface-variant);
}
.generaltable th, .generaltable td,
.generaltable thead th,
.table th, .table td,
.table thead th {
vertical-align: bottom;
border-color: var(--dt-outline...