Skin for Recreating Discord Chat Logs (2025)

Actions

Work Header

Rating:

General Audiences

Archive Warning:

No Archive Warnings Apply

Fandom:

No Fandom

Additional Tags:

Language:

English

Stats:

Published:: 2025-11-19
Completed:: 2025-11-20
Words:: 7,964
Chapters:: 3/3
Comments:: 8
Kudos:: 19
Bookmarks:: 9
Hits:: 267

SpookyTesting (FierySprites)

Summary:

A work skin for recreating a somewhat simplified version of Discord’s chat logs circa November 2025, using wovenstarlight’s original 2020 one as a base. Only uses the color palette for Discord’s dark mode, not light mode.

For convenience’s sake, the last chapter contains all of the CSS code in one place.

Notes:

Inspired by [Restricted Work] by unpredictableArtist (wovenstarlight) (Log in to access.)

As with all of my work skins on this site, this functions on both desktop and mobile screens, and with compatibility for the default and Reversi site skins.

Credit to TrojanTeapot’s own Discord skin for some of the reference images used in this skin’s code, and WildfireValkyrie’s one for a few pointers in regards to some specific features.

~~…I swear, if Discord decides to change its dark mode palette again in the future, I’m going to scream.~~

Chapter 1: Basic Formatting

Summary:

The bare essentials of putting together a Discord work skin for your fic. Includes replies, reactions, system messages, pings, roles, and user avatars.

Notes:

(See the end of the chapter for notes.)

Chapter Text

User Messages, Replies & Reactions

# general • Discuss whatever you’d like here. Use the other channels for specific specialized topics.
November 18, 2025
User 1 XX:XX PM
This is a text message. It is decently long, enough to take up multiple lines regardless of what device you’re reading it on. You can hover your cursor over it, and only this specific one will be highlighted. (edited)
You can chain messages together using additional span elements. Make sure to append a <br /> tag to the end of each one.
You can put links and @pings in them as well.
User 1 This is a message being replied to. It will only appear on a single line with Creator’s Style turned on.
User 1 XX:XX PM
This is a reply to another message. People have reacted to it, as seen below. The first one was used by the user currently signed-in.
👍 5 👎 3 ☺
User 1 XX:XX PM
The message below only has emojis.
👋😀
User 1 XX:XX PM
@User 1 This message is pinging the current user.
User 1 XX:XX PM
Here’s an example image to go along with this message.

[ + Got anything to respond with? ☺ ]

Blank Template

<blockquote class="discord">
  <!-- Channel Header -->
  <div class="channel">
    <!-- NOTE: To add an indicator for new pinned messages, add ‘new-pins’ to the above div’s classes. -->
    <p>
      <b class="hash">#</b>
      <b class="name">general</b>

      <!-- These two elements can be removed, if you don’t need a description. -->
      <span>•</span>
      <span class="desc">Discuss whatever you’d like here. Use the other channels for specific specialized topics.</span>
    </p>
  </div>

  <!-- Date Divider -->
  <p class="dateline" align="center">
    <span>MMMM DD, YYYY</span>
  </p>

  <!-- Message Template -->
  <p class="message tagged-user">
    <span>
      <b class="name">User 1</b>
      <small class="timestamp">XX:XX PM</small>
      <br />
      Insert text here.
    </span>
  </p>

  <!-- Typing Box -->
  <div class="typing-box">
    <!-- NOTE: If you’re intending on having a pending message in the typing box, wrap the text inside a span element. -->
    <p>
      <span>[</span>
      <b class="add">+</b>
      Message #general
      <b class="emojis">☺</b>
      <span>]</span>
    </p>
  </div>
</blockquote>

Example Message HTML Code

<p class="message">
  <span>
    <b class="name">User 1</b>
    <small class="timestamp">XX:XX PM</small>
    <br />
    This is a text message. It is decently long, enough to take up multiple lines regardless of what device you’re reading it on. You can hover your cursor over it, and only this specific one will be highlighted. <small class="edited">(edited)</small>
  </span>
  <br />
  <span>You can chain messages together using additional span elements. Make sure to append a &lt;br /&gt; tag to the end of each one.</span><br />
  <span>You can put <a>links</a> and <a class="ping">@pings</a> in them as well.</span>
</p>

<p class="message">
  <span>
    <small class="reply">
      <b class="name">User 1</b> This is a message being replied to. It will only appear on a single line with Creator’s Style turned on.<br />
    </small>

    <b class="name">User 1</b>
    <small class="timestamp">XX:XX PM</small>
    <br />
    This is a reply to another message. People have reacted to it, as seen below. The first one was used by the user currently signed-in.

    <br />
    <span class="reactions">
      <small class="selected">👍 5</small> <small>👎 3</small> <small>☺</small>
    </span>
  </span>
</p>

<p class="message">
  <span>
    <b class="name">User 1</b>
    <small class="timestamp">XX:XX PM</small>
    <br />
    The message below only has emojis.
  </span>
  <br />
  <span><big class="emojis">👋😀</big></span>
</p>

<p class="message tagged-user">
  <span>
    <b class="name">User 1</b>
    <small class="timestamp">XX:XX PM</small>
    <br />
    <a class="ping">@User 1</a> This message is pinging the current user.
  </span>
</p>

<p class="message">
  <span>
    <b class="name">User 1</b>
    <small class="timestamp">XX:XX PM</small>
    <br />
    Here’s an example image to go along with this message.
    <br />
    <img src="https://i.gyazo.com/2055e3d6d1df280abcd8ceff77f7b59e.jpg" />
  </span>
</p>

<!-- Typing Box with Text -->
<div class="typing-box">
  <p>
    <span>[</span>
    <b class="add">+</b>
    <span>Got anything to respond with?</span>
    <b class="emojis">☺</b>
    <span>]</span>
  </p>
</div>

System Messages, New Date & Typing Indicators, and Unavailable Typing Box

# important
→ Brace yourself. User 2 just joined the server! XX:XX PM
☎ User 2 started a call that lasted 3 hours. XX:XX PM
November 19, 2025
← User 2 left the group. XX:XX PM
User 1 is typing…
📌 User 1 pinned a message to this channel. See all the pins. XX:XX PM
You do not have permission to send messages in this channel.

Example Message HTML Code

<!-- Welcome Message -->
<p class="system welcome">
  <span>→</span>
  Brace yourself. <b>User 2</b> just joined the server!
  <small class="timestamp">XX:XX PM</small>
</p>

<!-- Call Message -->
<p class="system call">
  <span>☎</span>
  <b>User 2</b> started a call that lasted 3 hours.
  <small class="timestamp">XX:XX PM</small>
</p>

<!-- Date Divider -->
<p class="dateline new" align="center">
  <span>November 19, 2025</span>
</p>

<!-- Leaving Message -->
<p class="system leaving">
  <span>←</span>
  <b>User 2</b> left the group.
  <small class="timestamp">XX:XX PM</small>
</p>

<!-- Typing Indicator -->
<p class="typing">
  <small><b>User 1</b> is typing…</small>
</p>

<!-- New Pin Message -->
<p class="system pin">
  <span>📌</span>
  <b>User 1</b> pinned <b>a message</b> to this channel. <b>See all the pins.</b>
  <small class="timestamp">XX:XX PM</small>
</p>

<!-- Unavailable Typing Box -->
<div class="typing-box no-permission">
  <p>
    You do not have permission to send messages in this channel.
  </p>
</div>

Unread Message Indicator (No Date)

# general
User 1 XX:XX PM
This is a test message.
User 1 XX:XX PM
This is another test message.
[ + Got anything to respond with? ☺ ]

# general
User 1 XX:XX PM
This is a test message.
This is another test message.
[ + Got anything to respond with? ☺ ]

Example HTML Code

<p class="message">
  <span class="dateline new"></span>
  <span>
    <b class="name">User 1</b>
    <small class="timestamp">XX:XX PM</small>
    <br />
    This is another test message.
  </span>
</p>

<p class="message">
  <span>
    <b class="name">User 1</b>
    <small class="timestamp">XX:XX PM</small>
    <br />
    This is a test message.
  </span>
  <span class="dateline new"></span>
  <span>This is another test message.</span>
</p>

User Avatars & Roles

Role colors and avatars for Discord users are both attached to the ‘.name’ class tag in the CSS code. Custom classes for them should follow l:

#workskin .discord:not(.dm) .yoshi > .name,
#workskin .discord:not(.dm) .yoshi > span > .name {
  color: #2ECC71 !important;
}

#workskin .discord .yoshi > .name::before,
#workskin .discord .yoshi > span > .name::before {
  background-image: url('https://i.imgur.com/zCi4Gr9.png') !important;
  background-size: 135% !important;
  background-position: 70% -5%;
}

#workskin .discord:not(.dm) .bowser > .name,
#workskin .discord:not(.dm) .bowser > span > .name {
  color: #E67E22 !important;
}

#workskin .discord .bowser > .name::before,
#workskin .discord .bowser > span > .name::before {
  background-image: url('https://i.imgur.com/MI7YouT.png') !important;
  background-size: 165% !important;
  background-position-x: 20%;
}

The !important attribute is necessary to allow the role color and avatar for the assigned user to display properly.

After you’re done with that, add the appropriate class name to the ‘.message’ tag you desire (and the ‘.reply’ one, should you have one).

<p class="message bowser">
  <span>
    <small class="reply yoshi">
      <b class="name">BestBabysitter</b> What, and not an army of <i>castles?</i><br />
    </small>

    <b class="name">No. 1 Final Boss</b>
    <small class="timestamp">9:19 PM</small>
    <br />
    oh HELL no. thats TERRIFYING.
  </span>
</p>

If done correctly, it should show up like this:

# general
BestBabysitter What, and not an army of castles?
No. 1 Final Boss 9:19 PM
oh HELL no. thats TERRIFYING.
[ + For once, we can agree on something. ☺ ]

Role Pings & References

Like with user classes, role pings and references require the creation of custom CSS classes. A pre-arranged set of them including the default Discord role colors can be viewed by clicking below.

Default Role Colors

/* Discord Chat Log (2025) - Default Role Colors */

#workskin .discord .role1,
#workskin .discord a.ping.role1 {
  color: #1ABC9C !important;
}

#workskin .discord a.ping.role1 {
  background-color: #1ABC9C19 !important;
}

#workskin .discord a.ping.role1:hover {
  background-color: #1ABC9C4C !important;
}

#workskin .discord .role2,
#workskin .discord a.ping.role2 {
  color: #2ECC71 !important;
}

#workskin .discord a.ping.role2 {
  background-color: #2ECC7119 !important;
}

#workskin .discord a.ping.role2:hover {
  background-color: #2ECC714C !important;
}

#workskin .discord .role3,
#workskin .discord a.ping.role3 {
  color: #3498DB !important;
}

#workskin .discord a.ping.role3 {
  background-color: #3498DB19 !important;
}

#workskin .discord a.ping.role3:hover {
  background-color: #3498DB4C !important;
}

#workskin .discord .role4,
#workskin .discord a.ping.role4 {
  color: #9B59B6 !important;
}

#workskin .discord a.ping.role4 {
  background-color: #9B59B619 !important;
}

#workskin .discord a.ping.role4:hover {
  background-color: #9B59B64C !important;
}

#workskin .discord .role5,
#workskin .discord a.ping.role5 {
  color: #E91E63 !important;
}

#workskin .discord a.ping.role5 {
  background-color: #E91E6319 !important;
}

#workskin .discord a.ping.role5:hover {
  background-color: #E91E634C !important;
}

#workskin .discord .role6,
#workskin .discord a.ping.role6 {
  color: #F1C40F !important;
}

#workskin .discord a.ping.role6 {
  background-color: #F1C40F19 !important;
}

#workskin .discord a.ping.role6:hover {
  background-color: #F1C40F4C !important;
}

#workskin .discord .role7,
#workskin .discord a.ping.role7 {
  color: #E67E22 !important;
}

#workskin .discord a.ping.role7 {
  background-color: #E67E2219 !important;
}

#workskin .discord a.ping.role7:hover {
  background-color: #E67E224C !important;
}

#workskin .discord .role8,
#workskin .discord a.ping.role8 {
  color: #E74C3C !important;
}

#workskin .discord a.ping.role8 {
  background-color: #E74C3C19 !important;
}

#workskin .discord a.ping.role8:hover {
  background-color: #E74C3C4C !important;
}

#workskin .discord .role9,
#workskin .discord a.ping.role9 {
  color: #95A5A6 !important;
}

#workskin .discord a.ping.role9 {
  background-color: #95A5A619 !important;
}

#workskin .discord a.ping.role9:hover {
  background-color: #95A5A64C !important;
}

#workskin .discord .role10,
#workskin .discord a.ping.role10 {
  color: #607D8B !important;
}

#workskin .discord a.ping.role10 {
  background-color: #607D8B19 !important;
}

#workskin .discord a.ping.role10:hover {
  background-color: #607D8B4C !important;
}

/* Discord Chat Log (2025) - Default Role Colors (Dark) */

#workskin .discord .role1a,
#workskin .discord a.ping.role1a {
  color: #11806A !important;
}

#workskin .discord a.ping.role1a {
  background-color: #11806A19 !important;
}

#workskin .discord a.ping.role1a {
  background-color: #11806A4C !important;
}

#workskin .discord .role2a,
#workskin .discord a.ping.role2a:hover {
  color: #1F8B4C !important;
}

#workskin .discord a.ping.role2a {
  background-color: #1F8B4C19 !important;
}

#workskin .discord a.ping.role2a:hover {
  background-color: #1F8B4C4C !important;
}

#workskin .discord .role3a,
#workskin .discord a.ping.role3a {
  color: #206694 !important;
}

#workskin .discord a.ping.role3a {
  background-color: #20669419 !important;
}

#workskin .discord a.ping.role3a:hover {
  background-color: #2066944C !important;
}

#workskin .discord .role4a,
#workskin .discord a.ping.role4a {
  color: #71368A !important;
}

#workskin .discord a.ping.role4a {
  background-color: #71368A19 !important;
}

#workskin .discord a.ping.role4a:hover {
  background-color: #71368A4C !important;
}

#workskin .discord .role5a,
#workskin .discord a.ping.role5a {
  color: #AD1457 !important;
}

#workskin .discord a.ping.role5a {
  background-color: #AD145719 !important;
}

#workskin .discord a.ping.role5a:hover {
  background-color: #AD14574C !important;
}

#workskin .discord .role6a,
#workskin .discord a.ping.role6a {
  color: #C27C0E !important;
}

#workskin .discord a.ping.role6a {
  background-color: #C27C0E19 !important;
}

#workskin .discord a.ping.role6a:hover {
  background-color: #C27C0E4C !important;
}

#workskin .discord .role7a,
#workskin .discord a.ping.role7a {
  color: #A84300 !important;
}

#workskin .discord a.ping.role7a {
  background-color: #A8430019 !important;
}

#workskin .discord a.ping.role7a:hover {
  background-color: #A843004C !important;
}

#workskin .discord .role8a,
#workskin .discord a.ping.role8a {
  color: #992D22 !important;
}

#workskin .discord a.ping.role8a {
  background-color: #992D2219 !important;
}

#workskin .discord a.ping.role8a:hover {
  background-color: #992D224C !important;
}

#workskin .discord .role9a,
#workskin .discord a.ping.role9a {
  color: #979C9F !important;
}

#workskin .discord a.ping.role9a {
  background-color: #979C9F19 !important;
}

#workskin .discord a.ping.role9a:hover {
  background-color: #979C9F4C !important;
}

#workskin .discord .role10a,
#workskin .discord a.ping.role10a {
  color: #546E7A !important;
}

#workskin .discord a.ping.role10a {
  background-color: #546E7A19 !important;
}

#workskin .discord a.ping.role10a:hover {
  background-color: #546E7A4C !important;
}

To use them, add the desired class to the relevant <b> tag in the system message or ‘.ping’ tag like so:

<!-- Welcome Message -->
<p class="system welcome">
  <span>→</span>
  Welcome, <b class="role3">User 3</b>. We hope you brought cake.
  <small class="timestamp">XX:XX PM</small>
</p>

<!-- User Message -->
<p class="message">
  <span>
    <b class="name">User 1</b>
    <small class="timestamp">XX:XX PM</small>
    <br />
    Hey there, <a class="ping role3">@User 3</a>! Glad you could join us!
  </span>
</p>

(Just pretend that being User 3 is a role unto itself for this example.)

If done correctly, it should show up like this:

# general
→ Welcome, User 3. We hope you brought cake. XX:XX PM
User 1 XX:XX PM
Hey there, @User 3! Glad you could join us!
[ + Message #general ☺ ]

Base CSS Code

Click below to reveal the base CSS code for all of the elements above.

View Code

/* Discord Chat Log (2025) - Container */

#workskin .discord {
  background-color: #323339;
  border-radius: 5px;
  border-inline-start: 0;
  box-shadow: 0 0 8px #aaaa;
  color: #DFE0E2;
  display: block;
  margin-inline-start: 0;
  margin: 30px auto;
  padding: 0;
  padding-bottom: 6px;
  width: 710px;
  max-width: 95%;
}

#workskin .discord > p:first-of-type:not(.dateline) {
  margin-top: 1.25em !important;
}

/* Discord Chat Log (2025) - Channel Header */

#workskin .discord > div.channel > p {
  align-items: center;
  border-bottom: 1px solid #3E3F45;
  color: #9B9CA3;
  display: grid;
  grid-template-columns: 2.5em auto auto 1fr auto;
  padding: 6px;
  height: 2.25em;
}

#workskin .discord > div.channel .hash {
  cursor: default;
  font-size: 1.5em;
  font-weight: normal;
  text-align: center;
}

#workskin .discord > div.channel .name {
  color: white;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#workskin .discord > div.channel span:nth-child(3) {
  color: #3E3F45;
}

#workskin .discord > div.channel .desc {
  cursor: pointer;
  font-size: .85em;
  font-weight: bold;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Discord Chat Log (2025) - Channel Header: Buttons */

#workskin .discord > div.channel > p::after {
  content: "";
  background: transparent no-repeat center;
  background-size: 6.7em auto;
  cursor: pointer;
  grid-column: 5;
  margin: 0 10px;
  height: 1.4em;
  width: 6.7em;
}

#workskin .discord > div.channel:not(.new-pins) > p::after {
  background-image: url(https://i.imgur.com/2Jo3bI3.png);
}

#workskin .discord > div.channel.new-pins > p::after {
  background-image: url(https://i.imgur.com/GClC6WS.png);
}

/* Discord Chat Log (2025) - Date Divider */

#workskin .discord .dateline {
  border-bottom: 1px solid #FFFFFF0F;
  color: #ADAEB4;
  display: block;
  font-size: .75em;
  font-weight: bold;
  line-height: .1em;
  margin: .6em 15px;
  text-align: center;
  position: relative;
}

#workskin .discord .dateline > span {
  background-color: #323339;
  padding: 0 5px;
  position: relative;
  top: 1px;
}

#workskin .discord p.dateline {
  margin: 2.25em 15px 1.5em;
}

/* Discord Chat Log (2025) - Date Divider: Unread Messages */

#workskin .discord .dateline.new {
  border-color: #DA3E44;
  color: #DA3E44;
}

#workskin .discord .dateline.new::before {
  content: '';
  border-top: .6em solid transparent;
  border-bottom: .6em solid transparent;
  border-right: .6em solid #DA3E44;
  position: absolute;
  top: -.48em;
  right: 2.5em;
  height: 0;
  width: 0;
}

#workskin .discord .dateline.new::after {
  content: 'New';
  background-color: #DA3E44;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  color: white;
  font-size: .9em;
  line-height: 1.2em;
  padding: .1em 0;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  top: -.5em;
  right: 0;
  height: 1em;
  width: 2.8em;
}

#workskin .discord p.message > span.dateline.new:first-child {
  /* New Message Underneath Another User */
  margin: 0 15px;
  position: relative;
  bottom: 0.7em;
}

#workskin .discord p.message > span.dateline.new {
  /* New Message to Current Chain */
  position: relative;
  bottom: 0.05em;
}

/* Discord Chat Log (2025) - Messages */

#workskin .discord > p.message,
#workskin .discord > p.system,
#workskin .discord > p.typing {
  margin: 1em auto;
}

#workskin .discord p.message > span:not(.dateline),
#workskin .discord p.system,
#workskin .discord p.typing {
  display: block;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-right: 6px;
  padding: 2px 20px 2px 4.6em;
  position: relative;
}

#workskin .discord p.message > span:hover,
#workskin .discord p.system:hover {
  background-color: #3A3B41;
}

#workskin .discord p.message > br {
  display: none;
}

#workskin .discord p.message > span > img {
  border-radius: 8px;
  cursor: pointer;
  margin-top: 5px;
}

#workskin .discord p.message big.emojis {
  align-items: center;
  display: flex;
  font-size: 2.5em;
  letter-spacing: -5px;
  line-height: 1.1em;
}

/* Discord Chat Log (2025) - Messages: Typing Indicator */

#workskin .discord p.typing {
  background-color: #3A3B41;
  cursor: default;
  color: #C0C1C5;
  position: relative;
}

#workskin .discord p.typing::before {
  content: '';
  background-image: url('https://cdn3.emoji.gg/emojis/3445_Typing.gif');
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  margin: 0 10px 0 15px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2.7em;
}

#workskin .discord p.typing > small {
  font-size: .75em;
}

#workskin .discord p.typing > small > b {
  color: white;
}

/* Discord Chat Log (2025) - Messages: User Tagged */

#workskin .discord p.message.tagged-user > span {
  background-color: #3B3735;
  position: relative;
}

#workskin .discord p.message.tagged-user > span:hover {
  background-color: #363537 !important;
}

#workskin .discord p.message.tagged-user > span::before {
  content: '';
  background-color: #CE9C5C;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2.5px;
  z-index: 1;
}

/* Discord Chat Log (2025) - Messages: Timestamp */

#workskin .discord .timestamp {
  color: #9B9CA3;
  display: inline-block;
  font-size: .75em;
  margin-left: 6px;
}

/* Discord Chat Log (2025) - Messages: Links */

#workskin .discord a {
  border: none;
  color: #7BB0F5;
  cursor: pointer;
}

#workskin .discord a:hover {
  text-decoration: underline;
}

/* Discord Chat Log (2025) - Messages: Pings */

#workskin .discord a.ping,
#workskin .discord a.ping:link,
#workskin .discord a.ping:hover {
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  padding: 0 3px;
  transition-duration: .05s;
}

#workskin .discord a.ping,
#workskin .discord a.ping:link {
  background-color: #5865F24C;
  color: #DEE0FC;
}

#workskin .discord a.ping:hover {
  background-color: #5865F2;
  color: white;
}

/* Discord Chat Log (2025) - User Messages: Name & Avatar */

#workskin .discord p.message > span > b.name::before {
  /* User Avatar */
  content: '';
  background-image: url('https://i.imgur.com/4TFWQVB.png');
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  margin: 2px 10px 0 15px;
  position: absolute;
  left: 0;
  height: 2.7em;
  width: 2.7em;
}

#workskin .discord p.message b.name {
  color: white;
}

#workskin .discord p.message b.name:hover {
  cursor: pointer;
  text-decoration: underline;
}

/* Discord Chat Log (2025) - User Messages: Replies */

#workskin .discord .reply {
  color: #D6D8D9;
  cursor: pointer;
  display: block;
  font-size: .85em;
  overflow: hidden;
  padding-bottom: .4em;
  padding-right: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
}

#workskin .discord .reply:hover {
  color: white;
}

#workskin .discord .reply .name::before {
  /* User Avatar */
  content: '';
  background-image: url('https://i.imgur.com/4TFWQVB.png');
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100%;
  cursor: pointer;
  display: inline-block;
  margin-right: 4px;
  position: relative;
  top: .25em;
  height: 1.2em;
  width: 1.2em;
}

#workskin .discord .reply::after {
  content: '';
  border-top: 2px solid #5E5F66;
  border-left: 2px solid #5E5F66;
  border-top-left-radius: 8px;
  position: absolute;
  top: .80em;
  left: 2.7em;
  height: 1.05em;
  width: 2.2em;
}

#workskin .discord .reply:hover::after {
  border-color: #C4C5C9;
}

#workskin .discord .reply > .name {
  color: #FFFFFF80 !important;
}

/* Discord Chat Log (2025) - User Messages: Reactions */

#workskin .discord .reactions {
  display: block;
  margin-top: -.2em;
  padding-bottom: 4px;
  user-select: none;
}

#workskin .discord .reactions > small {
  align-items: center;
  background-color: #3A3B41;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #C4C5C9;
  cursor: pointer;
  display: inline-flex;
  font-size: 1em;
  font-weight: bold;
  justify-content: center;
  line-height: 1.65em;
  margin-top: .4em;
  padding: .1em .5em 0;
  height: 1.65em;
  min-width: 1em;
}

#workskin .discord .reactions > small:hover {
  background-color: #4C4D53 !important;
  color: #F4F4F4;
}

#workskin .discord .reactions > small:active {
  border-color: #6D6D74;
}

#workskin .discord .reactions > small.selected {
  background-color: #5865F240 !important;
  border-color: #5865F2;
  color: #DFE4FF;
}

#workskin .discord p.message > span:hover > .reactions > small {
  background-color: #424247;
}

/* Discord Chat Log (2025) - User Messages: Edited Indicator */

#workskin .discord .edited {
  color: #9B9CA3;
  font-size: .675em;
  user-select: none;
}

/* Discord Chat Log (2025) - System Messages */

#workskin .discord .system {
  color: #9B9CA3;
}

#workskin .discord .system > b {
  color: white;
  cursor: pointer;
}

#workskin .discord .system > span:first-child {
  display: none;
}

#workskin .discord .system > b:hover {
  text-decoration: underline;
}

#workskin .discord .system > .timestamp {
  margin-left: 0;
}

/* Discord Chat Log (2025) - System Messages: Types */

#workskin .discord .system::before {
  /* Message Icon */
  content: '';
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  margin: .1em 10px 0 15px;
  position: absolute;
  left: 0;
  height: 1.2em;
  width: 2.7em;
}

#workskin .discord .system.welcome::before {
  background-image: url("https://i.imgur.com/C7MVG0u.png");
}

#workskin .discord .system.leaving::before {
  background-image: url("https://i.imgur.com/0PDJMVo.png");
}

#workskin .discord .system.pin::before {
  background-image: url("https://i.imgur.com/SdqqXPO.png");
}

#workskin .discord .system.call::before {
  background-image: url("https://i.imgur.com/dHx3lB8.png");
}

/* Discord Chat Log (2025) - Typing Box */

#workskin .discord > div.typing-box {
  background-color: #393A41;
  border: 1px solid #44454C;
  border-radius: 5px;
  color: #6D6E77;
  cursor: text;
  margin: 1.25em 6px 0;
}

#workskin .discord > div.typing-box > p {
  align-items: center;
  column-gap: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: .6em;
}

#workskin .discord > div.typing-box span:first-of-type,
#workskin .discord > div.typing-box span:last-of-type, {
  display: none;
}

#workskin .discord > div.typing-box b.add,
#workskin .discord > div.typing-box b.emojis {
  align-self: start;
  border-radius: 5px;
  color: #C4C5C9;
  cursor: pointer;
  font-size: 180%;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
  user-select: none;
  width: 1.2em;
}

#workskin .discord > div.typing-box b.add:hover,
#workskin .discord > div.typing-box b.emojis:hover {
  background-color: #5B5B63;
  color: white;
}

/* Discord Chat Log (2025) - Typing Box: Pending Message */

#workskin .discord > div.typing-box span:nth-child(3) {
  color: #DFE0E2;
  margin: .33em 0;
}

/* Discord Chat Log (2025) - Typing Box: No Permission */

#workskin .discord > div.typing-box.no-permission > p {
  display: block;
  cursor: not-allowed;
  line-height: 2.15em;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Notes:

I’ve modified wovenstarlight’s original Discord skin so heavily at this point, I figured I might as well just make my own using it as a base. Plus, it gave me an excuse to add some of the platform’s newer features to the code, like replies and reactions, so it all works out in the end.

Enhancements compared to the original skin include being able to highlight individual messages and having user avatars be attached to a pseudo-class for ease of use and maintenance. This way, you won’t have to replace every single instance of someone’s PFP in a chapter if something goes wrong. It also means it won’t take up space when Show Creator’s Style is turned off (though I wouldn’t exactly recommend doing so anyway, for obvious reasons).

I previously had the Add Media and Emoji buttons be pseudo-classes as well, but you’re not allowed to add any properties to them that only appear when your cursor hovers over them, so I was forced to just make them regular HTML elements. It’s a bit of a shame, but some sacrifices have to be made in the name of interactivity and accuracy.

Since I’m making this with mobile screens in mind, I didn’t add any of the extraneous stuff that the header and typing boxes have these days, like the search bar or the ‘Gift Nitro’ button ~~(a waste of space if I’ve ever seen one)~~. I don’t think they’re really needed, anyway. This is supposed to be a reasonable approximation of Discord, not the full-blown thing. There’s a reason I made the server member list a whole separate work skin.

I’m planning on including more features for this skin later, such as link previews and advanced text formatting—but for now, I think this is good enough to post on its own. Don’t want to overwhelm you guys by putting everything in a single chapter, now. Hopefully, this’ll be easy enough for all of you to use; God knows how tricky finding your way around HTML and CSS code can be for the uninitiated.

Actions

Kudos

amazing_tori, ParasiticHost, enbyguous, ImagineUmagine, forcalamity, Charles_Rockafellor, MeowQwQ, Alexanderlight8, lulzcel, Count_Duckoo, basically_charlie, Mewzebub, cobaltB, ekaana, roombi_go_brrrrr, Aika_2100, Seika, and Fanbase_Universes as well as 1 guest left kudos on this work!

Comments

Sorry, this work doesn't allow non-Archive users to comment. You can however still leave Kudos!

Archive of Our Own^beta

Actions

Work Header