{"id":15704961,"url":"https://github.com/erikyo/dark-mode-block","last_synced_at":"2025-05-12T14:21:07.614Z","repository":{"id":204788030,"uuid":"712001755","full_name":"erikyo/dark-mode-block","owner":"erikyo","description":"Dark Mode Block is a simple yet powerful WordPress block plugin that allows you to enable dark mode for your website, enhancing readability and reducing eye strain without altering your website's colors. Give your users the flexibility to switch between light and dark modes seamlessly.","archived":false,"fork":false,"pushed_at":"2024-05-29T17:48:15.000Z","size":535,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T22:51:13.667Z","etag":null,"topics":["block","dark","dark-mode","plugin","wordpress"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erikyo.png","metadata":{"files":{"readme":"readme.txt","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2023-10-30T15:43:58.000Z","updated_at":"2024-10-10T18:59:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"607830a4-66ad-4fc9-a461-133ee79a9c2a","html_url":"https://github.com/erikyo/dark-mode-block","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"018b9ea807ee46be9ef0b9c4a5cca5cc87f65a06"},"previous_names":["erikyo/dark-mode-block"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikyo%2Fdark-mode-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikyo%2Fdark-mode-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikyo%2Fdark-mode-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikyo%2Fdark-mode-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erikyo","download_url":"https://codeload.github.com/erikyo/dark-mode-block/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249902368,"owners_count":21342826,"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":["block","dark","dark-mode","plugin","wordpress"],"created_at":"2024-10-03T20:14:24.694Z","updated_at":"2025-04-20T13:31:02.226Z","avatar_url":"https://github.com/erikyo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"=== Dark Mode Block ===\nContributors:      codekraft\nTags:              dark mode, theme, css, block\nRequires at least: 5.8\nTested up to:      6.4\nStable tag:        0.1.0\nRequires PHP:      7.1\nLicense:           GPLv3 or later\nLicense URI:       http://www.gnu.org/licenses/gpl-3.0.html\n\n== Description ==\n\nDark Mode Block is a simple yet powerful WordPress block plugin that allows you to enable dark mode for your website, enhancing readability and reducing eye strain without altering your website's colors. Give your users the flexibility to switch between light and dark modes seamlessly.\nDesigned to be lightweight and efficient the whole frontend script weights less than half of a kb gzipped 😉\n\nFeatures:\n- Toggle dark mode with a user-friendly icon.\n- Preserve your website's color scheme while improving readability in low-light environments.\n- Enhanced user experience with reduced eye strain.\n- Customizable\n\nMake your website more accessible and user-friendly by offering a dark mode option. With Dark Mode Block, your users can enjoy your content without compromising on aesthetics.\n\n== Installation ==\n\n1. Upload the 'dark-mode-block' folder to the '/wp-content/plugins/' directory.\n2. Activate the plugin through the 'Plugins' menu in WordPress.\n\n== Usage ==\n\n1. After activating the plugin, add the \"Dark Mode\" block to your WordPress page or post editor.\n2. Publish or update your content.\n\n== Customization ==\n\nUnleash your creativity! This block is designed to be fully customizable graphically, and since it's entirely CSS-based, it's straightforward for anyone to modify and adapt it according to their own taste or template.\n\nYou even have control over how the dark mode is applied! Currently, I've applied an invert filter on the background as I don't know the variables in your template.\nHowever, you have the flexibility to make it even better by setting the text color as the background and vice versa.\n\nHere's how to do it:\n\n1. Add the following code to your functions.php file.\n2. Edit the $custom_css in order to fit your preferences\n\nFirst dequeue the current style in this way:\n\n`\n\nadd_action( 'wp_enqueue_scripts', function () {\n\t/** dequeue the default dark mode */\n\twp_dequeue_style( 'codekraft-dark-mode-style' );\n}, 9 );\n\n`\n\nThen add yours!\n\n`\n\nadd_action( 'wp_head', function () {\n\t/** @var {string} $custom_css - your custom css for the dark mode */\n\t$custom_css = \"html.dark-mode body {\n\t\t--wp--preset--color--background: #232323;\n\t\t--wp--preset--color--foreground: #f3f3f3;\n\t}\n\t.dark-mode-switch::before {\n\t\twidth: 1.6rem;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tfont-size: 1.6rem;\n\t\tline-height: 1.6rem;\n\t\tcontent: '🌞'\n\t}\n\t.dark-mode .dark-mode-switch::before {\n\t\tcontent: '🌚'\n\t}\";\n\techo \"\u003cstyle id='dark-mode-custom'\u003e$custom_css\u003c/style\u003e\";\n}, 20 );\n\n`\n\nPlease support the plugin posting your custom style and a screenshot in the WordPress support forum section!\n\n== Frequently Asked Questions ==\n\n**Q: Does this plugin work with all WordPress themes?**\nA: Dark Mode Block is designed to be compatible with most of FSE WordPress themes. However, some themes may require additional styling adjustments for optimal dark mode functionality.\n\n== Changelog ==\n\n= 0.1.0 =\n* Initial release\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikyo%2Fdark-mode-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferikyo%2Fdark-mode-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikyo%2Fdark-mode-block/lists"}