Moon IOMAD Theme
  • Moon 1.x
  • Requirements
  • Changelog
  • Getting started
    • Theme Installation/Update
    • Recommended Plugins to Install
      • Atto Editor: Full Screen
      • Atto Editor: Advanced Link
    • Translations
    • Demo content
    • RTL Interface
    • Global Styles
      • Typography
      • UI Elements
      • Headings/Text Modifications
  • Theme Settings
    • General
    • Dark Mode
      • 🌑Show/hide on the Dark Mode
    • SEO
    • Customization
      • Google Fonts
      • Colors
    • Login page
    • ⭐Front Page Blocks
      • 🕶️Show/hide for non-logged in users
      • Block Order
      • Block #0 - Default Moodle Front Page Blocks
      • Hero
        • Block #1, #2
        • Block #2 (Hero Video)
        • Block #3
      • FAQ
        • Block #4
      • Grid Content
        • Grid Content #1
        • Grid Content #2
        • Grid Content #3
        • Grid Content #4
        • Grid Content #5
        • Grid Content #6
        • Grid Content #7
        • Grid Content #8
        • Grid Content #9
      • Content
        • Content #1
        • Content #2
        • Content #3
        • Block #5 - Logotypes
      • Categories & Icons List
        • Categories List #1
        • Categories List #2
        • Logotypes List #1
        • Course List
        • Icons List
      • Stats
        • Stats #1
        • Stats #2
      • Team
        • Team #1
        • Team #2
        • Team #3
      • Testimonials
        • Testimonials #1
        • Testimonials #2
        • Testimonials #3
      • How to add more item to blocks?
    • Top Bar
    • Course Page/Card
      • Course Card
      • Main Course Page
      • Course List
    • Sidebar
    • Sidebar navigation
    • Custom alert
    • Advanced settings
    • Google/Custom Fonts and GDPR
  • More
    • Server recommendations
    • Graphics, Icons etc.
Powered by GitBook
On this page
  • Dedicated custom logo for the dark mode
  • Only dark mode
  1. Theme Settings

Dark Mode

Last updated 2 years ago

The dark mode is optional. The color pallet is pre-defined so it is impossible to change it using theme settings. The only solution to change colors is to override CSS.

To change the dark mode UI you need to add .theme-dark class.

.theme-dark .sampleClass {}

Dedicated custom logo for the dark mode

There are dedicated fields for your logo in dark mode:

Sidebar -> Sidebar Logo (Dark mode) Login page -> Login Page -> Custom Logo on the Login Page (Dark Mode)

Only dark mode

If you want to use only a dark interface then change settings like the settings below:

Turn on -> General -> Only Dark Mode UI. If on, then the dark mode switcher will be automatically hidden.