commit 82b8e8f2350977ba3e23513ed5522764cc819a98
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Mon, 15 Jul 2024 08:36:39 +0200
feat: initial colour scheme
Diffstat:
| A | css/darkmode.css | | | 209 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
1 file changed, 209 insertions(+), 0 deletions(-)
diff --git a/css/darkmode.css b/css/darkmode.css
@@ -0,0 +1,209 @@
+@media (prefers-color-scheme: dark) {
+ :root
+ {
+ --bg1: #212121;
+ --bg2: #2b2b2b;
+ --fg1: #dcdcdc;
+ --hl1: #7277cf;
+ --hl2: #3f426c;
+ --invalid: #848484;
+ --danger: #ff0000;
+ }
+
+ /* Whole Content */
+ body,
+ table,
+ tbody,
+ tr,
+ td
+ {
+ background-color: var(--bg1) !important;
+ color: var(--fg1) !important;
+ }
+
+ /* Text */
+ p,
+ label,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ {
+ color: var(--fg1) !important;
+ }
+
+ /* Links */
+ a:not(.item)
+ {
+ color: var(--hl1) !important;
+ }
+ a:not(.item):hover
+ {
+ color: var(--hl1) !important;
+ text-decoration: underline;
+ }
+
+
+ /* Navigation Bar */
+ nav,
+ nav > .item,
+ nav .menu,
+ nav .container .item .menu,
+ nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item
+ {
+ background: var(--bg2) !important;
+ color: var(--fg1) !important;
+ }
+ nav .item:hover,
+ nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover,
+ nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active,
+ nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover > p > a,
+ nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active > p > a
+ {
+ background: var(--hl1) !important;
+ color: var(--fg1) !!important;
+ }
+
+ /* Footer */
+ nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item:hover p a,
+ nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p:hover a,
+ nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p a:hover
+ {
+ color: var(--fg1) !important;
+ }
+
+ /* Menu Entries */
+ .ui.stackable.secondary.menu .item,
+ .ui.stackable.secondary.menu .item a
+ {
+ color: var(--fg1) !important;
+ text-decoration: none !important;
+ }
+ .ui.stackable.secondary.menu .item:hover,
+ .ui.stackable.secondary.menu .item a:hover
+ {
+ color: var(--hl1) !important;
+ text-decoration: none !important;
+ }
+
+
+ /* Editor Form */
+ trix-editor,
+ textarea,
+ .trix-dialog,
+ input,
+ table,
+ .ui.selection.dropdown
+ {
+ background-color: var(--bg2) !important;
+ color: var(--fg1) !important;
+ box-shadow: 0 0 0.1em var(--hl1) !important;
+ }
+
+ /* Editor Buttons */
+ .ui.compact.mini.icon.menu,
+ .ui.compact.mini.icon.menu .item,
+ .ui.buttons .ui.button
+ {
+ color: var(--fg1) !important;
+ background-color: var(--hl1) !important;
+ }
+ .ui.compact.mini.icon.menu .trix-active,
+ .ui.buttons .ui.button:active,
+ .buttons .ui.button:hover
+ {
+ background-color: var(--hl2) !important;
+ }
+
+ /* Posts */
+ section.ui.feed,
+ section.ui.feed .content,
+ section.ui.feed .content .label,
+ section.ui.feed .content .summary,
+ section.ui.feed .content .extra.text,
+ section.ui.feed .content .meta
+ {
+ color: var(--fg1) !important;
+ }
+
+ /* Post Actions */
+ .ui.button,
+ section.ui.feed .content .meta .ui.inline.form,
+ section.ui.feed .content .meta a,
+ .ui.mini.iconic,
+ .ui.mini.iconic.button .icon,
+ .ui.mini.iconic.button.iconic.dangerous
+ {
+ color: var(--fg1) !important;
+ }
+ section.ui.feed .content .meta a.blue,
+ .ui.mini.iconic.blue,
+ .ui.mini.iconic.button.blue,
+ .ui.mini.iconic.button.blue .icon
+ {
+ color: var(--hl1) !important
+ }
+ .ui.button:hover,
+ section.ui.feed .content .meta .ui.inline.form:hover,
+ section.ui.feed .content .meta a:hover,
+ .ui.mini.iconic:hover,
+ .ui.mini.iconic.button .icon:hover
+ .ui.feed > .event > .content .meta a:hover,
+ .ui.feed > .event > .content .meta a:hover > button > .icon,
+ .ui.feed > .event > .content .meta .ui.inline.form:hover > button,
+ .ui.feed > .event > .content .meta .ui.inline.form:hover > button > .icon,
+ .ui.button:active,
+ section.ui.feed .content .meta .ui.inline.form:active,
+ section.ui.feed .content .meta a:active,
+ .ui.mini.iconic:active,
+ .ui.mini.iconic.button .icon:active,
+ .ui.feed > .event > .content .meta a:active,
+ .ui.feed > .event > .content .meta a:active > button > .icon,
+ .ui.feed > .event > .content .meta .ui.inline.form:active > button,
+ .ui.feed > .event > .content .meta .ui.inline.form:active > button > .icon
+ {
+ color: var(--hl1) !important;
+ }
+ .ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous,
+ .ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous > .icon
+ {
+ color: var(--danger) !important;
+ }
+
+ /* Profile Button */
+ .ui.button {
+ color: var(--fg1) !important;
+ background-color: var(--hl1) !important;
+ }
+
+ /* Code Blocks */
+ code, pre
+ {
+ background-color: var(--bg2) !important
+ }
+
+ /* Paging Buttons */
+ .ui.pagination.menu,
+ .ui.pagination.menu a
+ {
+ color: var(--fg1) !important;
+ background-color: var(--bg1) !important;
+ }
+
+ /* Filter */
+ .ui.text.container #terms .terms .ui.very.basic.table tbody .term td .ui.filter.term .wildcard
+ {
+ background-color: var(--bg1) !important;
+ color: var(--fg1) !important;
+ }
+
+ /* There is nothing there yet notification */
+ .ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header,
+ .ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header .icon
+ {
+ color: var(--fg1) !important;
+
+ }
+}
