Skip to content

Commit

Permalink
Updates to the dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@nimafanniasl
nimafanniasl committed Feb 11, 2024
1 parent a587d98 commit a47fce8
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 74 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@
- [ ] Make the footer always stick to the down of the screen
- [ ] Make the header and footer dynamic and load from a javascript file
- [ ] Add reactions to posts
- [ ] access for everyone to assign posts to labels
- [ ] access for everyone to assign posts to labels
- [ ] Toggle for switching between light and dark mode
146 changes: 73 additions & 73 deletions style/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,171 +348,171 @@ footer {
}

html {
background-color: #181a1b !important;
background-color: #191b1b !important;
}
html {
color-scheme: dark !important;
}
html, body {
background-color: #181a1b;
html, body, input, textarea, select, button, dialog {
background-color: #191b1b;
}
html, body {
border-color: #736b5e;
color: #e8e6e3;
html, body, input, textarea, select, button {
border-color: #776e5f;
color: #f1ece2;
}
a {
color: #3391ff;
color: #4293ef;
}
table {
border-color: #545b5e;
border-color: #585d5d;
}
::placeholder {
color: #b2aba1;
color: #b8afa1;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: #404400 !important;
color: #e8e6e3 !important;
background-color: #424406 !important;
color: #f1ece2 !important;
}
::-webkit-scrollbar {
background-color: #202324;
color: #aba499;
background-color: #222424;
color: #b1a899;
}
::-webkit-scrollbar-thumb {
background-color: #454a4d;
background-color: #494c4c;
}
::-webkit-scrollbar-thumb:hover {
background-color: #575e62;
background-color: #5c6061;
}
::-webkit-scrollbar-thumb:active {
background-color: #484e51;
background-color: #4c5050;
}
::-webkit-scrollbar-corner {
background-color: #181a1b;
background-color: #191b1b;
}
::selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
background-color: #0b4e9d !important;
color: #f1ece2 !important;
}
::-moz-selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
background-color: #0b4e9d !important;
color: #f1ece2 !important;
}

/* Invert Style */
.jfk-bubble.gtx-bubble, .captcheck_answer_label > input + img, span#closed_text > img[src^="https://www.gstatic.com/images/branding/googlelogo"], span[data-href^="https://www.hcaptcha.com/"] > #icon, #bit-notification-bar-iframe, ::-webkit-calendar-picker-indicator, img.Wirisformula {
filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
filter: invert(100%) hue-rotate(180deg) contrast(90%) sepia(12%) !important;
}

/* Variables Style */
:root {
--darkreader-neutral-background: #131516;
--darkreader-neutral-text: #d8d4cf;
--darkreader-selection-background: #004daa;
--darkreader-selection-text: #e8e6e3;
--darkreader-neutral-background: #141516;
--darkreader-neutral-text: #e1d9ce;
--darkreader-selection-background: #0b4e9d;
--darkreader-selection-text: #f1ece2;
}

/* Modified CSS */
body {
color: rgb(200, 195, 188);
color: rgb(208, 200, 187);
}
header {
background-color: rgb(38, 42, 43);
color: rgb(232, 230, 227);
background-color: rgb(40, 43, 42);
color: rgb(241, 236, 226);
}
nav ul li a {
text-decoration-color: initial;
color: rgb(232, 230, 227);
color: rgb(241, 236, 226);
}
.post {
background-color: rgb(24, 26, 27);
border-color: rgb(62, 68, 70);
background-color: rgb(25, 27, 27);
border-color: rgb(65, 69, 69);
}
.post a {
text-decoration-color: initial;
color: rgb(200, 195, 188);
background-color: rgb(53, 57, 59);
color: rgb(208, 200, 187);
background-color: rgb(56, 58, 58);
}
.post a:hover {
background-color: rgb(64, 69, 72);
color: rgb(232, 230, 227);
background-color: rgb(67, 71, 71);
color: rgb(241, 236, 226);
}
footer {
background-color: rgb(38, 42, 43);
color: rgb(232, 230, 227);
background-color: rgb(40, 43, 42);
color: rgb(241, 236, 226);
}
.category {
background-color: rgb(24, 26, 27);
border-color: rgb(62, 68, 70);
background-color: rgb(25, 27, 27);
border-color: rgb(65, 69, 69);
}
.category a {
text-decoration-color: initial;
color: rgb(200, 195, 188);
background-color: rgb(53, 57, 59);
color: rgb(208, 200, 187);
background-color: rgb(56, 58, 58);
}
.category a:hover {
background-color: rgb(64, 69, 72);
color: rgb(232, 230, 227);
background-color: rgb(67, 71, 71);
color: rgb(241, 236, 226);
}
.post-form {
background-color: rgb(24, 26, 27);
border-color: rgb(62, 68, 70);
background-color: rgb(25, 27, 27);
border-color: rgb(65, 69, 69);
}
#post-content {
border-color: rgb(62, 68, 70);
border-color: rgb(65, 69, 69);
}
#post-title {
border-color: rgb(62, 68, 70);
border-color: rgb(65, 69, 69);
}
button[type="submit"] {
background-color: rgb(0, 98, 204);
color: rgb(232, 230, 227); border-color: initial;
background-color: rgb(14, 98, 189);
color: rgb(241, 236, 226); border-color: initial;
}
button[type="submit"]:hover {
background-color: rgb(0, 69, 143);
background-color: rgb(10, 69, 133);
}
.category.selected {
color: rgb(232, 230, 227);
color: rgb(241, 236, 226);
}
footer {
background-color: rgb(38, 42, 43);
color: rgb(232, 230, 227);
background-color: rgb(40, 43, 42);
color: rgb(241, 236, 226);
}
#createPostButton {
background-color: rgb(0, 93, 174);
color: rgb(232, 230, 227);
background-color: rgb(13, 93, 162);
color: rgb(241, 236, 226);
border-color: initial;
}
#createPostButton:hover {
background-color: rgb(0, 69, 143);
background-color: rgb(10, 69, 133);
}
#popupInstruction {
background-color: rgb(32, 35, 37);
border-color: rgb(62, 68, 70);
background-color: rgb(34, 36, 36);
border-color: rgb(65, 69, 69);
}
#writeCommentBtn {
background-color: rgb(0, 98, 204);
color: rgb(232, 230, 227);
background-color: rgb(14, 98, 189);
color: rgb(241, 236, 226);
border-color: initial;
}
#writeCommentBtn:hover {
background-color: rgb(0, 69, 143);
background-color: rgb(10, 69, 133);
}
#ShareBtn {
background-color: rgb(0, 98, 204);
color: rgb(232, 230, 227);
background-color: rgb(14, 98, 189);
color: rgb(241, 236, 226);
border-color: initial;
}
#ShareBtn:hover {
background-color: rgb(0, 69, 143);
background-color: rgb(10, 69, 133);
}

/* Override Style */
.vimvixen-hint {
background-color: #7b5300 !important;
border-color: #d8b013 !important;
color: #f3e8c8 !important;
background-color: #795500 !important;
border-color: #d9b323 !important;
color: #fbedca !important;
}
#vimvixen-console-frame {
color-scheme: light !important
Expand All @@ -526,7 +526,7 @@ footer {
color: var(--darkreader-neutral-text) !important;
}
gr-main-header {
background-color: #0f3a48 !important;
background-color: #153a45 !important;
}
.tou-z65h9k,
.tou-mignzq,
Expand All @@ -535,7 +535,7 @@ gr-main-header {
background-color: var(--darkreader-neutral-background) !important;
}
.tou-75mvi {
background-color: #032029 !important;
background-color: #072027 !important;
}
.tou-ta9e87,
.tou-1w3fhi0,
Expand All @@ -547,10 +547,10 @@ gr-main-header {
background-color: #0a0a0a !important;
}
.tou-uknfeu {
background-color: #231603 !important;
background-color: #221605 !important;
}
.tou-6i3zyv {
background-color: #19576c !important;
background-color: #225767 !important;
}
div.mermaid-viewer-control-panel .btn {
fill: var(--darkreader-neutral-text);
Expand Down Expand Up @@ -603,4 +603,4 @@ iframe#unpaywall[src$="unpaywall.html"] {
.ms-Icon {
font-family: 'FabricMDL2Icons' !important;
}
embed[type="application/pdf"][src="about:blank"] { filter: invert(100%) contrast(90%); }
embed[type="application/pdf"][src="about:blank"] { filter: invert(100%) contrast(90%); }

0 comments on commit a47fce8

Please sign in to comment.