MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

css switch Module



  • Since I use my mirror on a monitor in the kitchen, I wrote a module that changes the entries in the Custom.css according

    Entry in the config

    	{
    		module: "cssswitch",
    		    config: {
                             evening_start: 21,        
                             evening_stop: 6,
                  }  
    	},
    

    Example for the custom.css

    /**
     * morning style
     */
     
    .morning {
      background: #d4d4d4;
    }
    
    .morning .dimmed  {
      color: #2c3e50;
    }
    .morning .normal {
      color: #2c3e50;
    }
    .morning .bright  {
      color: #2c3e50;
    }
    /**
     * So that all modules have the same style
     * insert new modules with.module.Modulname
     * module.background-color_border_shadow
     */
     
     .morning .module.clock,
     .morning .module.calendar,
     .morning .module.weatherforecast,
     .morning .module.currentweather {
      font-family: "Lato", sans-serif;
      border: 1px solid #fff;
      background-color: #f6f5f0;
      padding: 1.5rem 2rem;
      border-radius: 10px;
      box-shadow: inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #ffffff;
    }
    
    .morning .clock .time {
     color: #fffff;
     font-size: 100px;
     text-align: center;
     margin-top: 30px;
     font-family: "Lato", sans-serif;
    }
    .morning .clock .date  {
      font-weight: bold;
      color:#2c3e50;
      font-size: 20px;
      text-transform: uppercase;
      font-family: "Lato", sans-serif;
      text-align: center;
      background-color:#d4d4d4;
      box-shadow: inset 1px 1px 2.5px rgba(0, 0, 0, 0.25), inset -2.5px -2.5px 5px rgba(255, 255, 255, 0.3);
      transition: all 0.2s ease-in-out;
      padding: 0.25rem 0.25rem;
      border-radius: 8px;
    }
    
    
     /**
     * evening style
     */
    
    .evening {
      background: #151515;
    }
    
    .evening .dimmed  {
      color:#d4d4d4;
    }
    .evening .normal  {
      color:#d4d4d4;
    }
    .evening .bright  {
      color:#d4d4d4;
    }
    /**
     * So that all modules have the same style
     * insert new modules with.module.Modulname
     * module.background-color_border_shadow
     */
     .evening .module.clock,
     .evening .module.calendar,
     .evening .module.weatherforecast,
     .evening .module.currentweather {
      padding:8px;
      background: #111;
      background: linear-gradient(#1b1b1b, #111);
      border: 1px solid #000;
      border-radius: 8px;
      box-shadow: inset 0 0 0 1px #272727;
      z-index: 1;
      font-family: "Lato", sans-serif;
    }
    



  • Project Sponsor Module Developer

    @Piranha1605

    I likey!



  • @Mykle1

    I have to thank you, many of your contributions prevented me from throwing the MagicMirror project into the trash 🙂


  • Project Sponsor Module Developer

    @Piranha1605 said in css switch Module:

    I have to thank you, many of your contributions prevented me from throwing the MagicMirror project into the trash

    You’re welcome, mate. I hope you enjoy them as much as I did while learning how to make them. 👍


Log in to reply