Create a Dark style - TTI

The Institute Ideas
1

It’s better in my eyes and favorite so.

  1. Create a style then dark style - TTI

  2. Go to template > EXTRA.css

  3. Add code .CSS

body {
 color: #cecece;
 background-color: #1e1e1e !important;
}
.p-body {
 background: #1e1e1e !important;
}
.p-header {
 background: #1e1e1e !important;
}
.p-nav {
 background: #1e1e1e !important;
}
.p-sectionLinks {
 background: #828282;
 border-bottom: 1px solid black;
}
.p-nav-list .p-navEl.is-selected {
 background: #828282;
}
/* Using dark scrollbar */

::-webkit-scrollbar {
 background-color: #2e2e2e;
 width: 15px;
}
::-webkit-scrollbar-thumb {
 background-color: rgba(86, 86, 86, 0.4);
}
::-webkit-scrollbar-thumb:hover {
 background-color: rgba(102, 102, 102, 0.4);
}
textarea::-webkit-scrollbar:vertical {
 border-left: 1px solid #3e3e3e;
}
textarea::-webkit-scrollbar-thumb:vertical {
 border-left: 1px solid #3e3e3e;
}
textarea::-webkit-scrollbar:horizontal {
 border-top: 1px solid #3e3e3e;
}
textarea::-webkit-scrollbar-thumb:horizontal {
 border-top: 1px solid #3e3e3e;
}
  1. done.
2

Nice, thanks for the CSS!

I created a new child of the default theme called “Default Dark”. If you select that one, it’ll include the CSS you gave me above.

I actually have another dark theme on here too, but it was disabled because the logo shill shows Curious Cosmos (that’s it’s own site now and this one is back to TTI). You can select “Dark Matter” and that one is a little more refined :slight_smile:

Hopefully this helps!

3

Thank you. I will add code for dark color all of the thread and member card, others more. If should be ready. I will send this reply thread update.

4

Dark style has been updated and color more.

.block-container {
 background: #17171b;
}
.pairs.pairs--rows>dd {
 color: grey;
}
.block-header {
 background: linear-gradient(0deg, #202325, #6d7073);
}
.block-footer {
 color: #ededed;
 background: linear-gradient(180deg, #202325, #6d7073);
}
.block--messages .message, .block--messages .block-row {
 color: grey;
 background: #17171b;
}
.likesBar {
 background: darkgrey;
 border: 1px solid #47a7eb;
 border-left: 2px solid #47a7eb;
}
.message-cell.message-cell--user, .message-cell.message-cell--action {
 background: #2d2d32;
}
.message-userArrow:after {
 border-right-color: #17171b;
}
.button.button--link, a.button.button--link {
 background: #2d2d32;
}
5

Fix missing color a little more,

.block-container {
 color: grey;
}
.contentRow-fader {
 background: transparent;
}
.fr-box.fr-basic .fr-wrapper {
 background: #2d2d32;
}
.fr-box.fr-basic .fr-element {
 color: grey;
}
.bbCodeBlock {
 background: #2d2d32;
}
.bbCodeBlock-title {
 background: #17171b;
}
.tooltip--member .tooltip-content {
 background: #17171b;
}
.memberTooltip-header {
 background: #265071;
}
6

Bam. CSS updated :slight_smile: