[SOLVED] AngularJS Material dark mode switch not changing background

AngularJS Material dark mode switch not changing background

I want to implement a darkmode switch in my nodeJS, express and angular project, and it works perfect. But the background isn't changing...

The buttons, toolbar and fonts on them are changing color, but the background stays white which kind off defeats the purpose of a darkmode...

Here is my code to change the theme in the controller

angularApp.controller('global', function($scope) {
    $scope.changeTheme = function(){
        $scope.theme = $scope.darkmode ? 'dark' : 'default';
    }
});

And here is the code of my angularApp

var angularApp = angular.module('app', ['ngMaterial'])
.config(function($mdThemingProvider) {
    $mdThemingProvider.alwaysWatchTheme(true);
..
.. The theming configs ..

I am calling .dark();.

And finally, here is my switch to change the themes

md-switch(ng-change="changeTheme()" ng-model="darkmode") Darkmode

The HTML is written in Pug

The themes are called default and dark

Solution

I had the md-theme attribute on the <body>. I put the md-theme attribute on the <md-content> tag (that I was initially missing) and it worked.

Thanks to Edric for the codepen which helped me figure this out