PHPackages david-griffiths/nova-dark-theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Admin Panels](/categories/admin) 4. / 5. david-griffiths/nova-dark-theme ActiveLibrary[Admin Panels](/categories/admin) david-griffiths/nova-dark-theme =============================== A dark theme for Laravel Nova v1.0(7y ago)71600.0k↓37.2%11[4 issues](https://github.com/David-Griffiths/Nova-Dark-Theme/issues)[2 PRs](https://github.com/David-Griffiths/Nova-Dark-Theme/pulls)MITPHPPHP >=7.1.0 Since Jan 29Pushed 5y ago2 watchersCompare [ Source](https://github.com/David-Griffiths/Nova-Dark-Theme)[ Packagist](https://packagist.org/packages/david-griffiths/nova-dark-theme)[ Docs](https://github.com/David-Griffiths/Nova-Dark-Theme)[ RSS](/packages/david-griffiths-nova-dark-theme/feed)WikiDiscussions master Synced 3d ago READMEChangelog (2)DependenciesVersions (3)Used By (0) Nova Dark Theme ================= [](#nova-dark-theme) **A dark theme for [Laravel Nova](https://nova.laravel.com/) to save your tired eyes 👀** [ ![Latest Stable Version](https://camo.githubusercontent.com/b79182b2d392d3f183b9c201da1e57a6d653ada0e5f83351718a5bbdbb2090f8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f64617669642d6772696666697468732f6e6f76612d6461726b2d7468656d652e7376673f6c6162656c3d76657273696f6e267374796c653d666c6174) ](https://packagist.org/packages/david-griffiths/nova-dark-theme) [ ![Downloads](https://camo.githubusercontent.com/a4ab10d082a171735a4169061cd58e972b3f8a1609a0396515ef9a26b64fbffc/68747470733a2f2f706f7365722e707567782e6f72672f64617669642d6772696666697468732f6e6f76612d6461726b2d7468656d652f646f776e6c6f616473) ](https://packagist.org/packages/david-griffiths/nova-dark-theme) [ ![License](https://camo.githubusercontent.com/fcef82f9336ebefd5e0e4a0f12c2732325fe4f63d53e8a1fb5208b3ff86dad57/68747470733a2f2f706f7365722e707567782e6f72672f64617669642d6772696666697468732f6e6f76612d6461726b2d7468656d652f6c6963656e7365) ](https://packagist.org/packages/david-griffiths/nova-dark-theme) [ ![Dark Theme Toggle Switch](https://user-images.githubusercontent.com/1121864/52905434-20b50a80-3232-11e9-8755-4e7ea49ca771.gif) ](https://user-images.githubusercontent.com/1121864/52905434-20b50a80-3232-11e9-8755-4e7ea49ca771.gif) Installation ------------ [](#installation) First use composer to pull in the project: `composer require david-griffiths/nova-dark-theme` (Remember that you can install multiple themes with Nova. So you don't have to choose between this and another.) Next you need to activate dark mode. To help you, there are several convenience commands included... Add/Remove Toggle Switch From Menu ---------------------------------- [](#addremove-toggle-switch-from-menu) This is probably what you're looking for, as it lets you easily turn on dark mode at night. [![toggle](https://user-images.githubusercontent.com/1121864/52905532-6d4d1580-3233-11e9-9b30-e75625615db4.png)](https://user-images.githubusercontent.com/1121864/52905532-6d4d1580-3233-11e9-9b30-e75625615db4.png) `php artisan nova-dark-theme:add-switch` If 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: ``` ``` --- To remove the switch from your menu, you could edit the file yourself, or run this: `php artisan nova-dark-theme:remove-switch` Set Dark Mode On/Off By Default ------------------------------- [](#set-dark-mode-onoff-by-default) This 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. `php artisan nova-dark-theme:on` `php artisan nova-dark-theme:off` These commands add or remove a css class called `nova-dark-theme` from the HTML tag in Nova's main layout template. Again, we copy this file to your resources directory (if you've not done so already) before making the change. (:exclamation: *You might need to run `php artisan view:clear` or `php artisan view:cache` before seeing the results*) How The CSS Works ----------------- [](#how-the-css-works) We 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. Code Fields ----------- [](#code-fields) One 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: ``` Code::make('MyTextField')->options(['theme' => 'base16-light']) ``` (:exclamation: *Remember to pick a light coloured CodeMirror theme if you want it to appear dark in Nova after the colors get inverted*) License ------- [](#license) MIT License (MIT). Please see [License File](LICENSE) for more. ### Health Score 39 — LowBetter than 84% of packages Maintenance19 Infrequent updates — may be unmaintained Popularity50 Moderate usage in the ecosystem Community12 Small or concentrated contributor base Maturity57 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~18 days Total 2 Last Release 2695d ago Major Versions v0.1 → v1.02019-02-16 ### Community Maintainers ![](https://www.gravatar.com/avatar/873205ec10db0590d2c6b97d465e55e2e124d0d9651142fc282b23392972c132?d=identicon)[DavidG](/maintainers/DavidG) --- Top Contributors [![David-Griffiths](https://avatars.githubusercontent.com/u/1121864?v=4)](https://github.com/David-Griffiths "David-Griffiths (15 commits)") --- Tags codemirrorcolorcolor-schemecss3dark-themedashboardeye-careeye-strainlaravellaravel-5-packagelaravel-packagelaravel5laravelnovanovathemethemestoggleuivuevue-componentlaravelthemenovadark ### Embed Badge ![Health badge](/badges/david-griffiths-nova-dark-theme/health.svg) ``` [![Health](https://phpackages.com/badges/david-griffiths-nova-dark-theme/health.svg)](https://phpackages.com/packages/david-griffiths-nova-dark-theme) ``` ### Alternatives [pdmfc/nova-action-button A Laravel Nova field to run actions. 37753.3k1](/packages/pdmfc-nova-action-button)[khalin/nova-link-field A Laravel Nova Link field. 31587.5k2](/packages/khalin-nova-link-field)[cloudcake/nova-fixed-bars A Laravel Nova package to add a responsive and/or fixed sidebar and navigation bar to the Nova admin UI. 33215.1k2](/packages/cloudcake-nova-fixed-bars)[stephenlake/nova-fixed-bars A Laravel Nova package to add a responsive and/or fixed sidebar and navigation bar to the Nova admin UI. 3377.9k](/packages/stephenlake-nova-fixed-bars) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)