https://github.com/teraskull/file-browser-modern-theme

Alternative dark theme for file-browser.
https://github.com/teraskull/file-browser-modern-theme

css file-browser flat modern night-sky-theme style theme

Last synced: 8 months ago
JSON representation

Alternative dark theme for file-browser.

• Host: GitHub
• URL: https://github.com/teraskull/file-browser-modern-theme
• Owner: Teraskull
• License: agpl-3.0
• Created: 2021-12-14T08:38:36.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-06-02T23:16:36.000Z (almost 4 years ago)
• Last Synced: 2025-04-04T15:50:39.017Z (about 1 year ago)
• Topics: css, file-browser, flat, modern, night-sky-theme, style, theme
• Language: CSS
• Homepage:
• Size: 233 KB
• Stars: 25
• Watchers: 2
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  Modern





    Alternative dark theme for https://github.com/filebrowser/filebrowser/





  ![Main window](https://user-images.githubusercontent.com/24798198/146664480-bdd54ca0-e6c2-4cba-ba51-dab0b8f7a28d.png)

  ![Settings](https://user-images.githubusercontent.com/24798198/146664515-f22e34a1-aadb-4820-93c8-c0e57dcac632.png)



# Usage

## Local:

Copy the contents of [`custom.css`](/custom.css) or [`custom.min.css`](/custom.min.css) to your own `custom.css` file.

You can read about the File-Browser `custom.css` customization [here](https://filebrowser.org/configuration/custom-branding).

## CDN:

Add the following to your `custom.css` file:

```css

@import url("https://cdn.jsdelivr.net/gh/Teraskull/file-browser-modern-theme@master/custom.min.css");

```

# Customizing

## Icons

Because the icon replacements rely on `aria-label`, most of the new icons are only visible when English language is selected.

To use the default icons, remove the styles between the following comments at the end of [`custom.css`](/custom.css):

```css

/* ############### ICON THEME ############### */

/* ############### END ICON THEME ############### */

```

## Editor theme

1. Copy the contents of any CSS theme from https://github.com/ajaxorg/ace/blob/master/lib/ace/theme/.

2. Replace all instances of the theme class name with `.ace-twilight`.

> For example, if you copy the `nord-dark` theme, replace all `.ace-nord-dark` classes with `.ace-twilight`.

3. Paste the replaced contents between the following comments:

```css

/* ############### EDITOR THEME ############### */

/* ############### END EDITOR THEME ############### */

```

## License

Distributed under the AGPL-3.0 License. See [`LICENSE`](/LICENSE) for more information.