felixhahnweilheim / humhub-dark-mode

Dark Mode for HumHub

👋 Hi, I’m Felix Hahn,

I am developping modules for HumHub like the free Dark Mode module and the Verified module which I am developping collaboratively with GreenMeteor.

🌱 My first published repository is a child theme for Humhub.

📫 Contact: [email protected]

🎵 Actually I am a professional harpist. If you want to know more about me, please visit my website hahn-felix.de and subscribe to my YouTube channel.

humhub-dark-mode's Issues

Internal server error

Hi, HumHub generates an error message when trying to enable/disable Dark Mode from User Profile/General. Button on Top Bar works as normal.

Is it not applicable for v1.12.0?

I'm using a clean theme
Is it not applicable for v1.12.0?

Crash on theme changing

Go to "Administration" -> "Settings" -> "Appearance" and change the theme.
You get the following error and the theme is not changed.

yii\base\ErrorException: Attempt to read property "basePath" on null in /var/www/hhdev/protected/modules/dark-mode/models/Config.php:131
Stack trace:
#0 /var/www/hhdev/protected/modules/dark-mode/models/Config.php(131): yii\web\ErrorHandler->handleError('...', '...', '...', '...')
#1 /var/www/hhdev/protected/modules/dark-mode/models/Config.php(29): humhub\modules\darkMode\models\Config->getRecommendedTheme()
#2 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/BaseObject.php(109): humhub\modules\darkMode\models\Config->init()
#3 /var/www/hhdev/protected/modules/dark-mode/Events.php(35): humhub\modules\darkMode\models\Config->__construct('...')
#4 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Event.php(312): humhub\modules\darkMode\Events::onDesignSettingForm('...')
#5 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Event.php(312): ::call_user_func:{/var/www/hhdev/protected/vendor/yiisoft/yii2/base/Event.php:312}(callback: '...', args: Array)
#6 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Component.php(642): yii\base\Event::trigger(class: '...', name: '...', event: '...')
#7 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Model.php(399): humhub\modules\admin\models\forms\DesignSettingsForm->trigger(name: '...', event: '...')
#8 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Model.php(370): humhub\modules\admin\models\forms\DesignSettingsForm->afterValidate()
#9 /var/www/hhdev/protected/humhub/modules/admin/controllers/SettingController.php(225): humhub\modules\admin\models\forms\DesignSettingsForm->validate(attributeNames: '...', clearErrors: '...')
#10 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/InlineAction.php(57): humhub\modules\admin\controllers\SettingController->actionDesign()
#11 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/InlineAction.php(57): ::call_user_func_array:{/var/www/hhdev/protected/vendor/yiisoft/yii2/base/InlineAction.php:57}(callback: '...', args: '...')
#12 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Controller.php(178): yii\base\InlineAction->runWithParams(params: '...')
#13 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Module.php(552): humhub\modules\admin\controllers\SettingController->runAction(id: '...', params: '...')
#14 /var/www/hhdev/protected/vendor/yiisoft/yii2/web/Application.php(103): humhub\components\Application->runAction(route: '...', params: '...')
#15 /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Application.php(384): humhub\components\Application->handleRequest(request: '...')
#16 /var/www/hhdev/index.php(26): humhub\components\Application->run()
#17 {main}
Copy StacktraceSearch StackoverflowSearch GoogleError
PHP Warning – [yii\base\ErrorException](https://www.yiiframework.com/doc-2.0/yii-base-errorexception.html)
Attempt to read property "basePath" on null
1. in /var/www/hhdev/protected/modules/dark-mode/models/Config.phpat line 131
122123124125126127128129130131132133134135136137138    public function getRecommendedTheme()
    {
        $baseTheme = Yii::$app->view->theme->name;
 
        if ($baseTheme == 'HumHub') {
            return 'DarkHumHub';
        } elseif ($baseTheme == 'enterprise') {
            return 'DarkEnterprise';
        } else {
            $basePath = ThemeHelper::getThemeByName($baseTheme)->basePath; 
            if (file_exists($basePath . DIRECTORY_SEPARATOR . 'css' . DIRECTORY_SEPARATOR . 'dark.css')) {
                return $baseTheme . self::DARK_CSS_SUFFIX;
            }
        }
        return '';
    }
}
2. in /var/www/hhdev/protected/modules/dark-mode/models/Config.php at line 131– [yii\web\ErrorHandler::handleError](https://www.yiiframework.com/doc-2.0/yii-web-errorhandler.html#handleError()-detail)(4294967295 => '2', 0 => ''Attempt to read property "baseP...', 1 => ''/var/www/hhdev/protected/module...', 2 => '131')
125126127128129130131132133134135136137 
        if ($baseTheme == 'HumHub') {
            return 'DarkHumHub';
        } elseif ($baseTheme == 'enterprise') {
            return 'DarkEnterprise';
        } else {
            $basePath = ThemeHelper::getThemeByName($baseTheme)->basePath; 
            if (file_exists($basePath . DIRECTORY_SEPARATOR . 'css' . DIRECTORY_SEPARATOR . 'dark.css')) {
                return $baseTheme . self::DARK_CSS_SUFFIX;
            }
        }
        return '';
    }
3. in /var/www/hhdev/protected/modules/dark-mode/models/Config.php at line 29– humhub\modules\darkMode\models\Config::getRecommendedTheme()
23242526272829303132333435        $settings = Yii::$app->getModule('dark-mode')->settings;
 
        $this->theme = $settings->get('theme');
 
        // If no setting was found, get recommended theme or fallback (DarkHumHub) 
        if (empty($this->theme)) {
            $this->theme = self::getRecommendedTheme();
            if (empty($this->theme)) {
                $this->theme = self::FALLBACK;
            }
        }
    }
 
4. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/BaseObject.php at line 109– humhub\modules\darkMode\models\Config::init()
5. in /var/www/hhdev/protected/modules/dark-mode/Events.php at line 35– humhub\modules\darkMode\models\Config::__construct(4294967295 => '???')
29303132333435363738394041        $oldTheme = Yii::$app->view->theme->name;
        $newTheme = $event->sender->theme;
 
        // Clear dark theme setting if base theme has changed
        if ($oldTheme !== $newTheme) {
 
            $config = new Config();
            $config->theme = '';
            $config->save();
        }
    }
 
    public static function onAfterModuleEnabled(ModuleEvent $event)
6. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Event.php at line 312– humhub\modules\darkMode\Events::onDesignSettingForm(4294967295 => 'class yii\base\Event { public $n...')
7. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Event.php at line 312– call_user_func:{/var/www/hhdev/protected/vendor/yiisoft/yii2/base/Event.php:312}('callback' => '[0 => 'humhub\\modules\\darkMode...', 'args' => [])
8. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Component.php at line 642– [yii\base\Event::trigger](https://www.yiiframework.com/doc-2.0/yii-base-event.html#trigger()-detail)('class' => 'class humhub\modules\admin\model...', 'name' => ''afterValidate'', 'event' => 'NULL')
9. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Model.php at line 399– humhub\modules\admin\models\forms\DesignSettingsForm::trigger('name' => ''afterValidate'', 'event' => '???')
10. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Model.php at line 370– humhub\modules\admin\models\forms\DesignSettingsForm::afterValidate()
11. in /var/www/hhdev/protected/humhub/modules/admin/controllers/SettingController.php at line 225– humhub\modules\admin\models\forms\DesignSettingsForm::validate('attributeNames' => '???', 'clearErrors' => '???')
219220221222223224225226227228229230231    }
 
 
    public function actionDesign()
    {
        $form = new DesignSettingsForm;
        if ($form->load(Yii::$app->request->post()) && $form->validate() && $form->save()) {
            $this->view->saved();
            return $this->redirect([
                '/admin/setting/design'
            ]);
        }
 
12. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/InlineAction.php at line 57– humhub\modules\admin\controllers\SettingController::actionDesign()
13. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/InlineAction.php at line 57– call_user_func_array:{/var/www/hhdev/protected/vendor/yiisoft/yii2/base/InlineAction.php:57}('callback' => '[0 => class humhub\modules\admin...', 'args' => '[]')
14. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Controller.php at line 178– [yii\base\InlineAction::runWithParams](https://www.yiiframework.com/doc-2.0/yii-base-inlineaction.html#runWithParams()-detail)('params' => '['_pjax' => '#layout-content', '...')
15. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Module.php at line 552– humhub\modules\admin\controllers\SettingController::runAction('id' => ''design'', 'params' => '['_pjax' => '#layout-content', '...')
16. in /var/www/hhdev/protected/vendor/yiisoft/yii2/web/Application.php at line 103– humhub\components\Application::runAction('route' => ''admin/setting/design'', 'params' => '['_pjax' => '#layout-content', '...')
17. in /var/www/hhdev/protected/vendor/yiisoft/yii2/base/Application.php at line 384– humhub\components\Application::handleRequest('request' => 'class humhub\components\Request ...')
18. in /var/www/hhdev/index.php at line 26– humhub\components\Application::run()
20212223242526    require(__DIR__ . '/protected/humhub/config/web.php'),
    (is_readable(__DIR__ . '/protected/config/dynamic.php')) ? require(__DIR__ . '/protected/config/dynamic.php') : [],
    require(__DIR__ . '/protected/config/common.php'),
    require(__DIR__ . '/protected/config/web.php')
);
 
(new humhub\components\Application($config))->run();
$_GET = [
    '_pjax' => '#layout-content',
    '_' => '1696240179783',
];

$_POST = [
    '_csrf' => 'UUBdkyM77aEWhoZ9IrpKMrq03KEnAbulPy4lkHxt_OIgCQfRTnim2UnZzR9Kg3l69MPlk3ZEif1VRF3aNwuE0w==',
    'DesignSettingsForm' => [
        'theme' => 'clean-contrasted',
        'paginationSize' => '10',
        'displayNameFormat' => '{profile.firstname} {profile.lastname}',
        'displayNameSubFormat' => 'title',
        'spaceOrder' => '0',
        'defaultStreamSort' => 'u',
        'dateInputDisplayFormat' => '',
        'horImageScrollOnMobile' => '1',
    ],
    'logo' => [
        '',
    ],
    'icon' => [
        '',
    ],
];

Rename temporary.less with dark-mode.less

When analyzing style with the browser developer tools, we have:

If think it would be better to display dark-mode.less instead of temporary.less

Change active buttons to white background

In the marketplace we have:

It should be:

I think it's here, but I didn't test it on other pages:
https://github.com/felixhahnweilheim/humhub-dark-mode/blob/main/resources/DarkHumHub/less/theme.less#L176-L178

Styles Roadmap

• core views

Module compatibility

• Messenger
• Calendar
• • External Calendar
• Wiki
• Tasks
• Polls
• Files
• Link List
• Bookmark
• Custom Pages
• Gallery
• Legal Tools
• Report Content
• Breaking News
• Weather
• Birthday Widget
• Most Active Users
• New Members Widget
• Social Share

Bug when logged out

"using the switch on home page for a user that's not logged in, drives to loggin page."
originally posted by @punkyard #50

This seems to be a new bug as it worked in the past.

Invalid path alias: @dark-mode\resources\DarkHumHub\css

It seems like the issue was caused by the lines shown below. I needed to edit the directory separator to a forward-slash string and that solved the issue.

I am running on a local machine in Xampp for Windows.

Can't enable module after installation

I'm running HumHub 1.15.2 and can't enable the module after installation.

First, I had dark mode 1.0.4 installed and couldn't enable it, there was no debugging output in the HumHub logs.

Today I did an update to dark mode 1.0.5 and this appeared in the logs during the process:

yii\base\ErrorException: Attempt to read property "settings" on null in /***/protected/modules/dark-mode/models/Config.php:25
Stack trace:
#0 /***/protected/modules/dark-mode/models/Config.php(25): yii\base\ErrorHandler->handleError()
#1 /***/protected/vendor/yiisoft/yii2/base/BaseObject.php(109): humhub\modules\darkMode\models\Config->init()
#2 /***/protected/modules/dark-mode/assets/DarkStyleAsset.php(40): yii\base\BaseObject->__construct()
#3 /***/protected/vendor/yiisoft/yii2/base/BaseObject.php(109): humhub\modules\darkMode\assets\DarkStyleAsset->init()
#4 /***/protected/humhub/components/Module.php(183): yii\base\BaseObject->__construct()
#5 /***/protected/humhub/modules/marketplace/services/ModuleService.php(105): humhub\components\Module->publishAssets()
#6 /***/protected/humhub/modules/marketplace/controllers/UpdateController.php(48): humhub\modules\marketplace\services\ModuleService->update()
#7 [internal function]: humhub\modules\marketplace\controllers\UpdateController->actionInstall()
#8 /***/protected/vendor/yiisoft/yii2/base/InlineAction.php(57): call_user_func_array()
#9 /***/protected/vendor/yiisoft/yii2/base/Controller.php(178): yii\base\InlineAction->runWithParams()
#10 /***/protected/vendor/yiisoft/yii2/base/Module.php(552): yii\base\Controller->runAction()
#11 /***/protected/vendor/yiisoft/yii2/web/Application.php(103): yii\base\Module->runAction()
#12 /***/protected/vendor/yiisoft/yii2/base/Application.php(384): yii\web\Application->handleRequest()
#13 /***/index.php(25): yii\base\Application->run()
#14 {main} 

I still can't enable the module after it's installation and there's no additional debugging output in the HumHub logs after I hit "enable".

Since this is very little information to properly debug this, let me know if there's something I can do to help resolving this.

Pop-Up Windows don't follow style (dark)

Hi Felix,
first of all, thanks so much for building this nice Module for Humhub!
After installing I got some complaints from new users of my instance that they can not read the "Intro Guide for Newbies" - the content "disappeared".

This is what pop-up window content looks like with "dark" enabled.

Running Humhub v1.15 with Clean theme!

Maybe you can look into this?

Markdown Editor background color

Include richtext fields, currently they show grey text on white background.

Toggle with JavaScript

Have you thought of handling the toggle through JS?

Here's an example

humhub.module('dark-mode').on('humhub:ready', function(event, el) {
    const toggleSwitch = document.createElement('input');
    toggleSwitch.setAttribute('type', 'checkbox');
    toggleSwitch.setAttribute('id', 'modeToggle');

    const label = document.createElement('label');
    label.setAttribute('for', 'modeToggle');
    label.textContent = 'Switch mode:';

    const contentContainer = document.querySelector('.dark-mode-container-selector');
    contentContainer.appendChild(label);
    contentContainer.appendChild(toggleSwitch);

    // Function to set the theme based on the toggle state
    function switchTheme(e) {
        if (e.target.checked) {
            // Apply night mode theme or trigger HumHub's theme change method
            // Example: humhub.theme.apply('night-mode');
        } else {
            // Apply day mode theme or trigger HumHub's theme change method
            // Example: humhub.theme.apply('day-mode');
        }
    }

    // Event listener for the toggle switch
    toggleSwitch.addEventListener('change', switchTheme);

    // Logic to check user's preference from HumHub settings or storage

    // Save user's preference to HumHub settings or storage
    toggleSwitch.addEventListener('change', function(e) {
        if (e.target.checked) {
            // Save night mode preference
            // Example: humhub.settings.set('theme', 'night');
        } else {
            // Save day mode preference
            // Example: humhub.settings.set('theme', 'day');
        }
    });
});

Gallery

When changing theme, if a dark CSS exists, automatically select this theme in the module settings

1. Go to Administration -> Settings -> Appearance
2. Select a theme having a dark CSS (e.g. Community theme, Enterprise theme or Clean theme)
3. In the Dark Mode module configuration, this theme should be automatically selected

New option: always light theme by default

hi
when dark theme is installed, we have a nice switch in the middle of the menu top, which allows people to choose which mode they prefer. But also once the module is installed, by default, the home page is shown in the dark mode.

it would be nice to be able to set this switch to a default position in order to keep the home page bright AND offer the possibility to switch to dark.

Finally, using the switch on home page for a user that's not logged in, drives to loggin page. Which is not the result we expected.

Thanks a lot for your concern and if can make it evolve ✌️

support vcard module

see https://community.humhub.com/comment/perma?id=47472