[Pronouncer]

Hf has come a long way in the last few years, different themes etc.

I decided to take a go at my own, with changes that where designed for my enjoyment and to my liking.

Here are a few Previews
Spoiler (Click to View)

Code

Changelog
-V1
--Changed Main Color To Blue/Purple
--Changed the new color system to a more flat design
-- Removed The Background

How to install.
Download the Chrome/Firefox Extension Stylish
https://addons.mozilla.org/en-GB/firefox/addon/stylish/
https://chrome.google.com/webstore/detai...cffe?hl=en

From There Click it and create a new theme
Paste in my code
Copy the Apply To Settings as the bottom
Spoiler (Click to View)
Press Save
Go to HF and Click The Extension and Enable Your Theme POOF
Spoiler (Click to View)

I Will Be Creating a UserScript Version For You guys too but there will be a CSS delay on that.

I will also make a light theme and a few other themes ETC

If i have messed up anything or left in any purple let me know.

Here is the CODE

Code

body {
   font-size: 14px;
   line-height: 1.4;
   color: #c7c7c7;
   background: #191919 url(//hacghkforusdfsfdms.nesdft/images/mobale/mosaic_pl.png) fixed;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   min-width: 320px;
}
#panel .upper {
   padding: 8px 20px;
   clear: both;
   background: #182C61;
   color: #fff;
   font-size: 13px;
   border-top: 1px solid #1d1d1d;
   border-bottom: 0px solid #0e0e0e;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
}
#panel .lower {
   background: #3B3B98;
   color: #717171;
   max-height: 20px;
   border-top: 1px solid #272727;
   padding: 1px 20px;
   border-bottom: 1px solid #080808;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
}
#panel .lower a:link, #panel .lower a:visited {
   color: #ffffff;
   text-shadow: 1px 1px 1px #00000040;
}
.alerts--new a {
   color: #78ff00!important;
}
.pm_alert {
   background: #3b3b98;
   border-top: 1px solid #252525;
   text-align: center;
   padding: 12px 20px;
   margin-bottom: 30px;
   font-size: 13px;
   color: #000000;
   text-shadow: 0 0 5px #00000059;
   -webkit-transition: all 0.5s;
}
.shadetabs li a {
   text-decoration: none;
   position: relative;
   z-index: 1;
   font-size: 14px;
   /* border-radius: 4px; */
   padding: 10px 15px;
   /* text-align: center; */
   /* margin-right: 4px; */
   color: #798fff;
   background: #1f1f1f;
   transition: all 0.3s;
   /* border: 1px solid transparent; */
}
.red_notice {
   background: #3b3b98;
   border: 1px solid #1f1f1f;
   text-align: center;
   padding: 8px 20px;
   margin-bottom: 30px;
   font-size: 11px;
   word-wrap: break-word;
}
.shadetabs li a.selected {
   background: #3b3b98;
   color: #fff;
}
.smalltext {
   font-size: 14px;
   color: #ffffff;
}
.tcat {
   color: #fff;
   border: none;
   background: #3b3b98;
   color: #fff;
   border-top: 1px solid #1f1f1f;
   border-bottom: 1px solid #1d1d1d;
}
.thead {
   background: #182c61;
   color: #fff;
   border-bottom: 1px solid #252525;
   padding: 13px;
   font-size: 14px;
}
.tfoot {
   border-top: 1px solid #1f1f1f;
   padding: 6px;
   background: #182c61;
   color: #f7f7f7;
}
#footer .upper {
   background: #182c61;
   border-top: 1px solid #0c0c0c;
   border-bottom: 1px solid #151414;
   padding: 5px 18px;
   font-size: 12px;
   overflow: hidden;
}
#footer .lower {
   background: #333;
   padding: 12px 17px;
   font-size: 11px;
   letter-spacing: .25px;
   color: #525252;
   font-weight: 700;
   text-transform: uppercase;
}
.pm-alert {
   margin-top: 2px;
   color: #ffffff;
   text-shadow: 0px 0px 1px #0000008c;
}
.pm_alert:hover {
   background: #5a5ab9;
   -webkit-transition: 0.3s;
}
.breadcrumb a {
   font-weight: bold;
   text-overflow: ellipsis;
   min-width: 10%;
   max-width: 23%;
   text-decoration: none;
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
   float: left;
   font-size: 13px;
   line-height: 36px;
   padding-left: 30px;
   padding-right: 18px;
   background: #182c61;
   color: #bdbdbd;
   position: relative;
   transition: all 0.3s;
   z-index: 2;
}
.arrow {
   display: inline-block;
   float: left;
   background: #182c61;
   color: #182c61;
   position: relative;
   right: 18px;
   height: 36px;
   width: 36px;
   transform: scale(0.707) rotate(45deg);
   z-index: 3;
   box-shadow: 3px -3px 0 2px rgb(13, 13, 13), 5px -5px 0 2px rgba(45, 45, 45, 0.4);
   transition: all 0.3s;
   background: #182c61;
   margin-right: -36px;
}
.group9 {
   color: #EAB543;
   text-decoration: none;
}
.group66 {
   color: #FD7272;
   text-decoration: none;
}
.group28 {
   color: #1B9CFC;
   text-decoration: none;
}
.group63 {
   color: #FEA47F;
   text-shadow: 1px 1px 1px #000;
   text-decoration: none;
}
.group67 {
   color: #58B19F;
   font-weight: bold;
   text-shadow: 0px 2px 3px #000;
   text-decoration: none;
}
.group23 {
   color: #9AECDB;
   text-decoration: none;
}
.group49 {
   color: #FC427B;
   text-decoration: none;
}
.group2 {
   color: #ffffff;
   text-decoration: none;
}
.oc-time {
   margin-top: -3px;
   text-align: right;
   display: inline-block;
   float: right;
   background: #15151500;
   border: 0px solid #1b1a1a;
   box-shadow: 0 0 0px #0a0a0a inset;
   padding: 5px 15px;
   font-size: 12px;
   text-transform: uppercase;
   color: #ffffff;
   text-shadow: 0 0 2px #000;
}
.quickthread_button {
   position: absolute;
   top: 20px;
   right: 20px;
   display: inline-block;
   padding: 4px;
   border: 2px solid #1f1f1f;
   background-color: #182c61;
   border-radius: 8px;
}
.pagination .pagination_current {
   color: #fff;
   font-weight: 700;
   background: #3b3b98;
   border: 1px solid transparent;
}
.pagination a {
   background: #182c61;
   border: 1px solid #333;
}
a.button:link:hover, a.button:link:visited, a.button:link:active {
   background: #3b3b98;
}
a.button:link {
   display: inline-block;
   font-size: 14px;
   background: #182c61;
   color: #efefef;
   padding: 10px 15px;
   margin: 5px 0;
}
.psi-signature {
   float: right;
   padding: 0px 10px 0px 10px;
   color: #3b3b98;
   font-weight: bold;
}
.postbit_buttons>a:link, .postbit_buttons>a:hover, .postbit_buttons>a:visited, .postbit_buttons>a:active {
   display: inline-block;
   padding: 2px 5px;
   margin: 3px;
   font-size: 11px;
   background: #182c61;
   border: 0px solid #333;
   color: #b7b7b7;
}

[☾rescent]

looks good, nice shit pronouncer.

[Athr]

I like the blue color scheme. We could work a bit on the username colors.

[Kill Joy]

Pretty neat, I kinda like it but am on mobile currently. I’ll check it out when I get on my laptop.

[Pronouncer]

Pretty neat, I kinda like it but am on mobile currently. I’ll check it out when I get on my laptop.

i believe there is a mobile app for it too

---

I like the blue color scheme. We could work a bit on the username colors.

Feel free to suggest changes and i will upload is as an Aternative

[Hopsin]

I prefer the blue color than this purple-ish.

[PoddyLoggy]

Honestly liking this a lot more than the purple one, Idk purple just makes my eyes hurt a bit. Nice one!

[Pronouncer]

This theme is still working

[Laughing Man]

The chrome version is working 100% on brave. Nice!

[SIM-3205632]

Could you make an all white theme? Like really bright white kind of like discord.

[Truthkillz]

Aye looks really good thanks, great work!