@alihbuzaid/ember-ui/addon/components/layout/header/dark-mode-toggle.js

Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action, computed } from '@ember/object';

export default class LayoutHeaderDarkModeToggleComponent extends Component {
    @service theme;

    @computed('theme.currentTheme') get userPrefersDarkMode() {
        return this.theme.currentTheme === 'dark';
    }

    @action switchDarkMode(darkModeOn) {
        this.theme.setTheme(darkModeOn ? 'dark' : 'light');
    }
}