Space Moodle Theme
  • Space 2.5.x
  • Changelog
    • Discover the Space version 2.5.0
  • Requirements
  • Getting started
    • Support Page
    • Theme Installation/Update
    • Translations
    • Demo content
    • Export and import Moodle site configurations
    • RTL Interface
    • Paid Courses
    • 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
      • Hide Fields on Sign-up Page
    • ⭐Front Page Blocks
      • 🕶️Show/hide for non-logged in users
      • Block Order
      • Block #0 - Default Moodle Front Page Blocks
      • Hero
        • Block #1
        • Block #2 (Hero Video)
        • Block #21
      • FAQ
        • Block #4
        • Re-usage FAQ Snippet
      • 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
      • Course List
    • Sidebar
    • Sidebar navigation
    • Footer
    • Custom alert
    • Advanced settings
    • Google/Custom Fonts and GDPR
    • Default Moodle Footer Links
  • More
    • Server recommendations
    • Graphics, Icons etc.
Powered by GitBook
On this page
  • Dedicated custom logo for the dark mode
  • Only dark mode

Was this helpful?

  1. Theme Settings

Dark Mode

PreviousGeneralNextShow/hide on the Dark Mode

Last updated 2 years ago

Was this helpful?

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.