{"id":46134731,"url":"https://github.com/ernieayala/ernies-modern-layout","last_synced_at":"2026-03-02T04:37:23.702Z","repository":{"id":39898882,"uuid":"273059965","full_name":"ernieayala/ernies-modern-layout","owner":"ernieayala","description":"A clean and themeable visual update for Foundry VTT. Discord: Ernie#4453 or Ernie on the Foundry channel.","archived":false,"fork":false,"pushed_at":"2025-04-10T15:33:34.000Z","size":18198,"stargazers_count":18,"open_issues_count":17,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T16:52:46.830Z","etag":null,"topics":["dark-mode","ernie","foundry-channel","foundry-vtt","foundry-vtt-theme","foundryvtt","foundryvtt-theme"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ernieayala.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-06-17T19:20:33.000Z","updated_at":"2024-09-01T13:03:58.000Z","dependencies_parsed_at":"2024-12-04T02:23:45.218Z","dependency_job_id":"7001213e-2915-4e40-b245-73c7360dcf44","html_url":"https://github.com/ernieayala/ernies-modern-layout","commit_stats":null,"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"purl":"pkg:github/ernieayala/ernies-modern-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernieayala%2Fernies-modern-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernieayala%2Fernies-modern-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernieayala%2Fernies-modern-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernieayala%2Fernies-modern-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ernieayala","download_url":"https://codeload.github.com/ernieayala/ernies-modern-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernieayala%2Fernies-modern-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29992344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-mode","ernie","foundry-channel","foundry-vtt","foundry-vtt-theme","foundryvtt","foundryvtt-theme"],"created_at":"2026-03-02T04:37:22.935Z","updated_at":"2026-03-02T04:37:23.687Z","avatar_url":"https://github.com/ernieayala.png","language":"SCSS","funding_links":["https://ko-fi.com/T6T24X2VD"],"categories":[],"sub_categories":[],"readme":"![GitHub release (latest by date)](https://img.shields.io/github/v/release/ernieayala/ernies-modern-layout?style=flat-square)\n![GitHub Latest Release](https://img.shields.io/github/downloads/ernieayala/ernies-modern-layout/latest/ernies-modern-layout.zip?style=flat-square)\n\n# Ernie's Modern UI\n**Compatibility:** FoundryVTT 10.286\n\n**Languages:** English, Español, 正體中文\n\nA clean and theme-able visual update for Foundry VTT.\n\n## Features\n- Theming\n- Custom Theming\n- Dark Theme\n- Import/Export Theme\n- Compact Mode\n- Subtle Layout\n- Custom Logo\n- Various UI toggles (hide logo, hide scene thumbnails, and more)\n\n## Manifest URL\nhttps://github.com/ernieayala/ernies-modern-layout/releases/download/0.5.7/module.json\n\n## Pre-release URL (Use at your own risk)\nThis might break your game (visually) - but this is a manual install of a pre-release version.\nhttps://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/prerelease/module.json\n\nIf you want to revert to the stable version - re-install using the link under Manifest URL.\n\n## Want me to look at something?\n- If you find a bug with a mod that I have marked a function - create an Issue in Github for me.\n- 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.\n\n## Contact and Support\nMessage me on Discord: Ernie#4453.\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/T6T24X2VD)\n\n## You should know\n- I work a full time job and have a family, my time is very limited to work on this.\n- This is a side project for me that I made to support my GMing tastes.\n- Many modules and systems will not have my style.\n- Only tested on Chrome.\n\n## Overview\nHere is a breif visual overview.\n\n### Default View\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/01-overview.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### Dark Mode\n\u003cp\u003eI will go over this a bit more further down.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/01-overview-dark.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### Settings\n\u003cp\u003eIf 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/02-settings.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### Compact Mode\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/06-compact-example.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n     \n\u003cp\u003eHere 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/05-compact-settings.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### Subtle Mode\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/04-subtle-exmple.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n     \n\u003cp\u003eThis 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/03-subtle-settings.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### GM Settings\nThe settings here will apply to all your users. There are four tabs in this area.\n- Colors, which lets you set all the colors throughout the application.\n- Design, which lets you mess with fonts, spacing, sizing and other visual elements.\n- Options, which has a couple toggles and the Import and Export Theme ability.\n- Reset, if you want to reset all your work to the default.\nYou will need to push the Save button at the bottom of the modal after you make any changes.\n\n### Colors\n\u003cp\u003eThis 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/07-color-settings.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n\u003cp\u003eThere are also a few presets here which includes Dark Mode.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/08-color-preset.png\"\n     style=\"max-width: 100%;\" /\u003e\n\n### Font Family and Sizes\n\u003cp\u003eThe 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/09-font-family.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n\u003cp\u003eYou also have the ability to adjust the font size to your liking.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/10-font-size.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### Border Radius\n\u003cp\u003eThis 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/11-border-radius.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### Background Images\n\u003cp\u003eThis 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/12-background-image.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### Background Opacity\n\u003cp\u003eYou 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/13-background-opacity.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### Sizing and Spacing\n\u003cp\u003eIf 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/14-spacing-sizing.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n### Options\n\u003cp\u003eOn 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.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/15-options.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n\n\u003cp\u003eAnd three, you can Export all your hard work and share it with someone else or keep it for backup just in case.\u003c/p\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/ernieayala/ernies-modern-layout/master/images/16-eport.png\"\n     style=\"max-width: 100%; display: block;\" /\u003e\n     \n### Features Video (Old)\n[![Features Walkthrough](https://img.youtube.com/vi/bU7sclPTFQU/0.jpg)](https://www.youtube.com/watch?v=bU7sclPTFQU)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fernieayala%2Fernies-modern-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fernieayala%2Fernies-modern-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fernieayala%2Fernies-modern-layout/lists"}