GILESFREEMAN Eg. Current scheme is dark/black. I'm looking for a white/grey theme.
Before I answer further, I don't understand what you are saying in the above "Current scheme is dark/black". Did you click the theme button in topbar? There are 3x themes, LIGHT, DARK and CONTRAST (light main area, dark sidebar and topbar). It ALREADY has a light almost white/grey. I can't understand what you want to do, and it is very complex to modify advanced themes with so many colors and shades that aren't even proportional across light/dark.
GILESFREEMAN The Custom CSS doesn't seem to list all available CSS classes?
You mean the custom CSS documentation? And do you mean CSS variables? No of course it doesn't list all classes, because that's n massive and complex CSS, and if you want to view all the classes, you would simply view the raw CSS, perhaps using a beautifier to un-minify it.
https://cdn.jsdelivr.net/npm/files.photo.gallery@0.8.4/css/files.css
It doesn't seem useful and/or you are underestimating the complexity. Below I have pasted most of the CSS theme variables section from the rendered CSS. It's complex because it has to be.
:root {
--hue: 210;
--hsl-primary-dark: var(--hue) 50% 45%;
--hsl-primary-contrast: var(--hue) 45% 50%;
--hsl-primary-light: var(--hue) 55% 55%;
--text-base-lightness-light: 30%;
--text1-light: hsl(var(--hue), 20%, var(--text-base-lightness-light));
--text2-light: hsl(
var(--hue),
17%,
calc(var(--text-base-lightness-light) + 15%)
);
--text3-light: hsl(
var(--hue),
15%,
calc(var(--text-base-lightness-light) + 30%)
);
--surface-base-lightness-light: 98%;
--surface1-light: hsl(
var(--hue),
20%,
calc(var(--surface-base-lightness-light) + -8%)
);
--surface2-light: hsl(
var(--hue),
20%,
calc(var(--surface-base-lightness-light) + -3%)
);
--surface3-light: hsl(var(--hue), 20%, var(--surface-base-lightness-light));
--surface4-light: white;
--files-border-bottom-light: 0 1px 0 0
hsl(var(--hue), 20%, calc(var(--surface-base-lightness-light) + -12%));
--img-placeholder-bg-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path fill='hsl(210, 16%, 84%)' d='M40 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v26c0 2.2-1.8 4-4 4z'/><circle fill='hsl(210, 15%, 95%)' cx='35' cy='16' r='3'/><path fill='hsl(210, 16%, 62%)' d='M20 16L9 32h22z'/><path fill='hsl(210, 15%, 73%)' d='M31 22l-8 10h16z'/></svg>");
--color-danger-light: hsl(0, 60%, 55%);
--color-info-light: var(--text1);
--color-success-light: hsl(105, 30%, 50%);
--popup-bg-light: black;
--dropdown-shadow-light: 0 8px 25px -10px hsl(var(--hue), 60%, 10%);
--rgb-theme-light: 255, 255, 255;
--rgb-theme-invert-light: 0, 0, 0;
--text-base-lightness-dark: 80%;
--text1-dark: hsl(var(--hue), 20%, var(--text-base-lightness-dark));
--text2-dark: hsl(
var(--hue),
17%,
calc(var(--text-base-lightness-dark) + -15%)
);
--text3-dark: hsl(
var(--hue),
14%,
calc(var(--text-base-lightness-dark) + -30%)
);
--surface-base-lightness-dark: 8%;
--surface1-dark: hsl(var(--hue), 20%, var(--surface-base-lightness-dark));
--surface2-dark: hsl(
var(--hue),
20%,
calc(var(--surface-base-lightness-dark) + 2%)
);
--surface3-dark: hsl(
var(--hue),
20%,
calc(var(--surface-base-lightness-dark) + 4%)
);
--surface4-dark: hsl(
var(--hue),
20%,
calc(var(--surface-base-lightness-dark) + 6%)
);
--files-border-bottom-dark: 0 0 0 0 transparent;
--img-placeholder-bg-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path fill='hsl(210, 20%, 20%)' d='M40 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v26c0 2.2-1.8 4-4 4z'/><circle fill='hsl(210, 20%, 50%)' cx='35' cy='16' r='3'/><path fill='hsl(210, 20%, 30%)' d='M20 16L9 32h22z'/><path fill='hsl(210, 20%, 40%)' d='M31 22l-8 10h16z'/></svg>");
--color-danger-dark: hsl(0, 50%, 45%);
--color-info-dark: hsl(
var(--hue),
20%,
calc(var(--surface-base-lightness-dark) + 12%)
);
--color-success-dark: hsl(105, 30%, 45%);
--popup-bg-dark: black;
--dropdown-shadow-dark: 0 10px 40px -15px black;
--rgb-theme-dark: 0, 0, 0;
--rgb-theme-invert-dark: 255, 255, 255;
--surface-active: var(--surface3);
--primary: hsl(var(--hue), 50%, 50%);
--border-color: rgba(var(--rgb-theme-invert), 0.05);
}
@supports (background-color: HSL(50 50% 50%/50%)) {
:root {
--primary: hsl(var(--hsl-primary));
}
}
@supports (background-color: HSL(50 50% 50%/50%)) {
:root {
--border-color: hsl(var(--hue) 30% 50% / 15%);
}
}
[data-theme="contrast"] {
--modal-surface: var(--surface4);
--modal-box-shadow: 0 5px 35px -15px var(--surface1-dark);
--modal-bg: hsl(var(--hue) 20% 14% / 85%);
--dropdown-shadow: var(--dropdown-shadow-light);
--files-svg-active-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.1));
--theme-dark-rotate: 45deg;
--hsl-primary: var(--hsl-primary-contrast);
}
[data-theme="contrast"] .cm-sidebar {
--dropdown-shadow: var(--dropdown-shadow-dark);
}
[data-theme="light"] {
--modal-surface: var(--surface4);
--modal-bg: hsl(var(--hue) 18% 78% / 80%);
--modal-box-shadow: 0 5px 25px -15px hsl(var(--hue), 20%, 40%);
--dropdown-shadow: var(--dropdown-shadow-light);
--files-svg-active-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.1));
--theme-contrast-rotate: 45deg;
--hsl-primary: var(--hsl-primary-light);
}
[data-theme="dark"] {
--modal-bg: hsl(var(--hue) 20% var(--surface-base-lightness-dark) / 90%);
--modal-surface: hsl(
var(--hue),
20%,
calc(var(--surface-base-lightness-dark) + 7%)
);
--modal-box-shadow: 0 5px 25px -15px black;
--files-svg-active-filter: drop-shadow(0 7px 15px rgba(0, 0, 0, 0.25));
--dropdown-shadow: var(--dropdown-shadow-dark);
--theme-light-rotate: 45deg;
--hsl-primary: var(--hsl-primary-dark);
}
[data-theme="light"],
[data-theme="contrast"] {
color-scheme: light;
--text1: var(--text1-light);
--text2: var(--text2-light);
--text3: var(--text3-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--files-border-bottom: var(--files-border-bottom-light);
--img-placeholder-bg: var(--img-placeholder-bg-light);
--color-danger: var(--color-danger-light);
--color-info: var(--color-info-light);
--color-success: var(--color-success-light);
--popup-bg: var(--popup-bg-light);
--rgb-theme: var(--rgb-theme-light);
--rgb-theme-invert: var(--rgb-theme-invert-light);
--svg-file-bg: hsl(60, 17%, calc(var(--surface-base-lightness-light) - 12%));
--svg-file-flip: hsl(
52,
16%,
calc(var(--surface-base-lightness-light) - 20%)
);
--svg-file-icon: hsl(
19,
13%,
calc(var(--surface-base-lightness-light) - 27%)
);
--svg-folder-bg: hsl(var(--hue), 45%, 55%);
--svg-folder-fg: hsl(var(--hue), 50%, 65%);
--svg-folder-bg-large: hsl(var(--hue), 50%, 65%);
--svg-folder-fg-large: hsl(var(--hue), 55%, 75%);
--type-default: hsl(var(--hue), 15%, 65%);
--type-application: hsl(var(--hue), 65%, 55%);
--type-archive: hsl(39, 76%, 60%);
--type-audio: hsl(21, 77%, 55%);
--type-excel: hsl(135, 30%, 59%);
--type-word: hsl(205, 84%, 59%);
--type-pdf: hsl(359, 50%, 55%);
--type-cd: hsl(15, 72%, 70%);
--type-code: hsl(10, 69%, 62%);
--type-text: hsl(210, 50%, 60%);
--type-open_in_new: var(--type-text);
--type-powerpoint: hsl(13, 65%, 51%);
--type-font: hsl(286, 45%, 65%);
--type-video: hsl(357, 79%, 65%);
--type-youtube: hsl(0, 90%, 55%);
--type-vimeo: hsl(195, 83%, 51%);
--type-image: hsl(92, 36%, 58%);
--svg-image-text-bg: hsl(92, 32%, 50%);
--svg-image-sun: hsl(48, 85%, 65%);
--font-weight-bold: 500;
--font-weight-letter-spacing: normal;
--surface-list-hover: var(--surface1-light);
}
[data-theme="contrast"],
[data-theme="light"] {
--surface-base-lightness-dark: 12%;
--text-base-lightness-dark: 84%;
}
[data-theme="dark"],
[data-theme="contrast"] #topbar,
[data-theme="contrast"] #sidebar,
[data-theme="contrast"] #sidebar-bg {
color-scheme: dark;
color: var(--text1);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--text3: var(--text3-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--files-border-bottom: var(--files-border-bottom-dark);
--img-placeholder-bg: var(--img-placeholder-bg-dark);
--color-danger: var(--color-danger-dark);
--color-info: var(--color-info-dark);
--color-success: var(--color-success-dark);
--popup-bg: var(--popup-bg-dark);
--rgb-theme: var(--rgb-theme-dark);
--rgb-theme-invert: var(--rgb-theme-invert-dark);
--svg-file-bg: hsl(
var(--hue),
20%,
calc(var(--surface-base-lightness-dark) + 10%)
);
--svg-file-flip: hsl(
var(--hue),
18%,
calc(var(--surface-base-lightness-dark) + 16%)
);
--svg-file-icon: hsl(
var(--hue),
16%,
calc(var(--surface-base-lightness-dark) + 32%)
);
--svg-folder-bg: hsl(var(--hue), 40%, 30%);
--svg-folder-fg: hsl(var(--hue), 35%, 40%);
--svg-folder-bg-large: hsl(var(--hue), 30%, 20%);
--svg-folder-fg-large: hsl(var(--hue), 25%, 28%);
--type-default: hsl(var(--hue), 20%, 40%);
--type-application: hsl(var(--hue), 50%, 55%);
--type-archive: hsl(39, 51%, 57%);
--type-audio: hsl(21, 50%, 50%);
--type-excel: hsl(135, 20%, 49%);
--type-word: hsl(205, 54%, 49%);
--type-pdf: hsl(359, 39%, 50%);
--type-cd: hsl(15, 42%, 50%);
--type-code: hsl(10, 45%, 50%);
--type-text: hsl(210, 40%, 50%);
--type-open_in_new: var(--type-text);
--type-powerpoint: hsl(13, 50%, 51%);
--type-font: hsl(286, 30%, 55%);
--type-video: hsl(357, 45%, 55%);
--type-youtube: hsl(0, 60%, 50%);
--type-vimeo: hsl(195, 60%, 50%);
--type-image: hsl(92, 28%, 52%);
--svg-image-text-bg: hsl(92, 29%, 44%);
--svg-image-sun: hsl(48, 60%, 55%);
--font-weight-bold: 400;
--font-weight-letter-spacing: 0.02ch;
}
.cm-popup {
--dropdown-shadow: var(--dropdown-shadow-dark);
}
[data-theme="dark"] .cm-sidebar,
[data-theme="contrast"] .cm-sidebar {
--dropdown-top-color: var(--text3);
}
[data-theme="dark"] .dropdown-menu-topbar,
[data-theme="contrast"] .dropdown-menu-topbar {
--dropdown-top-color: var(--primary);
}