-
Notifications
You must be signed in to change notification settings - Fork 1
/
dark-mode.css
108 lines (89 loc) · 2 KB
/
dark-mode.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/* Body and Background */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
/* Sidebar Styling */
body.dark-mode #contact-list {
background-color: #1e1e1e;
border-color: #333;
color: #e0e0e0;
}
body.dark-mode .list-group-item {
background-color: #1e1e1e;
color: #e0e0e0;
}
body.dark-mode .list-group-item:hover {
background-color: #333;
color: #ffffff;
}
/* Chat Window */
body.dark-mode #chat-window {
background-color: #1e1e1e;
border-color: #333;
}
body.dark-mode .card.incoming {
background-color: #263238;
color: #e0e0e0;
}
body.dark-mode .card.outgoing {
background-color: #37474f;
color: #e0e0e0;
}
body.dark-mode .card-footer {
color: #b0bec5;
}
/* Buttons */
body.dark-mode .btn {
background-color: #333;
color: #e0e0e0;
border-color: #555;
}
body.dark-mode .btn:hover {
background-color: #444;
border-color: #666;
}
body.dark-mode .btn-outline-primary {
color: #b0bec5;
border-color: #555;
}
body.dark-mode .btn-outline-primary:hover {
color: #ffffff;
background-color: #37474f;
}
/* Adjust muted text color for Dark Mode */
body.dark-mode .text-muted {
color: #b0bec5 !important; /* Light gray for readability */
}
/* Dropdown Menu */
body.dark-mode .dropdown-menu {
background-color: #1e1e1e;
border-color: #333;
color: #e0e0e0;
}
body.dark-mode .dropdown-item {
color: #e0e0e0;
}
body.dark-mode .dropdown-item:hover {
background-color: #37474f;
color: #ffffff;
}
/* Search Bar */
body.dark-mode #search-bar-container input {
background-color: #1e1e1e;
color: #e0e0e0;
border-color: #333;
}
body.dark-mode #search-bar-container input::placeholder {
color: #b0bec5;
}
/* Scrollbars */
body.dark-mode #contact-list::-webkit-scrollbar,
body.dark-mode #chat-window::-webkit-scrollbar {
width: 8px;
}
body.dark-mode #contact-list::-webkit-scrollbar-thumb,
body.dark-mode #chat-window::-webkit-scrollbar-thumb {
background-color: #555;
border-radius: 4px;
}