Jump to content

Add a dark mode

David N.

By David N.
in Feedback

 Share

Recommended Posts

David N. Veteran

David N.

Posted
Posted

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. 

Link to comment
Share on other sites
David N. Veteran

David N.

Posted
  • Author
Posted
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: 

Could contain: File, Text, Webpagefi

Link to comment
Share on other sites
13. Mentor

13.

Posted
Posted
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 😉

Link to comment
Share on other sites
  • 1 month later...
  • 3 weeks later...
Alexandru Collaborator

Alexandru

Posted
Posted (edited) 
<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 by drawncodes
Link to comment
Share on other sites
Day_ Proficient

Day_

Posted
Posted
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.

Link to comment
Share on other sites
Alexandru Collaborator

Alexandru

Posted
Posted
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.

Link to comment
Share on other sites
Haim Rafael Explorer

Haim Rafael

Posted
Posted
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?

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...