Skip to main content

CSS Styling

Thanks to CSS variables, you can easily change many styles in Files app without much effort. Simply create a file _files/css/custom.css, and include your own CSS variables. For example, to change the main primary color from seagreen:

:root {
--primary-color: deeppink;
}

The result will look like this: --primary-color=deeppink

CSS properties

Below you will find a list of all existing custom properties.

:root {
--primary-color: seagreen;
--popup-bg: #000;
--popup-placeholder-bg: #222;
--popup-timer-color: white;
--popup-caption-max-width: 640px;
--popup-caption-font-size: .9rem;
--popup-caption-font-weight: 300;
--popup-caption-line-height: 135%;
--popup-caption-color
--popup-caption-item-space: .35em;
--popup-caption-line-clamp: 3;
--files-data-top: 0;
--files-data-display: none;
--files-data-display-hover: block;
--files-data-animation: opacity .2s;
--grid-height: 100%;
--grid-font-size: 14px;
--list-max-width: 1040px;
--rows-height: auto;
--rows-justify-content: space-evenly;
--rows-flex-grow: 1;
--sidebar-width: calc(10vw + 180px);
--sidebar-width-small: 85vw;
--sidebar-width-hover: 480px;
--menu-font-size: 16px;
--menu-line-height: 30px;
--menu-folder-icon-size: 22px;
--menu-text-indent: 6px;
--menu-icon-toggle-opacity: 0;
}

Custom CSS styles

It's also possible to include your own CSS styling. However, this requires good understanding of CSS and HTML, as you could end up breaking the interface.