Add light theme and some more CSS variables

core/models/config.py

@@ -247,6 +247,7 @@ class Config(models.Model):
         toot_mode: bool = False
         default_post_visibility: int = 0  # Post.Visibilities.public
         visible_follows: bool = True
+        light_theme: bool = False
 
         # wellness Options
         visible_reaction_counts: bool = True

static/css/style.css

@@ -88,16 +88,20 @@ td a {
     --color-bg-error: rgb(87, 32, 32);
     --color-highlight: #449c8c;
     --color-delete: #8b2821;
+    --color-header-menu: rgba(0, 0, 0, 0.5);
+    --color-main-shadow: rgba(0, 0, 0, 0.6);
+    --size-main-shadow: 50px;
 
     --color-text-duller: #5f6983;
     --color-text-dull: #99a;
     --color-text-main: #fff;
-    --color-text-link: rgb(176, 194, 206);
+    --color-text-link: var(--color-highlight);
+    --color-text-in-highlight: #fff;
 
+    --color-input-background: #26323c;
     --color-input-border: #000;
     --color-input-border-active: #444b5d;
-    --color-button-main: #444b5d;
-    --color-button-main-hover: #515d7c;
+    --color-button-secondary: #2e3e4c;
     --color-button-disabled: #7c9c97;
 
     --sm-header-height: 50px;
@@ -109,6 +113,29 @@ td a {
     --emoji-height: 1.1em;
 }
 
+body.light-theme {
+    --color-bg-main: #dfe3e7;
+    --color-bg-menu: #cfd6dd;
+    --color-bg-box: #f2f5f8;
+    --color-bg-error: rgb(219, 144, 144);
+    --color-highlight: #449c8c;
+    --color-delete: #884743;
+    --color-header-menu: rgba(0, 0, 0, 0.1);
+    --color-main-shadow: rgba(0, 0, 0, 0.1);
+    --size-main-shadow: 20px;
+
+    --color-text-duller: #3a3b3d;
+    --color-text-dull: rgb(44, 44, 48);
+    --color-text-main: rgb(0, 0, 0);
+    --color-text-link: var(--color-highlight);
+
+    --color-input-background: #fff;
+    --color-input-border: rgb(109, 109, 109);
+    --color-input-border-active: #464646;
+    --color-button-secondary: #5c6770;
+    --color-button-disabled: #a1a1a1;
+}
+
 body {
     background-color: var(--color-bg-main);
     color: var(--color-text-main);
@@ -120,7 +147,7 @@ body {
 main {
     width: 1100px;
     margin: 20px auto;
-    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 var(--size-main-shadow) var(--color-main-shadow);
     border-radius: 5px;
 }
 
@@ -162,7 +189,7 @@ header .logo {
     padding: 10px 11px 9px 10px;
     height: 50px;
     font-size: 130%;
-    color: var(--color-text-main);
+    color: var(--color-text-in-highlight);
     border-bottom: 3px solid rgba(0, 0, 0, 0);
     z-index: 10;
     overflow: hidden;
@@ -197,7 +224,7 @@ header menu {
 
 header menu a {
     padding: 10px 20px 4px 20px;
-    color: #eee;
+    color: var(--color-text-main);
     line-height: 30px;
     border-bottom: 3px solid rgba(0, 0, 0, 0);
 }
@@ -376,6 +403,7 @@ nav a i {
 
 .right-column h2 {
     background: var(--color-highlight);
+    color: var(--color-text-in-highlight);
     padding: 8px 10px;
     font-weight: bold;
     font-size: 90%;
@@ -772,7 +800,7 @@ div.follow-profile .actions a:hover {
 }
 
 div.follow-profile .actions a.active {
-    color: var(--color-highlight);
+    color: var(--color-text-link);
 }
 
 form.inline-menu {
@@ -889,7 +917,7 @@ form select,
 form textarea {
     width: 100%;
     padding: 5px 7px;
-    background: var(--color-bg-main);
+    background: var(--color-input-background);
     border: 1px solid var(--color-input-border);
     border-radius: 3px;
     color: var(--color-text-main);
@@ -930,21 +958,6 @@ form textarea:focus {
     border: 1px solid var(--color-input-border-active);
 }
 
-form input[type=submit] {
-    width: 100%;
-    padding: 4px 6px;
-    margin: 0 0 10px;
-    background: var(--color-button-main);
-    border: 0;
-    border-radius: 3px;
-    color: var(--color-text-main);
-    cursor: pointer;
-}
-
-form input[type=submit]:hover {
-    background: var(--color-button-main-hover);
-}
-
 form img.preview {
     max-height: 100%;
     max-width: 100px;
@@ -1012,7 +1025,7 @@ button,
     cursor: pointer;
     font-weight: bold;
     background-color: var(--color-highlight);
-    color: var(--color-text-main);
+    color: var(--color-text-in-highlight);
     display: inline-block;
 }
 
@@ -1030,7 +1043,7 @@ button.destructive:hover,
 
 button.secondary,
 .button.secondary {
-    background: var(--color-bg-menu);
+    background: var(--color-button-secondary);
 }
 
 button.toggle,
@@ -1587,7 +1600,7 @@ form .post {
 }
 
 .post .actions a.active {
-    color: var(--color-highlight);
+    color: var(--color-text-link);
 }
 
 .post .handle .link:hover {
@@ -1597,7 +1610,7 @@ form .post {
 .post .content a {
     word-break: break-all;
     text-decoration: none;
-    color: var(--color-highlight);
+    color: var(--color-text-link);
 }
 
 .post .content a:hover {
@@ -1734,7 +1747,7 @@ form .post {
     }
 
     body:not(.no-sidebar) header menu a {
-        background: rgba(0, 0, 0, 0.5);
+        background: var(--color-header-menu);
     }
 
     main {

templates/base.html

@@ -16,6 +16,7 @@
         <style>
             body {
                 --color-highlight: {{ config.highlight_color }};
+                --color-text-link: {{ config.highlight_color }};
             }
             {% if not config_identity.visible_reaction_counts %}
                 .like-count {
@@ -32,7 +33,7 @@
         {% block extra_head %}{% endblock %}
         {% block custom_head %}{% if config.custom_head %}{{ config.custom_head|safe }}{% endif %}{% endblock %}
     </head>
-    <body class="{% block body_class %}{% endblock %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+    <body class="{% if config_identity.light_theme %}light-theme {% endif %}{% block body_class %}{% endblock %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
         <a id="skip-to-main" class="screenreader-text" href="#main-content">Skip to Content</a>
         <a id="skip-to-nav" class="screenreader-text" href="#side-navigation">Skip to Navigation</a>
         <main>

users/views/settings/interface.py

@@ -33,10 +33,14 @@ class InterfacePage(SettingsPage):
             "title": "Infinite Scroll",
             "help_text": "Automatically loads more posts when you get to the bottom of a timeline.",
         },
+        "light_theme": {
+            "title": "Light Mode",
+            "help_text": "Use a light theme rather than the default dark theme.",
+        },
     }
 
     layout = {
         "Posting": ["toot_mode", "default_post_visibility"],
         "Wellness": ["infinite_scroll", "visible_reaction_counts", "expand_linked_cws"],
-        "Appearance": ["custom_css"],
+        "Appearance": ["light_theme", "custom_css"],
     }