I was playing around with some CSS today.
Added an image from Unsplash.com to my sidebar. You know. For some personalisation.
It only relies on existing CSS (color) variables. That way it works for light and dark mode. Maybe for non-default themes, too. That I haven’t tested.
Here is how it looks:
Hope it works for you!
The CSS:
/* Draw background image and add a separator from the header. */
.nav-files-container {
background-image: url("https://images.unsplash.com/photo-1520180673178-da6fef06aa90?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2400&q=99"); /* Replace me with the image you like. */
background-size: cover;
background-position: 50%;
border-top: 1px solid var(--background-modifier-border);
z-index: 1;
}
/* Draw a solid overlay on top of image. */
.nav-files-container:before {
content: "";
background-color: var(--background-secondary);
opacity: .86;
height: 100%;
width: 100%;
position: fixed;
z-index: 2;
display: block;
}
/* Target the top-level folder-title to add more negative space from header. */
.nav-folder-title[data-path="/"] {
padding-top: 1em;
}
/* Extra separation from the background for the text. A subtle text shadow. */
.nav-folder-title-content, .nav-file-title-content {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
}
.theme-dark .nav-folder-title-content, .theme-dark .nav-file-title-content {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* Tell the child nav-folder to be on top of image and overlay */
.nav-folder {
position: relative;
z-index: 3;
}
/* Make the active selection background and hover frosted glass for more fun. */
.nav-file-title.is-active, .nav-folder-title.is-active, body:not(.is-grabbing) .nav-file-title:hover, body:not(.is-grabbing) .nav-folder-title:hover {
background: rgba(var(--text-muted-rgb), 0.1);
box-shadow: inset 1px 1px 0 0 rgba(var(--text-muted-rgb), 0.055);
backdrop-filter: blur( 4px );
border-radius: 3px 0 0 3px;
}
.
.
Does anyone know whether it is possible to access locally stored image via css?