{"id":15105665,"url":"https://github.com/mnvr/mast","last_synced_at":"2025-09-27T05:30:43.562Z","repository":{"id":216929059,"uuid":"742720258","full_name":"mnvr/mast","owner":"mnvr","description":"Mastodon Color Theme Generator (prototype)","archived":true,"fork":false,"pushed_at":"2024-01-17T05:49:29.000Z","size":740,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-09-20T13:30:53.765Z","etag":null,"topics":["mastodon","mastodon-theme","minimal","theme-development"],"latest_commit_sha":null,"homepage":"https://mnvr.github.io/mast/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mnvr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-01-13T06:49:19.000Z","updated_at":"2024-08-11T16:32:27.000Z","dependencies_parsed_at":"2024-09-20T13:30:26.497Z","dependency_job_id":"f3498808-75be-49a3-b5f5-5bccd525d216","html_url":"https://github.com/mnvr/mast","commit_stats":{"total_commits":84,"total_committers":1,"mean_commits":84.0,"dds":0.0,"last_synced_commit":"1537bac8d1d76050272948b4a7fa09f88c3e9c32"},"previous_names":["mnvr/mast"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnvr%2Fmast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnvr%2Fmast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnvr%2Fmast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnvr%2Fmast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mnvr","download_url":"https://codeload.github.com/mnvr/mast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219871882,"owners_count":16554465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["mastodon","mastodon-theme","minimal","theme-development"],"created_at":"2024-09-25T20:41:58.141Z","updated_at":"2025-09-27T05:30:43.235Z","avatar_url":"https://github.com/mnvr.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# mast\n\nMastodon Theme Generator\n\nLive version: [mnvr.github.io/mast](https://mnvr.github.io/mast/)\n\nThis is not a solid solution, it is just a prototype, and will likely not\nproduce CSS that works in all cases. If you do use it, please try to ensure that\nthere is good contrast between text and background.\n\n### Examples\n\n| [Midnight Chartreuse](https://mnvr.github.io/mast/#base=midnightblue\u0026primary=azure\u0026secondary=darkgrey\u0026highlight=chartreuse\u0026shadow=%23131419) | [Erich Mrozek](https://mnvr.github.io/mast/#base=rgb%2819%2C56%2C153%29\u0026primary=azure\u0026secondary=darkgrey\u0026highlight=rgb%28254%2C78%2C55%29\u0026shadow=%23131419) | [Night](https://mnvr.github.io/mast/#base=%23111\u0026primary=aliceblue\u0026secondary=lightcyan\u0026highlight=cyan\u0026shadow=black) |\n| ---- | ---- | ---- |\n| ![Midnight Chartreuse](screenshots/midnight-chartreuse.png) | ![A theme inspired by Erich Mrozek's color study in the Bauhaus Farbenlehre](screenshots/erich-mrozek.png) | ![Neon Night](screenshots/night.png) |\n\n## Previewing\n\nMastodon's CSS is complex. And there is a lot of it. 14000 lines (and that's\njust with the default theme).\n\nSo the full impact of the CSS generated by us can only really be seen in a real\ncontext. That said, you might want to preview it on a test instance.\n\nAn easy(-ish) way to set up a test instance is to use a GitHub Codespace, using\nthe instructions in [Mastodon's\nREADME](https://github.com/mastodon/mastodon#github-codespaces). This'll create\na new VM running a Mastodon instance without needing to install anything on your\ncomputer.\n\n\u003e As of writing, the README instructions didn't work - the codespace launched in\n\u003e recovery mode. To fix this, I had to edit `.devcontainer/post-create.sh`\n\u003e (within the codespace itself) and comment out the following line at the end of\n\u003e the file:\n\u003e\n\u003e ```sh\n\u003e RAILS_ENV=test ./bin/rails assets:precompile\n\u003e ```\n\u003e\n\u003e If you edit the file, VS Code's clippy will helpfully ask you if you wish to\n\u003e restart with the changes. Say yes, and that should fix the issue.\n\nTo login to your test instance, use\n\n* Email `admin@\u003cdomain\u003e`, where `\u003cdomain\u003e` is where your codespace is running.\n  So this'll be something like `admin@xxx-3000.app.github.dev`.\n* Password `mastodonadmin`\n\n### Using Bitnami Mastodon Images\n\nGH Codespaces are wonderful for quick testing, but if you want a longer running\ndev instance where other folks can also preview your theme before you apply it\nto your main instance, it might be better to create a cloud VM.\n\nThe easiest way I've found is using the [Docker image provided by\nBitnami](https://hub.docker.com/r/bitnami/mastodon/) (Thanks!).\n\n1. Create a VM on a VPS somewhere. [Here's a list of free cloud\n   providers](https://github.com/cloudcommunity/Cloud-Free-Tier-Comparison).\n\n2. For example, I used Azure, since they already have a \"Bitnami package for\n   Mastodon\". I created a VM using this, and within the VM settings, created a\n   DNS hostname for the public IP of the VM. Finally, I used their Cloud CLI to\n   SSH into the VM.\n\n3. The site will already be available on the hostname, but won't be serving\n   Mastodon, instead it'll list the two steps we need to do further.\n\n       sudo /opt/bitnami/configure_app_domain --domain \u003chostname\u003e\n       sudo /opt/bitnami/bncert-tool --domains \u003chostname\u003e\n\n4. That's it. Mastodon will be available on hostname, nicely served over HTTPS\n   thanks to the nice folks over at Let's Encrypt. To obtain the login (admin)\n   credentials, do\n\n       sudo cat /home/bitnami/bitnami_credentials\n\n\n## Running the generator locally\n\nThe site is a [single† HTML file](docs/index.html), hosted on GitHub pages. To\nrun locally, you can clone the repository and open the HTML file in your\nbrowser.\n\n\u003csmall\u003e† for convenience of bugfixes, the [template CSS](docs/template.css) is\nin a separate file, but you can hardcode its contents in the HTML too.\u003c/small\u003e\n\nA bit more convenient might be using a live reload tool. I used [Five\nserver](https://github.com/yandeu/five-server-vscode) when making this.\n\n### Tips\n\nThe browser's CSS inspector is our friend. And under the sources tab we can find\na `default-xxx.chunk.css` - this is what our `template.css` is derived from.\n\nMastodon itself generates the CSS from SASS files, which can be found in the\nMastodon source under\n[app/javascript/styles/](https://github.com/mastodon/mastodon/tree/main/app/javascript/styles).\n\nYou might also find this [CSS color list](https://mrmr.io/css-colors) handy.\n\n### Automatic dark mode\n\nOne thing dearly missing from Mastodon is the ability for it to automatically\nswitch between dark and light themes. I, like many other folks, have our\nmachines set to automatically switch between light and dark themes at day/night.\nSo any site that doesn't respect the system theme stands out like a sore thumb\nand is not great for the eyes.\n\nOne of my original motivations to make this theme generator was to allow\nautomatic theme switching. The current version of the template that it uses does\nnot do that, but the scaffolding is set up for it. So say you have figured out\nthe colors for both your light (default) and dark modes. Then, just insert the\nfollowing section at the top of the generated CSS:\n\n```css\n/* Add this to Server settings \u003e Appearance \u003e Custom CSS */\n\n:root {\n    --mast-in-base: ...\n    ... /* this is the part that the theme generator creates ...*/\n}\n\n/** Add this section */\n@media (prefers-color-scheme: dark) {\n    :root {\n        --mast-in-base: ...\n        ... /* add the 5 dark color definitions here */\n    }\n}\n```\n\nThat's it. The rest of the generated CSS remains unchanged.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmnvr%2Fmast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmnvr%2Fmast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmnvr%2Fmast/lists"}