{"id":14974440,"url":"https://github.com/david-griffiths/nova-dark-theme","last_synced_at":"2025-05-07T15:21:13.981Z","repository":{"id":54709999,"uuid":"168036759","full_name":"David-Griffiths/Nova-Dark-Theme","owner":"David-Griffiths","description":"A dark theme for Laravel Nova","archived":false,"fork":false,"pushed_at":"2021-02-02T21:30:29.000Z","size":31,"stargazers_count":71,"open_issues_count":6,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-17T22:48:35.697Z","etag":null,"topics":["codemirror","color","color-scheme","css3","dark-theme","dashboard","eye-care","eye-strain","laravel","laravel-5-package","laravel-package","laravel5","laravelnova","nova","theme","themes","toggle","ui","vue","vue-component"],"latest_commit_sha":null,"homepage":null,"language":"PHP","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/David-Griffiths.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}},"created_at":"2019-01-28T21:01:31.000Z","updated_at":"2024-09-24T09:25:24.000Z","dependencies_parsed_at":"2022-08-14T00:40:27.603Z","dependency_job_id":null,"html_url":"https://github.com/David-Griffiths/Nova-Dark-Theme","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Griffiths%2FNova-Dark-Theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Griffiths%2FNova-Dark-Theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Griffiths%2FNova-Dark-Theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Griffiths%2FNova-Dark-Theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/David-Griffiths","download_url":"https://codeload.github.com/David-Griffiths/Nova-Dark-Theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252902718,"owners_count":21822288,"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":["codemirror","color","color-scheme","css3","dark-theme","dashboard","eye-care","eye-strain","laravel","laravel-5-package","laravel-package","laravel5","laravelnova","nova","theme","themes","toggle","ui","vue","vue-component"],"created_at":"2024-09-24T13:50:34.108Z","updated_at":"2025-05-07T15:21:13.962Z","avatar_url":"https://github.com/David-Griffiths.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n\tNova Dark Theme\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cstrong\u003eA dark theme for \u003ca href=\"https://nova.laravel.com/\"\u003eLaravel Nova\u003c/a\u003e to save your tired eyes :eyes:\u003c/strong\u003e\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://packagist.org/packages/david-griffiths/nova-dark-theme\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/release/david-griffiths/nova-dark-theme.svg?label=version\u0026style=flat\" alt=\"Latest Stable Version\"\u003e\n  \u003c/a\u003e\n    \n  \u003ca href=\"https://packagist.org/packages/david-griffiths/nova-dark-theme\"\u003e\n    \u003cimg src=\"https://poser.pugx.org/david-griffiths/nova-dark-theme/downloads\" alt=\"Downloads\"\u003e\n  \u003c/a\u003e\n  \n  \u003ca href=\"https://packagist.org/packages/david-griffiths/nova-dark-theme\"\u003e\n    \u003cimg src=\"https://poser.pugx.org/david-griffiths/nova-dark-theme/license\" alt=\"License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://user-images.githubusercontent.com/1121864/52905434-20b50a80-3232-11e9-8755-4e7ea49ca771.gif\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/1121864/52905434-20b50a80-3232-11e9-8755-4e7ea49ca771.gif\" alt=\"Dark Theme Toggle Switch\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nInstallation\n----------\n\nFirst use composer to pull in the project:\n\n`composer require david-griffiths/nova-dark-theme`\n\n(Remember that you can install multiple themes with Nova. So you don't have to choose between this and another.)\n\nNext you need to activate dark mode. To help you, there are several convenience commands included...\n\nAdd/Remove Toggle Switch From Menu\n----------\n\nThis is probably what you're looking for, as it lets you easily turn on dark mode at night.\n\n![toggle](https://user-images.githubusercontent.com/1121864/52905532-6d4d1580-3233-11e9-9b30-e75625615db4.png) \n\n`php artisan nova-dark-theme:add-switch`\n\nIf you've not made an over-writeable copy of Nova's user menu (the one in the top right), this command does that first of all. Then it adds the Vue component, which will look like this:\n\n```php\n        \u003cli\u003e\n            \u003cnova-dark-theme-toggle\n                label=\"{{ __('Dark Theme') }}\"\n            \u003e\u003c/nova-dark-theme-toggle\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/dropdown-menu\u003e\n```\n\n---\n\nTo remove the switch from your menu, you could edit the file yourself, or run this:\n\n`php artisan nova-dark-theme:remove-switch`\n\nSet Dark Mode On/Off By Default\n----------\n\nThis can be used with the toggle switch or without it. If you're not using the toggle switch then when you set dark mode ON, it will stay on and not be changeable by users. If you _are_ using the switch, then the below commands will only set the theme state when the page first loads. The user will then be able to flip the switch whenever they like.\n\n`php artisan nova-dark-theme:on`\n\n`php artisan nova-dark-theme:off`\n\nThese commands add or remove a css class called `nova-dark-theme` from the HTML tag in Nova's main layout template.\nAgain, we copy this file to your resources directory (if you've not done so already) before making the change.\n\n(:exclamation: _You might need to run `php artisan view:clear` or `php artisan view:cache` before seeing the results_)\n\n\nHow The CSS Works\n----------\n\nWe use a css filter to invert the colors, then some manual tweaks for the sidebar and logo areas. So white becomes black, which you should keep in mind when adding any custom css colors.\n\nCode Fields\n----------\n\nOne item it doesn't style for you is the Nova `Code` field. I don't want impose a CodeMirror theme on you when you can [pick one from here](https://codemirror.net/demo/theme.html#default) and set it like this:\n\n```php\nCode::make('MyTextField')-\u003eoptions(['theme' =\u003e 'base16-light'])\n```\n\n(:exclamation: _Remember to pick a light coloured CodeMirror theme if you want it to appear dark in Nova after the colors get inverted_)\n\n\nLicense\n----------\n\nMIT License (MIT). Please see [License File](LICENSE) for more.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-griffiths%2Fnova-dark-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavid-griffiths%2Fnova-dark-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-griffiths%2Fnova-dark-theme/lists"}