{"id":27729945,"url":"https://github.com/Nats-ji/netlify-cms-dark-mode","last_synced_at":"2025-04-28T05:01:55.226Z","repository":{"id":167636641,"uuid":"346017821","full_name":"Nats-ji/netlify-cms-dark-mode","owner":"Nats-ji","description":"Netlify CMS Dark Mode! A simple CSS file to turn on dark mode for your Netlify CMS.","archived":false,"fork":false,"pushed_at":"2022-06-23T18:33:00.000Z","size":389,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T21:10:02.099Z","etag":null,"topics":["dark-mode","dark-theme","netlify","netlify-cms","netlify-plugin","netlifycms"],"latest_commit_sha":null,"homepage":"https://nats-ji.github.io/netlify-cms-dark-mode/","language":"CSS","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/Nats-ji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["buymeacoffee.com/mingm"]}},"created_at":"2021-03-09T13:35:31.000Z","updated_at":"2024-12-27T17:15:06.000Z","dependencies_parsed_at":"2023-07-07T16:32:11.466Z","dependency_job_id":null,"html_url":"https://github.com/Nats-ji/netlify-cms-dark-mode","commit_stats":null,"previous_names":["nats-ji/netlify-cms-dark-mode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nats-ji%2Fnetlify-cms-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nats-ji%2Fnetlify-cms-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nats-ji%2Fnetlify-cms-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nats-ji%2Fnetlify-cms-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nats-ji","download_url":"https://codeload.github.com/Nats-ji/netlify-cms-dark-mode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251254262,"owners_count":21559791,"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":["dark-mode","dark-theme","netlify","netlify-cms","netlify-plugin","netlifycms"],"created_at":"2025-04-28T05:01:35.831Z","updated_at":"2025-04-28T05:01:55.057Z","avatar_url":"https://github.com/Nats-ji.png","language":"CSS","funding_links":["buymeacoffee.com/mingm","https://www.buymeacoffee.com/mingm","https://img.buymeacoffee.com/button-api/?text=Buy"],"categories":["Hack"],"sub_categories":[],"readme":"\u003ca href=\"https://www.buymeacoffee.com/mingm\"\u003e\u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a coffee\u0026emoji=\u0026slug=mingm\u0026button_colour=FF5F5F\u0026font_colour=ffffff\u0026font_family=Comic\u0026outline_colour=000000\u0026coffee_colour=FFDD00\" width=\"180px\"\u003e\u003c/a\u003e\n\n# Netlify CMS Dark Mode Theme\n\n## What is this?\n\nThis is a simple CSS file that you can add to your Netlify CMS's HTML file.\n\nIt automatically toggles your Netlify cms to dark mode if your system is also set to dark mode.\n\nYou can view the demo site [here](https://nats-ji.github.io/netlify-cms-dark-mode/).\n\n![image](https://user-images.githubusercontent.com/13299626/110656997-708d1280-81fb-11eb-8c50-a9bd35596a82.png)\n\n## Who is this for?\n\nThis is mainly for people who install the Netlify CMS with javascript from the CDN. Since there are more limitations with customization.\n\nBut you can also use this with the npm installation method. However, it's better to write a separate package.\n\n## How to use?\n\n### Method 1. Use CDN\n\nPull `dark.css` from a public cdn, so it will keep up-to-date. `https://cdn.jsdelivr.net/gh/Nats-ji/netlify-cms-dark@master/dark.min.css`\n\n- Edit your Netlify CMS's HTML code:\n\n   ```html\n     \u003c/body\u003e\n     \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/Nats-ji/netlify-cms-dark-mode@master/dark.min.css\"\u003e\n   \u003c/html\u003e\n   ```\n\n### Method 2. Download\n\nThis method gives you more flexablity for making customizations.\n\n1. Download [dark.css](https://github.com/Nats-ji/netlify-cms-dark-mode/blob/master/dark.css), and copy it to your site.\n\n2. Open your Netlify CMS's HTML file.\n\n3. Link `dark.css` behind the `\u003c/body\u003e` tag.\n   ```html\n     \u003c/body\u003e\n     \u003clink rel=\"stylesheet\" href=\"./dark.css\"\u003e\n   \u003c/html\u003e\n   ```\n   \nYou can check the demo HTML source code [here](https://github.com/Nats-ji/netlify-cms-dark-mode/blob/gh-pages/index.html).\n   \n## Change theme color?\n\n- Just edit the css vars in `dark.css`!\n   ```css\n   :root {\n     --body-bg-color: black;\n   }\n   ```\n   \n- If you want always dark mode instead of following the system's setting. You can remove the following code from `dark.css`:\n   ```css\n   @media (prefers-color-scheme: dark) {\n\n   }\n   ```\n\n## Something is wrong?\n\nYou are welcome to make a Pull Request to fix any bugs or make any improvements.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNats-ji%2Fnetlify-cms-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNats-ji%2Fnetlify-cms-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNats-ji%2Fnetlify-cms-dark-mode/lists"}