PalmTalk Dark Theme

[floridaPalmMan]

So instead of working today I spent the morning creating a dark theme for the site.

Why a dark theme?

Well for those of you who spend all day at a computer (like me), or like browsing the site in the evening (also me), dark themes are great for reducing strain on your eyes and won't keep your wife up all night while you browse palmtalk in bed.

To use the theme, you have to install a browser plugin on your preferred web browser which can edit the sites styling (CSS)

Stylish - Chromium based browsers (Chrome, Brave, Dissenter)

Stylish - Firefox

SuperStyles - Microsoft Edge

Stylus - Opera

Once the plugin is installed, copy and paste my code at the bottom of this post and the site should turn dark.

Here are some screenshots of what it looks like on my desktop, and what it should look like on mobile devices when either these browser extensions can be installed on mobile devices or if the mods are able to take the code and make a new dark theme out of it.

(still haven't had time to photoshop the logo)

I'd love it if someone wanted to help test/refine the theme so it can be used by everyone.

_____________________________________________________________________________________________________

To the mods, I noticed that the forum currently has the ability to change themes.  Feel free to take the code and create a dark theme for the site.

The CSS is simply a modified extension of the default theme PalmTreeLover. So to create the new dark theme you can literally just copy the PalmTreeLover theme, scroll down to the bottom of the CSS page and paste the code.

_____________________________________________________________________________________________________

/* main forum */
 body {
    background-color:#333;
    color:#fff;
}
.ipsAreaBackground_reset {
    background-color:#333;
    color:#fff;
}
#ipsLayout_header header, .ipsUserPhoto {
    background-color:#333;
}
.ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half {
    background-color:#333;
}
.ipsDataList.ipsDataList_zebra .ipsDataItem:not(.ipsDataItem_selected):not(.ipsModerated):not(.ipsDataItem_new):not(.ipsDataItem_success):not(.ipsDataItem_warning):not(.ipsDataItem_error):not(.ipsDataItem_info):not(.ipsDataItem_status):nth-child(even) {
    background:#5c5c5c;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) {
    color:rgb(255 255 255 / 61%);
}
.ipsMenu {
    background:#757575;
}
.ipsMenu_title {
    background:#3b3b3b;
}
.ipsTabs_activeItem {
    background:#9b9b9b;
    color:#303030;
}
.ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link {
    color:#ffffffd4;
}
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a {
    color:#ffffffd4;
    background:#555;
}
.ipsQuote {
    background:#4c4c4c;
}
.ipsAreaBackground {
    background:#747474;
}
.ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) {
    background-color:#333;
}
.ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) {
    color:#dccf38;
}
.ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a {
    background:#a3a3a3;
}
.ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote {
    background:#818181;
}
.ipsTabs_panel {
    background:#333;
}
.ipsMenu_headerBar, .ipsMenu_footerBar {
    background:#757575;
}
.ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) {
    background:#545454;
}
.ipsDataItem.ipsClearfix.cMessage {
    background:#757575;
}
.ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] {
    background:#333;
}
.ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover {
    background:#6d6d6d;
}
.ipsSelectTree {
    background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%)
}

.ipsSelectTree_nodes [data-role="nodeList"]{
    background:#333;
}
.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{
    background:#6d6d6d;
}

/* gallery lightbox */
 .cGalleryLightbox_info {
    background:#333;
}
.ipsType_light {
    color:#dedede;
}
.cGalleryChooseAlbum_listItem {
    background:#6d6d6d;
}
/* messaging */
 .ipsDialog > div, .ipsAutocompleteMenu {
    background:#333;
}
.ipsAutocompleteMenu_item[data-selected] {
    background:#6d6d6d;
}
.ipsDialog_title {
    color:#ffffffd4;
}
/* profile page */
 #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img {
    max-width:160px;
}
.ipsPad_half.cProfileRepScore{
    background:#598f5b;
}
/* reply box */
 .ipsComposeArea_dummy {
    background:#9a9a9a;
    color:#222;
}
.cke_top {
    background:#c1c1c1;
}
.ipsAreaBackground_light {
    background:#686868;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div {
    background-color:#555;
}

 

 

Edited February 12, 2021 by floridaPalmMan

[RedRabbit]

Wow, great work! I'm using it now and I like it a lot. However, I noticed one problem. The body tag isn't domain specific so the body section of other websites will change colors too and not just PalmTalk.org.  I'm not a CSS expert, but I'm guessing there's no workaround for this. 

[floridaPalmMan]

20 hours ago, RedRabbit said:

Wow, great work! I'm using it now and I like it a lot. However, I noticed one problem. The body tag isn't domain specific so the body section of other websites will change colors too and not just PalmTalk.org.  I'm not a CSS expert, but I'm guessing there's no workaround for this. 

Ahh yes sorry I forgot to specify how to limit this theme to palmtalk.org, but it's an easy fix.

Edit the theme in Sylish or whatever CSS plugin you used.

There should be an option to limit the theme to a specific url or domain.

Here are my settings...

Save the theme again and it should be limited to palmtalk.org rather than all websites.

Let me know if that fixes the issue.

Edited February 26, 2021 by floridaPalmMan

[RedRabbit]

On 2/25/2021 at 8:33 PM, floridaPalmMan said:

Ahh yes sorry I forgot to specify how to limit this theme to palmtalk.org, but it's an easy fix.

Edit the theme in Sylish or whatever CSS plugin you used.

There should be an option to limit the theme to a specific url or domain.

Here are my settings...

Save the theme again and it should be limited to palmtalk.org rather than all websites.

Let me know if that fixes the issue.

That fixed it, thanks @floridaPalmMan!

[JLM]

Stunning! Great work!

[EastCanadaTropicals]

Can you remove it too?

[floridaPalmMan]

23 hours ago, EastCanadaTropicals said:

Can you remove it too?

Yea of course.

Click on the stylish icon in your browser.

Then click the "Active" button on the theme in stylish and it will disable the changes.

 

[EastCanadaTropicals]

I wonder if you can photoshop the ips logo now.

[floridaPalmMan]

30 minutes ago, EastCanadaTropicals said:

I wonder if you can photoshop the ips logo now.

Sure, I'll try to get a nice design soon and will update the thread when it's done.

[floridaPalmMan]

4 hours ago, EastCanadaTropicals said:

I wonder if you can photoshop the ips logo now.

@EastCanadaTropicals & @RedRabbit

Here is the updated code for the dark theme logo. Luckily I found one with a transparent background on palms.org and was able to use it. I may add the little diagonal "Palm Talk" text to the logo afterward but for now this will do.

This is a text fix as well as the logo fix. Just add this code to the bottom of the theme below all the other CSS.

.ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half{
    color:#fff;
}
a[data-mentionid]{background:#e91e63}
#elLogo img{display:none;}
#elLogo::after{
    height:60px;
    width:100%;
    content:'';
    position:absolute;
    background:url(https://palms.org/wp-content/themes/palms/images/logo.png);
    background-repeat:no-repeat;
}
 

 

Also if you notice any other bugs/display issues please let me know and I'll fix them asap.

Thanks for the feedback and help testing the theme.

Edited March 2, 2021 by floridaPalmMan

[JLM]

Personally i would find it better if everyone's names were in white on a dark background instead of black on a dark background, if you get what i mean. 
Otherwise, everything seems just fine!

[floridaPalmMan]

31 minutes ago, JLM said:

Personally i would find it better if everyone's names were in white on a dark background instead of black on a dark background, if you get what i mean. 
Otherwise, everything seems just fine!

How about hot pink (#e91e63) ?

or burnt orange (#ff9800) ?

or lime green (#8bc34a) ?

here's a nice diluted white/gray (#ffffffd4) which is the same color as the regular text.

Plain bright white is just,  #fff

Here's the css line so you can pick the hex value you want

.ipsType_sectionHead.cAuthorPane_author{
    color:#ffffffd4
}

Just put whatever hex value you'd like after the hashtag.

Edited March 2, 2021 by floridaPalmMan

[floridaPalmMan]

Another update: (I'll try to get a mod to update the initial post with the consolidated changes. Sorry for the inconvenience.)

Alert box & text as well as name color changes.

.ipsType_sectionHead.cAuthorPane_author{
    color:#ffffffd4
}
.ipsAlert{
    background:#555;
}
.ipsAlert i{
    color:#f44336;
}

 

name color update

 

alert box update

 

Edited March 2, 2021 by floridaPalmMan

[JLM]

Hot pink looks good! Ill put that in. Thanks!!

[EastCanadaTropicals]

Can you also make the searchbar green?

[floridaPalmMan]

18 minutes ago, EastCanadaTropicals said:

Can you also make the searchbar green?

like this?

 

Probably looks better with a light gray but I'll give the css line so you can edit/customize it yourself if you'd like.

 

The css line is:

(green)

#elSearch{
    background:#6cab51;
}

(for gray)

#elSearch{
    background:#9c9c9c;
}

Also I fixed the expanded search boxes. Must have missed them before.

Add this code for the fixed expanded search.

#elSearch{
    background:#9c9c9c;
}
#elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{
    background:#555;
}
#elSearchExpanded .ipsMenu_title{
    background:#b9b9b9;
}

Edited March 3, 2021 by floridaPalmMan

[EastCanadaTropicals]

1 minute ago, floridaPalmMan said:

like this?

 

Probably looks better with a light gray but I'll give the css line so you can edit/customize it yourself if you'd like.

 

The css line is:

(green)

#elSearch{
    background:#9c9c9c;
}

(for gray)

#elSearch{
    background:#6cab51;
}

Also I fixed the expanded search boxes. Must have missed them before.

Add this code for the fixed expanded search.

#elSearch{
    background:#9c9c9c;
}
#elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{
    background:#555;
}
#elSearchExpanded .ipsMenu_title{
    background:#b9b9b9;
}

Thanks.

[EastCanadaTropicals]

I made a prototype of the PalmTalk logo in the Ips logo:

[floridaPalmMan]

7 minutes ago, EastCanadaTropicals said:

I made a prototype of the PalmTalk logo in the Ips logo:

Nice. Thanks bud. 

I like the color selection and will add it to the banner and upload a new version soon.

Thanks for your input and feeback too. It's much appreciated. 

Hopefully once we perfect the dark theme, we can get the mods to add it permanently to the site so we can use it on our mobile devices too

[EastCanadaTropicals]

11 hours ago, floridaPalmMan said:

Nice. Thanks bud. 

I like the color selection and will add it to the banner and upload a new version soon.

Thanks for your input and feeback too. It's much appreciated. 

Hopefully once we perfect the dark theme, we can get the mods to add it permanently to the site so we can use it on our mobile devices too

No problem. I hope you can take high resolution screenshots for the default theme, so you can crop out the logo. 

[EastCanadaTropicals]

13 hours ago, floridaPalmMan said:

Nice. Thanks bud. 

I like the color selection and will add it to the banner and upload a new version soon.

Thanks for your input and feeback too. It's much appreciated. 

Hopefully once we perfect the dark theme, we can get the mods to add it permanently to the site so we can use it on our mobile devices too

How do I add the prototype logo I made?

[EastCanadaTropicals]

13 hours ago, floridaPalmMan said:

like this?

 

Probably looks better with a light gray but I'll give the css line so you can edit/customize it yourself if you'd like.

 

The css line is:

(green)

#elSearch{
    background:#6cab51;
}

(for gray)

#elSearch{
    background:#9c9c9c;
}

Also I fixed the expanded search boxes. Must have missed them before.

Add this code for the fixed expanded search.

#elSearch{
    background:#9c9c9c;
}
#elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{
    background:#555;
}
#elSearchExpanded .ipsMenu_title{
    background:#b9b9b9;
}

Here is a dark version of my prototype logo:

 

Edited March 3, 2021 by EastCanadaTropicals

[floridaPalmMan]

2 hours ago, EastCanadaTropicals said:

How do I add the prototype logo I made?

Best we can do with CSS is this but it's not perfect.

#elLogo::before{
    content:'"Palm Talk"';
    height:20px;
    width:auto;
    position:absolute;
    color:#ffc90e;
    transform:rotate(-29deg);
    left:367px;
    font-size:18px;
    top:20px;
}

Otherwise we'd have to use an image editor to add the text, then upload the image to the server (which we don't have access to).  So the code above is probably the best we can do at the moment.

[EastCanadaTropicals]

7 minutes ago, floridaPalmMan said:

Best we can do with CSS is this but it's not perfect.

#elLogo::before{
    content:'"Palm Talk"';
    height:20px;
    width:auto;
    position:absolute;
    color:#ffc90e;
    transform:rotate(-29deg);
    left:367px;
    font-size:18px;
    top:20px;
}

Otherwise we'd have to use an image editor to add the text, then upload the image to the server (which we don't have access to).  So the code above is probably the best we can do at the moment.

Thanks for using my prototype! I wonder if the mods can get us a better version.

[EastCanadaTropicals]

On 2/12/2021 at 11:37 AM, floridaPalmMan said:

So instead of working today I spent the morning creating a dark theme for the site.

Why a dark theme?

Well for those of you who spend all day at a computer (like me), or like browsing the site in the evening (also me), dark themes are great for reducing strain on your eyes and won't keep your wife up all night while you browse palmtalk in bed.

To use the theme, you have to install a browser plugin on your preferred web browser which can edit the sites styling (CSS)

Stylish - Chromium based browsers (Chrome, Brave, Dissenter)

Stylish - Firefox

SuperStyles - Microsoft Edge

Stylus - Opera

Once the plugin is installed, copy and paste my code at the bottom of this post and the site should turn dark.

Here are some screenshots of what it looks like on my desktop, and what it should look like on mobile devices when either these browser extensions can be installed on mobile devices or if the mods are able to take the code and make a new dark theme out of it.

(still haven't had time to photoshop the logo)

I'd love it if someone wanted to help test/refine the theme so it can be used by everyone.

_____________________________________________________________________________________________________

To the mods, I noticed that the forum currently has the ability to change themes.  Feel free to take the code and create a dark theme for the site.

The CSS is simply a modified extension of the default theme PalmTreeLover. So to create the new dark theme you can literally just copy the PalmTreeLover theme, scroll down to the bottom of the CSS page and paste the code.

_____________________________________________________________________________________________________

/* main forum */
 body {
    background-color:#333;
    color:#fff;
}
.ipsAreaBackground_reset {
    background-color:#333;
    color:#fff;
}
#ipsLayout_header header, .ipsUserPhoto {
    background-color:#333;
}
.ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half {
    background-color:#333;
}
.ipsDataList.ipsDataList_zebra .ipsDataItem:not(.ipsDataItem_selected):not(.ipsModerated):not(.ipsDataItem_new):not(.ipsDataItem_success):not(.ipsDataItem_warning):not(.ipsDataItem_error):not(.ipsDataItem_info):not(.ipsDataItem_status):nth-child(even) {
    background:#5c5c5c;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) {
    color:rgb(255 255 255 / 61%);
}
.ipsMenu {
    background:#757575;
}
.ipsMenu_title {
    background:#3b3b3b;
}
.ipsTabs_activeItem {
    background:#9b9b9b;
    color:#303030;
}
.ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link {
    color:#ffffffd4;
}
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a {
    color:#ffffffd4;
    background:#555;
}
.ipsQuote {
    background:#4c4c4c;
}
.ipsAreaBackground {
    background:#747474;
}
.ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) {
    background-color:#333;
}
.ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) {
    color:#dccf38;
}
.ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a {
    background:#a3a3a3;
}
.ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote {
    background:#818181;
}
.ipsTabs_panel {
    background:#333;
}
.ipsMenu_headerBar, .ipsMenu_footerBar {
    background:#757575;
}
.ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) {
    background:#545454;
}
.ipsDataItem.ipsClearfix.cMessage {
    background:#757575;
}
.ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] {
    background:#333;
}
.ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover {
    background:#6d6d6d;
}
.ipsSelectTree {
    background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%)
}

.ipsSelectTree_nodes [data-role="nodeList"]{
    background:#333;
}
.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{
    background:#6d6d6d;
}

/* gallery lightbox */
 .cGalleryLightbox_info {
    background:#333;
}
.ipsType_light {
    color:#dedede;
}
.cGalleryChooseAlbum_listItem {
    background:#6d6d6d;
}
/* messaging */
 .ipsDialog > div, .ipsAutocompleteMenu {
    background:#333;
}
.ipsAutocompleteMenu_item[data-selected] {
    background:#6d6d6d;
}
.ipsDialog_title {
    color:#ffffffd4;
}
/* profile page */
 #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img {
    max-width:160px;
}
.ipsPad_half.cProfileRepScore{
    background:#598f5b;
}
/* reply box */
 .ipsComposeArea_dummy {
    background:#9a9a9a;
    color:#222;
}
.cke_top {
    background:#c1c1c1;
}
.ipsAreaBackground_light {
    background:#686868;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div {
    background-color:#555;
}

 

 

I might try to make a dark theme for mobile, using your code in a mobile app.  

[floridaPalmMan]

6 minutes ago, EastCanadaTropicals said:

I might try to make a dark theme for mobile, using your code in a mobile app.  

There are a few things that probably won't work correctly on mobile since I haven't written the code for it, but let me know which app you use and I'll start the mobile development since it's more detailed and takes a bit more time.

Here's an updated codebase. If you customized any code or made any changes to my code, save them and paste them at the very bottom. I added a section at the bottom called "Custom Styles" so you can keep track of your customized code.

/* main forum */
 body {
    background-color:#333;
    color:#fff;
}
.ipsAreaBackground_reset {
    background-color:#333;
    color:#fff;
}
#ipsLayout_header header, .ipsUserPhoto {
    background-color:#333;
}
.ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half {
    background-color:#333;
}
.ipsDataList.ipsDataList_zebra .ipsDataItem:not(.ipsDataItem_selected):not(.ipsModerated):not(.ipsDataItem_new):not(.ipsDataItem_success):not(.ipsDataItem_warning):not(.ipsDataItem_error):not(.ipsDataItem_info):not(.ipsDataItem_status):nth-child(even) {
    background:#5c5c5c;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) {
    color:rgb(255 255 255 / 61%);
}
.ipsMenu {
    background:#757575;
}
.ipsMenu_title {
    background:#3b3b3b;
}
.ipsTabs_activeItem {
    background:#9b9b9b;
    color:#303030;
}
.ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link {
    color:#ffffffd4;
}
.ipsBreadcrumb [data-action="defaultStream"], .ipsBreadcrumb [data-action="markSiteRead"]{color:#9e9e9e;}
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a {
    color:#ffffffd4;
    background:#555;
}
.ipsSelectTree_placeholder{color:#ffffffd4;}
.ipsQuote {
    background:#4c4c4c;
}
.ipsItemStatus.ipsItemStatus_large{
    background:#ff98006e;
}
.cPastLeaders_cell{
    background:#555;
}
.cPastLeaders_cell:after{
    opacity:0.4;
    color:#080808;
}
.cPastLeaders_title span{
    background:#555;
}
.ipsAreaBackground {
    background:#747474;
}
.ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) {
    background-color:#333;
}
.ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) {
    color:#dccf38;
}
.ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a {
    background:#a3a3a3;
}
.ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote {
    background:#818181;
}
.ipsTabs_panel {
    background:#333;
}
.ipsMenu_headerBar, .ipsMenu_footerBar {
    background:#757575;
}
.ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) {
    background:#545454;
}
.ipsDataItem.ipsClearfix.cMessage {
    background:#757575;
}
.ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] {
    background:#333;
}
.ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover {
    background:#6d6d6d;
}
.ipsSelectTree {
    background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%)
}

.ipsSelectTree_nodes [data-role="nodeList"]{
    background:#333;
}
.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{
    background:#6d6d6d;
}

/* gallery lightbox */
 .cGalleryLightbox_info {
    background:#333;
}
.ipsType_light {
    color:#dedede;
}
.cGalleryChooseAlbum_listItem {
    background:#6d6d6d;
}
/* messaging */
 .ipsDialog > div, .ipsAutocompleteMenu {
    background:#333;
}
.ipsAutocompleteMenu_item[data-selected] {
    background:#6d6d6d;
}
.cMessage_active.ipsDataItem_selected{
    background:#555!important;
}
.ipsComment{
    background:#333;
}
.ipsComment:not( .ipsModerated ) .ipsComment_header{
    background:#555;
}
.ipsDialog_title {
    color:#ffffffd4;
}
/* profile page */
 #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img {
    max-width:160px;
}
.ipsPad_half.cProfileRepScore{
    background:#598f5b;
}
/* reply box */
 .ipsComposeArea_dummy {
    background:#9a9a9a;
    color:#222;
}
.cke_top {
    background:#c1c1c1;
}
.ipsAreaBackground_light {
    background:#686868;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div {
    background-color:#555;
}
.ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half{
    color:#fff;
}
a[data-mentionid]{background:#e91e63}
#elLogo img{display:none;}
#elLogo::before{
    height:60px;
    width:100%;
    content:'';
    position:absolute;
    background:url(https://palms.org/wp-content/themes/palms/images/logo.png);
    background-repeat:no-repeat;
}
#elLogo::after{
    content:'"Palm Talk"';
    height:20px;
    width:auto;
    position:absolute;
    color:#ffc90e;
    transform:rotate(-29deg);
    left:367px;
    font-size:18px;
    top:20px;
}
.ipsType_sectionHead.cAuthorPane_author{
    color:#ffffffd4;
}
.ipsAlert{
    background:#555;
}
.ipsAlert i{
    color:#f44336;
}

/* widgets */
.ipsWidget .ipsCalendarDate{
    background:#9e9e9e;
}
.ipsSideMenu_item:not( .ipsSideMenu_itemActive ) a:hover, a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover, span.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover{
    background-color:#888;
}
#elSearch{
    background:#9c9c9c;
}
#elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{
    background:#555;
}
#elSearchExpanded .ipsMenu_title{
    background:#b9b9b9;
}
.cSearchSubmit .fa.fa-search{
    color:#333;
}

/* Custom styles. Add custom styles below this line */

Edited March 3, 2021 by floridaPalmMan

[EastCanadaTropicals]

Just now, floridaPalmMan said:

There are a few things that probably won't work correctly on mobile since I haven't written the code specifically for a mobile device but let me know which app you use and I'll start the mobile development since it's more detailed and takes a bit more time.

Here's an updated codebase. If you customized any code or made any changes to my code, save them and paste them at the very bottom. I added a section at the bottom called "Custom Styles" so you can keep track of your customized code.

/* main forum */
 body {
    background-color:#333;
    color:#fff;
}
.ipsAreaBackground_reset {
    background-color:#333;
    color:#fff;
}
#ipsLayout_header header, .ipsUserPhoto {
    background-color:#333;
}
.ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half {
    background-color:#333;
}
.ipsDataList.ipsDataList_zebra .ipsDataItem:not(.ipsDataItem_selected):not(.ipsModerated):not(.ipsDataItem_new):not(.ipsDataItem_success):not(.ipsDataItem_warning):not(.ipsDataItem_error):not(.ipsDataItem_info):not(.ipsDataItem_status):nth-child(even) {
    background:#5c5c5c;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) {
    color:rgb(255 255 255 / 61%);
}
.ipsMenu {
    background:#757575;
}
.ipsMenu_title {
    background:#3b3b3b;
}
.ipsTabs_activeItem {
    background:#9b9b9b;
    color:#303030;
}
.ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link {
    color:#ffffffd4;
}
.ipsBreadcrumb [data-action="defaultStream"], .ipsBreadcrumb [data-action="markSiteRead"]{color:#9e9e9e;}
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a {
    color:#ffffffd4;
    background:#555;
}
.ipsSelectTree_placeholder{color:#ffffffd4;}
.ipsQuote {
    background:#4c4c4c;
}
.ipsItemStatus.ipsItemStatus_large{
    background:#ff98006e;
}
.cPastLeaders_cell{
    background:#555;
}
.cPastLeaders_cell:after{
    opacity:0.4;
    color:#080808;
}
.cPastLeaders_title span{
    background:#555;
}
.ipsAreaBackground {
    background:#747474;
}
.ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) {
    background-color:#333;
}
.ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) {
    color:#dccf38;
}
.ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a {
    background:#a3a3a3;
}
.ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote {
    background:#818181;
}
.ipsTabs_panel {
    background:#333;
}
.ipsMenu_headerBar, .ipsMenu_footerBar {
    background:#757575;
}
.ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) {
    background:#545454;
}
.ipsDataItem.ipsClearfix.cMessage {
    background:#757575;
}
.ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] {
    background:#333;
}
.ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover {
    background:#6d6d6d;
}
.ipsSelectTree {
    background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%)
}

.ipsSelectTree_nodes [data-role="nodeList"]{
    background:#333;
}
.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{
    background:#6d6d6d;
}

/* gallery lightbox */
 .cGalleryLightbox_info {
    background:#333;
}
.ipsType_light {
    color:#dedede;
}
.cGalleryChooseAlbum_listItem {
    background:#6d6d6d;
}
/* messaging */
 .ipsDialog > div, .ipsAutocompleteMenu {
    background:#333;
}
.ipsAutocompleteMenu_item[data-selected] {
    background:#6d6d6d;
}
.cMessage_active.ipsDataItem_selected{
    background:#555!important;
}
.ipsComment{
    background:#333;
}
.ipsComment:not( .ipsModerated ) .ipsComment_header{
    background:#555;
}
.ipsDialog_title {
    color:#ffffffd4;
}
/* profile page */
 #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img {
    max-width:160px;
}
.ipsPad_half.cProfileRepScore{
    background:#598f5b;
}
/* reply box */
 .ipsComposeArea_dummy {
    background:#9a9a9a;
    color:#222;
}
.cke_top {
    background:#c1c1c1;
}
.ipsAreaBackground_light {
    background:#686868;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div {
    background-color:#555;
}
.ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half{
    color:#fff;
}
a[data-mentionid]{background:#e91e63}
#elLogo img{display:none;}
#elLogo::before{
    height:60px;
    width:100%;
    content:'';
    position:absolute;
    background:url(https://palms.org/wp-content/themes/palms/images/logo.png);
    background-repeat:no-repeat;
}
#elLogo::after{
    content:'"Palm Talk"';
    height:20px;
    width:auto;
    position:absolute;
    color:#ffc90e;
    transform:rotate(-29deg);
    left:367px;
    font-size:18px;
    top:20px;
}
.ipsType_sectionHead.cAuthorPane_author{
    color:#ffffffd4;
}
.ipsAlert{
    background:#555;
}
.ipsAlert i{
    color:#f44336;
}

/* widgets */
.ipsWidget .ipsCalendarDate{
    background:#9e9e9e;
}
.ipsSideMenu_item:not( .ipsSideMenu_itemActive ) a:hover, a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover, span.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover{
    background-color:#888;
}
#elSearch{
    background:#9c9c9c;
}
#elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{
    background:#555;
}
#elSearchExpanded .ipsMenu_title{
    background:#b9b9b9;
}
.cSearchSubmit .fa.fa-search{
    color:#333;
}

/* Custom styles */

I was looking at TrebEdit, but I might search other apps.

[EastCanadaTropicals]

11 minutes ago, floridaPalmMan said:

There are a few things that probably won't work correctly on mobile since I haven't written the code for it, but let me know which app you use and I'll start the mobile development since it's more detailed and takes a bit more time.

Here's an updated codebase. If you customized any code or made any changes to my code, save them and paste them at the very bottom. I added a section at the bottom called "Custom Styles" so you can keep track of your customized code.

/* main forum */
 body {
    background-color:#333;
    color:#fff;
}
.ipsAreaBackground_reset {
    background-color:#333;
    color:#fff;
}
#ipsLayout_header header, .ipsUserPhoto {
    background-color:#333;
}
.ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half {
    background-color:#333;
}
.ipsDataList.ipsDataList_zebra .ipsDataItem:not(.ipsDataItem_selected):not(.ipsModerated):not(.ipsDataItem_new):not(.ipsDataItem_success):not(.ipsDataItem_warning):not(.ipsDataItem_error):not(.ipsDataItem_info):not(.ipsDataItem_status):nth-child(even) {
    background:#5c5c5c;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) {
    color:rgb(255 255 255 / 61%);
}
.ipsMenu {
    background:#757575;
}
.ipsMenu_title {
    background:#3b3b3b;
}
.ipsTabs_activeItem {
    background:#9b9b9b;
    color:#303030;
}
.ipsBreadcrumb > ul > li, #ipsLayout_footer a, #ipsLayout_footer p, .ipsType_pageTitle, .ipsItemStatus:not(.ipsItemStatus_large), .ipsType_richText, .ipsPager_type, .ipsApp .ipsButton_link {
    color:#ffffffd4;
}
.ipsBreadcrumb [data-action="defaultStream"], .ipsBreadcrumb [data-action="markSiteRead"]{color:#9e9e9e;}
.ipsApp .ipsButtonBar .ipsPagination .ipsPagination_page a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_next a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_prev a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_first a, .ipsApp .ipsButtonBar .ipsPagination .ipsPagination_last a {
    color:#ffffffd4;
    background:#555;
}
.ipsSelectTree_placeholder{color:#ffffffd4;}
.ipsQuote {
    background:#4c4c4c;
}
.ipsItemStatus.ipsItemStatus_large{
    background:#ff98006e;
}
.cPastLeaders_cell{
    background:#555;
}
.cPastLeaders_cell:after{
    opacity:0.4;
    color:#080808;
}
.cPastLeaders_title span{
    background:#555;
}
.ipsAreaBackground {
    background:#747474;
}
.ipsBox, .ipsGrid, .ipsBox:not(.ipsBox_transparent):not(.ipsModerated) {
    background-color:#333;
}
.ipsItemStatus.ipsItemStatus_read:not(.ipsItemStatus_large) {
    color:#dccf38;
}
.ipsButtonBar .ipsPagination .ipsPagination_page.ipsPagination_active a {
    background:#a3a3a3;
}
.ipsApp .ipsButton_link.ipsFollow, .ipsApp .ipsButton_link.ipsPromote {
    background:#818181;
}
.ipsTabs_panel {
    background:#333;
}
.ipsMenu_headerBar, .ipsMenu_footerBar {
    background:#757575;
}
.ipsDataList_readStatus .ipsDataItem:not(.ipsDataItem_unread):not(.ipsDataItem_selected):not(.ipsModerated) {
    background:#545454;
}
.ipsDataItem.ipsClearfix.cMessage {
    background:#757575;
}
.ipsSelectTree_nodes, .ipsSelectTree_nodes[data-role="nodeList"] {
    background:#333;
}
.ipsSelectTree_nodes[data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled):hover {
    background:#6d6d6d;
}
.ipsSelectTree {
    background: linear-gradient(to bottom, rgb(146 146 146) 0%, rgb(107 107 107) 100%)
}

.ipsSelectTree_nodes [data-role="nodeList"]{
    background:#333;
}
.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover{
    background:#6d6d6d;
}

/* gallery lightbox */
 .cGalleryLightbox_info {
    background:#333;
}
.ipsType_light {
    color:#dedede;
}
.cGalleryChooseAlbum_listItem {
    background:#6d6d6d;
}
/* messaging */
 .ipsDialog > div, .ipsAutocompleteMenu {
    background:#333;
}
.ipsAutocompleteMenu_item[data-selected] {
    background:#6d6d6d;
}
.cMessage_active.ipsDataItem_selected{
    background:#555!important;
}
.ipsComment{
    background:#333;
}
.ipsComment:not( .ipsModerated ) .ipsComment_header{
    background:#555;
}
.ipsDialog_title {
    color:#ffffffd4;
}
/* profile page */
 #elProfileInfoColumn .ipsType_center.ipsPad_half.nbSecGroupIcons.nbSecGroupIconsProfile.ipsResponsive_hidePhone img {
    max-width:160px;
}
.ipsPad_half.cProfileRepScore{
    background:#598f5b;
}
/* reply box */
 .ipsComposeArea_dummy {
    background:#9a9a9a;
    color:#222;
}
.cke_top {
    background:#c1c1c1;
}
.ipsAreaBackground_light {
    background:#686868;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div {
    background-color:#555;
}
.ipsWidget_inner.ipsPad, .ipsWidget_inner.ipsPad_half, .ipsPad_half{
    color:#fff;
}
a[data-mentionid]{background:#e91e63}
#elLogo img{display:none;}
#elLogo::before{
    height:60px;
    width:100%;
    content:'';
    position:absolute;
    background:url(https://palms.org/wp-content/themes/palms/images/logo.png);
    background-repeat:no-repeat;
}
#elLogo::after{
    content:'"Palm Talk"';
    height:20px;
    width:auto;
    position:absolute;
    color:#ffc90e;
    transform:rotate(-29deg);
    left:367px;
    font-size:18px;
    top:20px;
}
.ipsType_sectionHead.cAuthorPane_author{
    color:#ffffffd4;
}
.ipsAlert{
    background:#555;
}
.ipsAlert i{
    color:#f44336;
}

/* widgets */
.ipsWidget .ipsCalendarDate{
    background:#9e9e9e;
}
.ipsSideMenu_item:not( .ipsSideMenu_itemActive ) a:hover, a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover, span.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover{
    background-color:#888;
}
#elSearch{
    background:#9c9c9c;
}
#elSearchExpanded, #elSearchExpanded .ipsSideMenu_list{
    background:#555;
}
#elSearchExpanded .ipsMenu_title{
    background:#b9b9b9;
}
.cSearchSubmit .fa.fa-search{
    color:#333;
}

/* Custom styles. Add custom styles below this line */

There is a java android port, which might be useful, since the website is programmed in Javascript.

[Steve Mac]

You guys are just so clever and educated,  (I envy you), unfortunately although I love Dark Theme , I will need to wait for the button (with that code beneath it). 

[floridaPalmMan]

Small update after the site upgrade for those interested:

Line #12

Was this:

#ipsLayout_header header, .ipsUserPhoto {
    background-color:#333;
}

Needs to be updated to this:

#ipsLayout_header header, #ipsLayout_header nav, .ipsUserPhoto {
    background-color:#333;
}

Stylish unfortunately is in the middle of an upgrade and their editor cannot be used temporarily but as soon as its working again I'll post an update.

I'm sure I'll notice a few more changes to be made while browsing the site. Again, any suggestions are welcome.

[PALM MOD]

Just seeing this for the first time - don't know why.

Always nice to have some tech people around. I don't know if there would be a way to integrate it into the site theme options, or browser settings - but I don't think the IPS would go for it anyway until and unless its was also available on their Main Site.

One of the attempts of the IPS for many years was to get PalmTalk to look the same as their Main Site - so, unless it too had a dark theme (that would switch at the same time), I don't think they would go for it.

But it's good to know who the techies are - if I ever need you.

[floridaPalmMan]

3 hours ago, PALM MOD said:

Just seeing this for the first time - don't know why.

Always nice to have some tech people around. I don't know if there would be a way to integrate it into the site theme options, or browser settings - but I don't think the IPS would go for it anyway until and unless its was also available on their Main Site.

One of the attempts of the IPS for many years was to get PalmTalk to look the same as their Main Site - so, unless it too had a dark theme (that would switch at the same time), I don't think they would go for it.

But it's good to know who the techies are - if I ever need you.

Yea I understand brand consistency across sites is important.

If they decide a dark theme is within brand at some point I can definitely help out and provide the color palette in this theme as well as help implement it.

[PALM MOD]

59 minutes ago, floridaPalmMan said:

If they decide a dark theme is within brand at some point I can definitely help out and provide the color palette in this theme as well as help implement it.

👍

[floridaPalmMan]

The new palmtalk update has changed a few things in the dark theme.

I will have the updated code shortly.

[Silas_Sancona]

Had to find it, but this was a shot i took after trying one of the dark theme options from the web at the time..   Admittedly, i should have taken more shots of the overall look, as it was applied to PT.



Only thing  i didn't like about it was when i went back to " regular / daylight " screen. my posts would be blacked out / letters hard to see against the standard white background..

  If i were putting together my own site, i'd use a similar background ..but trouble shoot / have someone trouble shoot, sine i'm not much of a tech guru, lol  the part of it i did not like ( ..and wasn't aware of until someone pointed it out, lol )
 

[floridaPalmMan]

Ok this theme was added to the "Stylish" online library so you no longer have to maintain your own css code.

It should be available when you install the extension in the "Gallery" section.

It should look something like this. You can still override my styling in the "My Styles" section and customize the site to your own liking.

All updates I make from here on out will be through the online "Gallery" version so no more pasting code into this thread. So as long as you keep the Gallery version active, you will receive the updates automatically.

[floridaPalmMan]

Also, the right side menu dropdowns now work with the new site.

If you're still maintaining the code yourself, I've pasted the code block that was causing the issue. The specific line was the "width: 100%". If you replace the 100% with 433px, it fixes the issue.

Or just replace the entire block for simplicity.

#elLogo::before{
    height:60px;
    width:433px;
    content:'';
    position:absolute;
    background:url(https://palms.org/wp-content/themes/palms/images/logo.png);
    background-repeat:no-repeat;
}