Add a dark mode

Posted December 2, 20222 yr

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.

December 2, 20222 yr

It is a recurring request:

Edited December 2, 20222 yr by Luuuk

AlexJ, David N., marklcfc and 1 other
4

December 2, 20222 yr

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.

December 2, 20222 yr

Author

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:

ﬁ

December 2, 20222 yr

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.

AlexJ, WP V0RT3X, hulkster777 and 1 other
2
2

December 3, 20222 yr

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 😉

December 3, 20222 yr

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!

December 3, 20222 yr

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

Edited December 3, 20222 yr by marklcfc

WP V0RT3X, aia, Myr and 3 others
6

December 5, 20222 yr

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 🙂

February 2, 20231 yr

Author

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:

Markus Jung, AlexJ, hulkster777 and 1 other
3
1

February 19, 20231 yr

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, 20231 yr by AlexJ

David N. and Luuuk
2

February 19, 20231 yr

<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, 20231 yr by drawncodes

February 19, 20231 yr

It would be nice to have this built-in.

February 20, 20231 yr

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

SeNioR-
1

February 20, 20231 yr

Management

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.

February 21, 20231 yr

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.

February 21, 20231 yr

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

SeNioR- and Day_
2

February 26, 20231 yr

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.

February 26, 20231 yr

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?

February 27, 20231 yr

15 hours ago, Haim Rafael said:

Where do I put the code you brought?

Contact me privately. I will help ya.

February 27, 20231 yr

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

Featured Replies

Recently Browsing 0

Account

Navigation

Messages

Notifications

Search