https://github.com/ernieayala/ernies-modern-layout
A clean and themeable visual update for Foundry VTT. Discord: Ernie#4453 or Ernie on the Foundry channel.
https://github.com/ernieayala/ernies-modern-layout
dark-mode ernie foundry-channel foundry-vtt foundry-vtt-theme foundryvtt foundryvtt-theme
Last synced: 4 months ago
JSON representation
A clean and themeable visual update for Foundry VTT. Discord: Ernie#4453 or Ernie on the Foundry channel.
- Host: GitHub
- URL: https://github.com/ernieayala/ernies-modern-layout
- Owner: ernieayala
- Created: 2020-06-17T19:20:33.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-10T15:33:34.000Z (about 1 year ago)
- Last Synced: 2025-04-10T16:52:46.830Z (about 1 year ago)
- Topics: dark-mode, ernie, foundry-channel, foundry-vtt, foundry-vtt-theme, foundryvtt, foundryvtt-theme
- Language: SCSS
- Homepage:
- Size: 17.4 MB
- Stars: 18
- Watchers: 4
- Forks: 10
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ernie's Modern UI
**Compatibility:** FoundryVTT 10.286
**Languages:** English, Español, 正體中文
A clean and theme-able visual update for Foundry VTT.
## Features
- Theming
- Custom Theming
- Dark Theme
- Import/Export Theme
- Compact Mode
- Subtle Layout
- Custom Logo
- Various UI toggles (hide logo, hide scene thumbnails, and more)
## Manifest URL
https://github.com/ernieayala/ernies-modern-layout/releases/download/0.5.7/module.json
## Pre-release URL (Use at your own risk)
This might break your game (visually) - but this is a manual install of a pre-release version.
https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/prerelease/module.json
If you want to revert to the stable version - re-install using the link under Manifest URL.
## Want me to look at something?
- If you find a bug with a mod that I have marked a function - create an Issue in Github for me.
- If you want me to look at supporting a mod or system; hop into my [Discord](https://discord.gg/CWhdMWvZyD). State the mods or system you want looked at.
## Contact and Support
Message me on Discord: Ernie#4453.
[](https://ko-fi.com/T6T24X2VD)
## You should know
- I work a full time job and have a family, my time is very limited to work on this.
- This is a side project for me that I made to support my GMing tastes.
- Many modules and systems will not have my style.
- Only tested on Chrome.
## Overview
Here is a breif visual overview.
### Default View
### Dark Mode
I will go over this a bit more further down.
### Settings
If you navigate to the module settings for Ernie's Modern UI you'll see the screen below. Everything in the initial settings (i.e. Subtle and Compact Modes) are individual client settings.
### Compact Mode
Here you will find a few variations of Compact Mode. The first options is to make everything in the application follow the compact setting. The other options are if you choose to make certain areas smaller. For example, if you only wanted the left portion of the UI to follow Compact Mode, you would only select the Compact Mode UI Left checkbox. Of course you can mix and match.
### Subtle Mode
This is a setting for those who really want to see everything on the screen. There are a couple modifiers here. The opacity setting will let you set the initial opacity of the elements "off" state and the lock sidebar setting will lock the sidebar on the right portion of the screen to always be on. I recommend playing with this one to see if it works for you.
### GM Settings
The settings here will apply to all your users. There are four tabs in this area.
- Colors, which lets you set all the colors throughout the application.
- Design, which lets you mess with fonts, spacing, sizing and other visual elements.
- Options, which has a couple toggles and the Import and Export Theme ability.
- Reset, if you want to reset all your work to the default.
You will need to push the Save button at the bottom of the modal after you make any changes.
### Colors
This is the bread and butter for most people. Here you can adjust colors in a semantic fashion through either hex values or using the color pick next to the field.
There are also a few presets here which includes Dark Mode.
### Font Family and Sizes
The first section on the Design tab allows you to adjust the font family by either picking from a predefined list or using a Google Fonts link.
You also have the ability to adjust the font size to your liking.
### Border Radius
This one is pretty easy. You can adjust a numerical value to change the border radius. The lower the number the less curvy, the higher, more curvy. You can give yourself a more block look by setting everything to 0 or give yourself round buttons by setting to a higher number like 24px.
### Background Images
This is if you miss the textured background from base Foundry. These map 1:1 with the color naming conventions on the Colors tab. This is one that is better to test out if you're not sure what it does. In the screenshot below you can see I replaced the lightest background with a default Foundry texture instead.
### Background Opacity
You might have noticed that the main components have a slight opacity to them. This opacity is baked into the background color using RGBA. If you want to increase or decrease the intensity of the background you can adjust theme here.
### Sizing and Spacing
If you want to touch every single spacing modifier I use. Here you go. Small tweaks to this section would be best as you could really blow up your UI if you mess with this too much.
### Options
On the options tab you'll find three things. One, you can toggle the logo in the top left on and off. Two, you can toggle the scene background images in the right navigation on and off.
And three, you can Export all your hard work and share it with someone else or keep it for backup just in case.
### Features Video (Old)
[](https://www.youtube.com/watch?v=bU7sclPTFQU)