add dracula theme for thelounge

This commit is contained in:
Lenore 2019-10-17 23:02:22 +02:00
commit 385f61d6aa
6 changed files with 2811 additions and 0 deletions

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
/node_modules
yarn-error.log

5
.stylelintrc.yml Normal file
View File

@ -0,0 +1,5 @@
extends: stylelint-config-standard
rules:
indentation: 4

11
README.md Normal file
View File

@ -0,0 +1,11 @@
<h1 align="center">
Dracula for TheLounge
</h1>
<h3 align="center">
A dark theme for thelounge based on [dracula/dracula-theme](https://github.com/dracula/dracula-theme) with a thing for purple.
</h3>
# Issues
This theme is not perfect, it is still a work in progress. Feel free to submit issues [here](https://github.com/SpaceLenore/thelounge-theme-dracula/issues).

308
dracula_theme.css Normal file
View File

@ -0,0 +1,308 @@
/*!
* Dracula theme for TheLounge by SpaceLenore
*
* Based on solarized css file
* License: MIT
* Repo:
*/
/* Samsung Internet and Microsoft Edge (yes, both of them use -webkit- prefix) */
::-webkit-input-placeholder {
color: var(--body-color-muted);
}
:root {
--body-bg-color: #282a36;
--window-bg-color: #282a36;
--body-color: #f8f8f2;
--body-color-muted: #6272a4;
--link-color: #8be9fd;
--unread-marker-color: #50fa7b;
--date-marker-color: #6272a4;
--highlight-bg-color: #44475a;
--highlight-color: #bd93f9;
--highlight-border-color: #bd93f9;
--background-light-color: #44475a;
--background-error: #f55;
}
::placeholder {
color: var(--body-color-muted);
opacity: 1; /* fix opacity in Firefox */
}
::-webkit-scrollbar-thumb:vertical {
background: hsla(232, 14%, 31%, 0.4);
}
::-webkit-scrollbar-thumb:vertical:hover {
background: hsla(232, 14%, 31%, 0.5);
}
::-webkit-scrollbar-thumb:vertical:active {
background: hsla(232, 14%, 31%, 0.6);
}
html {
scrollbar-color: hsl(232, 14%, 31%) hsla(232, 14%, 31%, 0.1);
scrollbar-width: thin;
}
#loading .logo,
#windows .logo {
display: none;
}
#loading .logo-inverted,
#windows .logo-inverted {
display: inline-block;
}
#sidebar .logo-container {
padding-top: 10px;
}
#sidebar .logo-inverted {
height: 35px;
}
i.hostmask {
font-size: 90%;
font-style: normal;
opacity: 0.7;
}
.irc-monospace,
pre,
code,
kbd {
color: var(--body-color);
background-color: var(--highlight-bg-color);
border-color: var(--highlight-bg-color);
box-shadow: none;
text-shadow: none;
}
#chat .count::before,
#form #submit,
#form #upload,
#chat button.menu,
#viewport .lt,
#viewport .rt {
color: var(--body-color);
}
#context-menu,
.textcomplete-menu {
background-color: var(--window-bg-color);
border: 1px solid var(--background-light-color);
border-width: 0.5px;
}
.context-menu-item,
.textcomplete-item {
transition: none;
}
.context-menu-divider {
border: 1px solid var(--background-light-color);
border-width: 0.5px;
}
#loading,
#chat .userlist,
#windows .window,
body {
background-color: var(--body-bg-color);
color: var(--body-color);
}
#form,
#viewport .lt::after,
#windows #chat .header,
#chat .content,
#chat .userlist {
border-color: var(--background-light-color);
}
.context-menu-item,
.textcomplete-item a {
color: var(--body-color);
}
#chat .action .content,
#chat .action .from {
color: var(--highlight-color);
}
#chat .msg.message.self .content {
color: var(--body-color);
}
#chat .show-more .btn {
background: var(--unread-marker-color);
color: var(--body-bg-color);
border: 0;
border-radius: 0;
text-transform: uppercase;
transition: background 0.2s;
}
.btn-reconnect {
background: var(--background-error);
color: var(--body-color);
border: 0;
border-radius: 0;
margin: 0;
}
#input,
#windows #form .input,
#form,
#chat .userlist .count {
background-color: inherit;
}
/* Hide close button on channels, it is not used that frequently */
#sidebar .chan.channel .close {
display: none;
}
#sidebar .chan.active {
background-color: var(--window-bg-color);
}
#footer {
height: 43px;
line-height: 43px;
}
#footer .icon {
border-radius: 0;
}
.context-menu-item:focus,
.context-menu-item:hover,
.textcomplete-item:hover,
.textcomplete-menu .active,
#chat .userlist .user.active,
#sidebar,
#footer {
color: var(--body-color);
background-color: var(--background-light-color);
}
#chat .userlist .search,
#windows #form .input {
border: 0;
color: var(--body-color);
}
#chat.colored-nicks .user.color-1,
#chat.colored-nicks .user.color-9,
#chat.colored-nicks .user.color-17,
#chat.colored-nicks .user.color-25 {
color: #f55;
}
#chat.colored-nicks .user.color-2,
#chat.colored-nicks .user.color-10,
#chat.colored-nicks .user.color-18,
#chat.colored-nicks .user.color-26 {
color: #ff79c6;
}
#chat.colored-nicks .user.color-3,
#chat.colored-nicks .user.color-11,
#chat.colored-nicks .user.color-19,
#chat.colored-nicks .user.color-27 {
color: #ffb86c;
}
#chat.colored-nicks .user.color-4,
#chat.colored-nicks .user.color-12,
#chat.colored-nicks .user.color-20,
#chat.colored-nicks .user.color-28 {
color: #f1fa8c;
}
#chat.colored-nicks .user.color-5,
#chat.colored-nicks .user.color-13,
#chat.colored-nicks .user.color-21,
#chat.colored-nicks .user.color-29 {
color: #50fa7b;
}
#chat.colored-nicks .user.color-6,
#chat.colored-nicks .user.color-14,
#chat.colored-nicks .user.color-22,
#chat.colored-nicks .user.color-30 {
color: #8be9fd;
}
#chat.colored-nicks .user.color-7,
#chat.colored-nicks .user.color-15,
#chat.colored-nicks .user.color-23,
#chat.colored-nicks .user.color-31 {
color: #6272a4;
}
#chat.colored-nicks .user.color-8,
#chat.colored-nicks .user.color-16,
#chat.colored-nicks .user.color-24,
#chat.colored-nicks .user.color-32 {
color: #bd93f9;
}
#chat .msg.motd .text,
#chat .toggle-content {
background-color: var(--background-light-color);
}
#chat .toggle-content,
#chat .toggle-text .body,
#chat .toggle-type-error {
color: var(--body-color-muted);
}
#chat .channel .msg.highlight .time {
color: var(--body-color);
}
#chat .channel .highlight .toggle-content {
background-color: var(--body-bg-color);
}
#chat table.channel-list td {
color: var(--body-color-muted);
}
#chat table.channel-list th,
#chat table.ban-list th,
#chat table.channel-list td,
#chat table.ban-list td {
border-bottom-color: var(--background-light-color);
}
/* Increase contrast of some IRC colors */
/* .irc-fg2 { color: #007ae6; }
.irc-fg5 { color: #e969a7; }
.irc-fg6 { color: #d20ff0; }
.irc-fg12 { color: #66b2ff; } */
@media (max-width: 768px) {
#sidebar-overlay {
background: rgba(0, 0, 0, 0.8);
}
}
@media (max-width: 479px) {
#chat .message .from .user::before {
content: "<";
}
#chat .message .from .user::after {
content: ">";
}
}

29
package.json Normal file
View File

@ -0,0 +1,29 @@
{
"name": "thelounge-theme-dracula",
"description": "Dracula theme for thelounge",
"version": "1.0.0",
"keywords": [
"thelounge",
"thelounge-theme"
],
"homepage": "https://github.com/SpaceLenore/thelounge-theme-dracula",
"repository": {
"type": "git",
"url": "git+https://github.com/SpaceLenore/thelounge-theme-dracula.git"
},
"license": "MIT",
"main": "package.json",
"thelounge": {
"name": "Dracula",
"type": "theme",
"css": "dracula_theme.css"
},
"devDependencies": {
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0"
},
"scripts": {
"test": "stylelint dracula_theme.css",
"format": "stylelint --fix dracula_theme.css"
}
}

2456
yarn.lock Normal file

File diff suppressed because it is too large Load Diff