Add a dark mode

David N. · December 2, 2022

Most of our user base browse our forum in dark recording studios and complain about the bright website, being used to dark mode. I wish Invision would add a Dark mode option.

I know there are workarounds, and I know about the Dark Mode 3rd party plug-in but it's got its own issues, so I would favor a built-in user setting in the core software.

Luuuk · December 2, 2022

It is a recurring request:

Edited December 2, 2022 by Luuuk

Interferon · December 2, 2022

Our dark forum skin is the default with minimal changes and most of the colors picked in the visual editor. It's not very hard to do.

David N. · December 2, 2022

4 hours ago, Interferon said:

It's not very hard to do.

I know, hI agree, and I don't mind if I have to design my own dark mode theme. What I wish for is a simple Light/Dark switch at the top right of the website. I'm no designer, but basically I'm imagining something like this:

ﬁ

Day_ · December 2, 2022

Default dark mode for IP board with a more intuitive switch than the theme drop down.

iPad app for Whatsapp.

iPad app for Instagram.

Becoming a millionaire.

Marry Margot Robbie

5 things I have accepted will never happen in my lifetime.

aia · December 3, 2022

5 hours ago, Day_ said:

Default dark mode for IP board with a more intuitive switch than the theme drop down.

iPad app for Whatsapp.

iPad app for Instagram.

Becoming a millionaire.

Marry Margot Robbie

5 things I have accepted will never happen in my lifetime.

The last four don't seem so impossible 😉

Kjell Iver Johansen · December 3, 2022

11 hours ago, Day_ said:

Default dark mode for IP board with a more intuitive switch than the theme drop down.

iPad app for Whatsapp.

iPad app for Instagram.

Becoming a millionaire.

Marry Margot Robbie

5 things I have accepted will never happen in my lifetime.

You forgot the Back to top button!

marklcfc · December 3, 2022

If it ever happens it'll be a cloud feature to rub everyones noses in it

Edited December 3, 2022 by marklcfc

AlexJ · December 5, 2022

On 12/3/2022 at 5:42 AM, marklcfc said:

If it ever happens it'll be a cloud feature to rub everyones noses in it

That cracked me up 🙂

David N. · February 2, 2023

I'm still hoping for an easy, elegant and native (no plug-ins) way to toggle dark/light mode on my Invision Community. Here's a toggle switch that is very elegant that hopefully will inspire the Invision Community designers:

AlexJ · February 19, 2023

So IPS now has @Ehren who is best known for what he does. I have like 3-5 themes from him. So now, when we can see dark version in IPS and new changes on default theme like you did for Gallery 🙂

Edited February 19, 2023 by AlexJ

Alexandru · February 19, 2023

<html class="{{if \IPS\Request::i()->cookie['ipsTheme_type'] == 'light'}}theme--light{{elseif \IPS\Request::i()->cookie['ipsTheme_type'] == 'dark'}}theme--dark{{else}}theme--dark{{endif}}">
  <div id='ipsTheme_changer--selector'>
    <i class="fas fa-moon"></i>
    <span>mode</span>
  </div>
  <script type="text/javascript" src='//code.jquery.com/jquery-3.5.1.min.js'></script>
  <script>
    $(document)['ready'](function() {
      if (ips['utils']['cookie']['get']('ipsTheme_type') == 'dark') {
        document['documentElement']['classList']['remove']('theme--light');
        document['documentElement']['classList']['add']('theme--dark')
      } else {
        if (ips['utils']['cookie']['get']('ipsTheme_type') == 'light') {
          document['documentElement']['classList']['remove']('theme--dark');
          document['documentElement']['classList']['add']('theme--light')
        }
      };
      $('#ipsTheme_changer--selector')['click'](function() {
        if (document['documentElement']['classList']['contains']('theme--dark')) {
          document['documentElement']['classList']['remove']('theme--dark');
          document['documentElement']['classList']['add']('theme--light');
          ips['utils']['cookie']['unset']('ipsTheme_type');
          ips['utils']['cookie']['set']('ipsTheme_type', 'light', true)
        } else {
          document['documentElement']['classList']['remove']('theme--light');
          document['documentElement']['classList']['add']('theme--dark');
          ips['utils']['cookie']['unset']('ipsTheme_type');
          ips['utils']['cookie']['set']('ipsTheme_type', 'dark', true)
        }
      })
    });
  </script>

#ipsTheme_changer--selector {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
  cursor: pointer;
  box-shadow: rgb(0 18 46 / 18%) 0px 2px 3px 0px;
  border-radius: 100px;
}
#ipsTheme_changer--selector > i {
  box-shadow: 0 0 10px rgb(17, 138, 240);
  background: linear-gradient(135deg, rgb(39 111 218), rgb(0 161 255));
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  color: #111520;
  font-size: 17px;
}
#ipsTheme_changer--selector > span {
  background: rgb(var(--theme-page_background));
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 45px;
  margin-left: -35px;
  z-index: -1;
  border-radius: 100px;
  padding-right: 20px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgb( var(--theme-text_color) );
  font-weight: 600;
}
#ipsTheme_changer--selector > span:before {
  content: "dark";
  margin-right: 3px;
}
html.theme--dark #ipsTheme_changer--selector > span:before {
  content: "light";
}
html.theme--dark #ipsTheme_changer--selector > .fa-moon:before {
  content: '\f185';
}

I hope it's not too complicated to understand.

The HTML class you'll need to add to your html tag in your theme.
The <script> tag you'll need to add them under the <footer> tag or where you want doesn't matter.
The CSS, I think this is obvious, and the <div id=ipsTheme..> is the button, add it where you want.

CSS was written by me.
JS was not written by me, the author is nowhere to be found 😄 😛 🙂.

Edited February 19, 2023 by drawncodes

Myr · February 19, 2023

It would be nice to have this built-in.

PatrickRQ · February 20, 2023

Yeah, it makes me surprised too, why it is taking so much time to IPS, entire world is DARK already.

Matt · February 20, 2023

It's difficult right now given the AdminCP interface for editing colours. We'd need to duplicate that to offer a dark option, then update all the CSS which would be a lot. When we build a new interface, it's something we'll consider.

Day_ · February 21, 2023

10 hours ago, Matt said:

It's difficult right now given the AdminCP interface for editing colours. We'd need to duplicate that to offer a dark option, then update all the CSS which would be a lot. When we build a new interface, it's something we'll consider.

If it's difficult for the developers, what chance do the clients stand? I made one, can confirm it was a real ball ache.

it's nice to hear it's something you will "consider", would be even better if you would commit to it including a dark mode in the next major revamp.

It is 2023 now, Twitter, Facebook, Instagram, WhatsApp, Discord, YouTube....need I go on, all these you can sneak on in the middle of the night without blinding yourself and waking the Mrs.

PatrickRQ · February 21, 2023

@Day_IPS wants to stay on the bright side of the..

Alexandru · February 26, 2023

On 2/19/2023 at 6:47 PM, drawncodes said:

<html class="{{if \IPS\Request::i()->cookie['ipsTheme_type'] == 'light'}}theme--light{{elseif \IPS\Request::i()->cookie['ipsTheme_type'] == 'dark'}}theme--dark{{else}}theme--dark{{endif}}">
  <div id='ipsTheme_changer--selector'>
    <i class="fas fa-moon"></i>
    <span>mode</span>
  </div>
  <script type="text/javascript" src='//code.jquery.com/jquery-3.5.1.min.js'></script>
  <script>
    $(document)['ready'](function() {
      if (ips['utils']['cookie']['get']('ipsTheme_type') == 'dark') {
        document['documentElement']['classList']['remove']('theme--light');
        document['documentElement']['classList']['add']('theme--dark')
      } else {
        if (ips['utils']['cookie']['get']('ipsTheme_type') == 'light') {
          document['documentElement']['classList']['remove']('theme--dark');
          document['documentElement']['classList']['add']('theme--light')
        }
      };
      $('#ipsTheme_changer--selector')['click'](function() {
        if (document['documentElement']['classList']['contains']('theme--dark')) {
          document['documentElement']['classList']['remove']('theme--dark');
          document['documentElement']['classList']['add']('theme--light');
          ips['utils']['cookie']['unset']('ipsTheme_type');
          ips['utils']['cookie']['set']('ipsTheme_type', 'light', true)
        } else {
          document['documentElement']['classList']['remove']('theme--light');
          document['documentElement']['classList']['add']('theme--dark');
          ips['utils']['cookie']['unset']('ipsTheme_type');
          ips['utils']['cookie']['set']('ipsTheme_type', 'dark', true)
        }
      })
    });
  </script>

#ipsTheme_changer--selector {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
  cursor: pointer;
  box-shadow: rgb(0 18 46 / 18%) 0px 2px 3px 0px;
  border-radius: 100px;
}
#ipsTheme_changer--selector > i {
  box-shadow: 0 0 10px rgb(17, 138, 240);
  background: linear-gradient(135deg, rgb(39 111 218), rgb(0 161 255));
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  color: #111520;
  font-size: 17px;
}
#ipsTheme_changer--selector > span {
  background: rgb(var(--theme-page_background));
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 45px;
  margin-left: -35px;
  z-index: -1;
  border-radius: 100px;
  padding-right: 20px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgb( var(--theme-text_color) );
  font-weight: 600;
}
#ipsTheme_changer--selector > span:before {
  content: "dark";
  margin-right: 3px;
}
html.theme--dark #ipsTheme_changer--selector > span:before {
  content: "light";
}
html.theme--dark #ipsTheme_changer--selector > .fa-moon:before {
  content: '\f185';
}

I hope it's not too complicated to understand.

The HTML class you'll need to add to your html tag in your theme.
The <script> tag you'll need to add them under the <footer> tag or where you want doesn't matter.
The CSS, I think this is obvious, and the <div id=ipsTheme..> is the button, add it where you want.

CSS was written by me.
JS was not written by me, the author is nowhere to be found 😄 😛 🙂.

If someone needs help implementing this, I'm here to help you. Just text me privately and I will get back to you ASAP.

ibtisem miri · February 26, 2023

On 2/19/2023 at 7:47 PM, drawncodes said:

<html class="{{if \IPS\Request::i()->cookie['ipsTheme_type'] == 'light'}}theme--light{{elseif \IPS\Request::i()->cookie['ipsTheme_type'] == 'dark'}}theme--dark{{else}}theme--dark{{endif}}">

On 2/19/2023 at 7:47 PM, drawncodes said:

<html class="{{if \IPS\Request::i()->cookie['ipsTheme_type'] == 'light'}}theme--light{{elseif \IPS\Request::i()->cookie['ipsTheme_type'] == 'dark'}}theme--dark{{else}}theme--dark{{endif}}">
  <div id='ipsTheme_changer--selector'>
    <i class="fas fa-moon"></i>
    <span>mode</span>
  </div>
  <script type="text/javascript" src='//code.jquery.com/jquery-3.5.1.min.js'></script>
  <script>
    $(document)['ready'](function() {
      if (ips['utils']['cookie']['get']('ipsTheme_type') == 'dark') {
        document['documentElement']['classList']['remove']('theme--light');
        document['documentElement']['classList']['add']('theme--dark')
      } else {
        if (ips['utils']['cookie']['get']('ipsTheme_type') == 'light') {
          document['documentElement']['classList']['remove']('theme--dark');
          document['documentElement']['classList']['add']('theme--light')
        }
      };
      $('#ipsTheme_changer--selector')['click'](function() {
        if (document['documentElement']['classList']['contains']('theme--dark')) {
          document['documentElement']['classList']['remove']('theme--dark');
          document['documentElement']['classList']['add']('theme--light');
          ips['utils']['cookie']['unset']('ipsTheme_type');
          ips['utils']['cookie']['set']('ipsTheme_type', 'light', true)
        } else {
          document['documentElement']['classList']['remove']('theme--light');
          document['documentElement']['classList']['add']('theme--dark');
          ips['utils']['cookie']['unset']('ipsTheme_type');
          ips['utils']['cookie']['set']('ipsTheme_type', 'dark', true)
        }
      })
    });
  </script>

#ipsTheme_changer--selector {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
  cursor: pointer;
  box-shadow: rgb(0 18 46 / 18%) 0px 2px 3px 0px;
  border-radius: 100px;
}
#ipsTheme_changer--selector > i {
  box-shadow: 0 0 10px rgb(17, 138, 240);
  background: linear-gradient(135deg, rgb(39 111 218), rgb(0 161 255));
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  color: #111520;
  font-size: 17px;
}
#ipsTheme_changer--selector > span {
  background: rgb(var(--theme-page_background));
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 45px;
  margin-left: -35px;
  z-index: -1;
  border-radius: 100px;
  padding-right: 20px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgb( var(--theme-text_color) );
  font-weight: 600;
}
#ipsTheme_changer--selector > span:before {
  content: "dark";
  margin-right: 3px;
}
html.theme--dark #ipsTheme_changer--selector > span:before {
  content: "light";
}
html.theme--dark #ipsTheme_changer--selector > .fa-moon:before {
  content: '\f185';
}

I hope it's not too complicated to understand.

The HTML class you'll need to add to your html tag in your theme.
The <script> tag you'll need to add them under the <footer> tag or where you want doesn't matter.
The CSS, I think this is obvious, and the <div id=ipsTheme..> is the button, add it where you want.

CSS was written by me.
JS was not written by me, the author is nowhere to be found 😄 😛 🙂.

Where do I put the code you brought?

Alexandru · February 27, 2023

15 hours ago, Haim Rafael said:

Where do I put the code you brought?

Contact me privately. I will help ya.

ibtisem miri · February 27, 2023

5 hours ago, drawncodes said:

Contact me privately. I will help ya.

I've sent you a message. thanks buddy!

Five Invision Community 5 features your team will love

Five Invision Community 5 features your members will love

Invision Community 4: SEO, prepare for v5 and dormant account notifications

Invision Community 5: Beta testing and latest updates

Add a dark mode

Recommended Posts

David N.

Luuuk

Interferon

David N.

Day_

aia

Kjell Iver Johansen

marklcfc

AlexJ

David N.

AlexJ

Alexandru

Myr

PatrickRQ

Matt

Day_

PatrickRQ

Alexandru

ibtisem miri

Alexandru

ibtisem miri

Recently Browsing 0 members

More