diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index f445e44e6a..8011556dbd 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -14,224 +14,236 @@
 }
 
 /* RESET START */
-    :link,
-    :visited {
-        text-decoration: none;
-        color: currentColor;
-    }
-    a:hover {
-        text-decoration: underline;
-    }
+:link,
+:visited {
+    text-decoration: none;
+    color: currentColor;
+}
+a:hover {
+    text-decoration: underline;
+}
 
-    hr {
-        all: unset;
-        display: block;
-        height: 1px;
-    }
+hr {
+    all: unset;
+    display: block;
+    height: 1px;
+}
 
-    ol,
-    ul {
-        list-style: none;
-    }
+ol,
+ul {
+    list-style: none;
+}
 
-    blockquote,
-    body,
-    fieldset,
-    form,
-    html,
-    input,
-    pre,
-    textarea {
-        margin: 0;
-        padding: 0;
-        border: none;
-    }
-    :link img,
-    :visited img,
-    a img {
-        border: none;
-    }
+blockquote,
+body,
+fieldset,
+form,
+html,
+input,
+pre,
+textarea {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+:link img,
+:visited img,
+a img {
+    border: none;
+}
 
-    address {
-        font-style: normal;
-    }
+address {
+    font-style: normal;
+}
 
-    :focus {
-        outline: none;
-    }
+:focus {
+    outline: none;
+}
 
-    ::-moz-focus-inner {
-        border: 0;
-    }
+::-moz-focus-inner {
+    border: 0;
+}
 
-    details summary > * {
-        margin: unset;
-        padding: unset;
-    }
+details summary > * {
+    margin: unset;
+    padding: unset;
+}
 
-    details > summary {
-        list-style: none;
-    }
+details > summary {
+    list-style: none;
+}
 
-    details > summary::-webkit-details-marker {
-        display: none;
-    }
+details > summary::-webkit-details-marker {
+    display: none;
+}
 
-    /* Internet Explorer <details> graceful degradation */
-    @supports not (-ms-ime-align: auto) {
-        details summary {
-            cursor: pointer;
-        }
+/* Internet Explorer <details> graceful degradation */
+@supports not (-ms-ime-align: auto) {
+    details summary {
+        cursor: pointer;
     }
+}
 
-    [hidden] {
-        display: none;
-    }
+[hidden] {
+    display: none;
+}
 
-    * {
-        -webkit-box-sizing: border-box !important;
-        -moz-box-sizing: border-box !important;
-        box-sizing: border-box !important;
-    }
+* {
+    -webkit-box-sizing: border-box !important;
+    -moz-box-sizing: border-box !important;
+    box-sizing: border-box !important;
+}
 
-    body,
-    html {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        background-attachment: fixed;
-        font-family: 'Open Sans', sans-serif;
-        font-size: var(--default);
-    }
+body,
+html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-attachment: fixed;
+    font-family: 'Open Sans', sans-serif;
+    font-size: var(--default);
+}
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        all: unset;
-        display: block;
-        font-family: 'Poppins', sans-serif;
-    }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    all: unset;
+    display: block;
+    font-family: 'Poppins', sans-serif;
+}
 
-    h1 {
-        font-size: var(--medium);
-        font-weight: 700;
-        margin-bottom: 16.2px;
-    }
+h1 {
+    font-size: var(--medium);
+    font-weight: 700;
+    margin-bottom: 16.2px;
+}
 
-    h2 {
-        font-size: var(--small);
-        font-weight: 600;
-        margin-bottom: 13px;
-    }
+h2 {
+    font-size: var(--small);
+    font-weight: 600;
+    margin-bottom: 13px;
+}
 
-    h3 {
-        font-size: var(--default);
-        font-weight: 600;
-        margin-bottom: 10px;
-    }
+h3 {
+    font-size: var(--default);
+    font-weight: 600;
+    margin-bottom: 10px;
+}
 
-    h4,
-    h5 {
-        font-size: var(--default);
-        font-weight: 400;
-        margin-bottom: 6.1px;
-    }
+h4,
+h5 {
+    font-size: var(--default);
+    font-weight: 400;
+    margin-bottom: 6.1px;
+}
 
-    p {
-        font-family: 'Open Sans', sans-serif;
-        font-size: var(--default);
-        font-weight: 400;
-        margin: unset;
-    }
-    p:first-line {
-        padding-left: var(--default);
-    }
-    p:first-line {
-        margin-top: 0;
-        margin-bottom: 10px;
-    }
-    p:not(:first-line) {
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
+p {
+    font-family: 'Open Sans', sans-serif;
+    font-size: var(--default);
+    font-weight: 400;
+    margin: unset;
+}
+p:first-line {
+    padding-left: var(--default);
+}
+p:first-line {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+p:not(:first-line) {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
 
-    label {
-        max-width: 100%;
-    }
+label {
+    max-width: 100%;
+}
 
-    input[type=password],
-    input[type=text],
-    textarea {
-        font-family: 'Open Sans', sans-serif;
-        font-weight: 400;
-        padding: 4px 6px;
-    }
+input[type=password],
+input[type=text],
+textarea {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    padding: 4px 6px;
+}
 
-    ul {
-        text-decoration: none;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
+ul {
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
 
-    li {
-        margin: 0;
-        padding: 0;
-    }
+li {
+    margin: 0;
+    padding: 0;
+}
+
+/* Focus and hover (inset shadow is used in alternative to a border to prevent further redraws) */
+*:focus {
+-webkit-box-shadow: var(--shadow-inset-accent);
+-moz-box-shadow: var(--shadow-inset-accent);
+box-shadow: var(--shadow-inset-accent);
+}
+
+hr {
+    background-color: var(--border) !important;
+}
 /* RESET END */
 
 /* DARK AND LIGHT COLOUR SCHEMES START */
     @media (prefers-color-scheme: dark) {
         /* Colour vars */
         :root {
-            --foreground: #E6E6F7;
-            --background-hard: #212130;
-            --background-soft: #46465E;
-            --background-checkerboard: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
-            --accent: #7070BA;
-            --translucent: hsla(240, 19%, 16%, 40%);
-            --shadow: 0 0 16px 0 #00000016;
-            --shadow-light: 0 0 16px 0 #FFFFFF16;
+            --foreground: #F0F6F6;
+            --background-hard: #141216;
+            --background-card: #131217;
+            --border: #201F25;
+            --accent: #E88282;
+            --shadow: 0 0 12px 0 #01010166;
             --shadow-inset-accent: inset 0 0 0 2px var(--accent);
-            --gradient: linear-gradient(to left,  var(--background-hard) 0%, var(--translucent) 100%) !important;
+            --background-checkerboard: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
+            --gradient: linear-gradient(10deg,  var(--border) 0%, transparent 100%) !important;
+            --gradient-backwards: linear-gradient(290deg,  var(--border) 0%, var(--background-card) 100%) !important;
         }
 
         /* The page background image itself */
         .background-image {
-            background-color: var(--background-soft);
-            background-image: url("../images/background_dark.png");
+            background-color: var(--background-hard);
         }
         /* Select element custom dropdown arrow */
         select {
-            background-image: url("../images/select_drop_dark.png") !important;
+            background: var(--gradient), url("../images/select_drop_dark.png") no-repeat center right 5px !important;
+            background-size: cover, 16px !important;
         }
     }
 
     @media (prefers-color-scheme: light) {
         /* Colour vars */
         :root {
-            --foreground: #242434;
-            --background-hard: #eceff4;
-            --background-soft: #4c566a66;
-            --accent: #4c566a;
-            --translucent: rgba(255, 255, 255, 0);
-            --shadow: 0 0 16px 0 #FFFFFF16;
-            --shadow-light: 0 0 16px 0 #00000016;
-            --shadow-inset-accent: inset 0 0 0 2px #4c566a;
-            --gradient: linear-gradient(to right, #FFFFFFAA, transparent) !important;
-            --tneidarg: linear-gradient(to left, #FFFFFFAA, transparent) !important;
+            --foreground: #09090D;
+            --background-hard: #EBEBEB;
+            --background-card: #F0F0F0;
+            --border: #D5D5D5;
+            --accent: #A22430;
+            --shadow: 0 0 12px 0 #24243416;
+            --shadow-inset-accent: inset 0 0 0 2px var(--accent);
+            --background-checkerboard: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
+            --gradient: linear-gradient(290deg,  var(--border) 0%, transparent 60%) !important;
+            --gradient-backwards: linear-gradient(290deg,  var(--border) 0%, var(--background-card) 100%) !important;
         }
 
         /* The page background image itself */
         .background-image {
-            background-image: url("../images/background_light.png");
+            background-color: var(--background-hard);
         }
-
         /* Select element custom dropdown arrow */
         select {
-            background-image: url("../images/select_drop_light.png") !important;
+            background: var(--gradient), url("../images/select_drop_light.png") no-repeat center right 5px !important;
+            background-size: cover, 16px !important;
+            background-blend-mode: saturation;
         }
     }
 /* DARK AND LIGHT COLOUR SCHEMES END */
@@ -275,6 +287,8 @@
     height: min-content;
     padding: var(--smaller);
     border-radius: var(--smaller);
+    background-color: var(--background-hard) !important;
+    border: 2px solid var(--border);
 }
 
 .accessibility-menu ul {
@@ -298,6 +312,8 @@
     width: 100%;
     align-items: center;
     padding: var(--smaller);
+    background: var(--gradient) !important;
+    box-shadow: var(--shadow);
 }
 /* Allow scrolling all the way to the top ("page-header" has a height of 3rem) */
 html {
@@ -476,22 +492,7 @@ html {
         -o-background-size: 100% 100%;
         background-size: 100% 100%;
         z-index: auto;
-    }
-
-    @media (prefers-color-scheme: dark) {
-        #panel-left-toggle:checked + .header-panel,
-        #panel-right-toggle:checked + .header-panel,
-        a[id|="anchor"]:target ~ .panel-content {
-            background-image: url("../images/background_dark.png");
-        }
-    }
-
-    @media (prefers-color-scheme: light) {
-        #panel-left-toggle:checked + .header-panel,
-        #panel-right-toggle:checked + .header-panel,
-        a[id|="anchor"]:target ~ .panel-content {
-            background-image: url("../images/background_light.png");
-        }
+        background-color: var(--background-hard) !important;
     }
 }
 
diff --git a/public/assets/default_theme/css/colors.css b/public/assets/default_theme/css/colors.css
index d4d257b4a2..cdc61f1edb 100644
--- a/public/assets/default_theme/css/colors.css
+++ b/public/assets/default_theme/css/colors.css
@@ -1,58 +1,10 @@
 
 
-/* Focus and hover (inset shadow is used in alternative to a border to prevent further redraws) */
-button:focus,
-button:hover,
-input:focus,
-input:hover,
-select:focus,
-select:hover,
-textarea:focus,
-textarea:hover {
-    -webkit-box-shadow: var(--shadow-inset-accent) !important;
-    -moz-box-shadow: var(--shadow-inset-accent) !important;
-    box-shadow: var(--shadow-inset-accent) !important;
-}
-
-*:focus {
-    -webkit-box-shadow: var(--shadow-inset-accent);
-    -moz-box-shadow: var(--shadow-inset-accent);
-    box-shadow: var(--shadow-inset-accent);
-}
-
-.page-header,
-.accessibility-menu,
-.header-extra-forms-open,
-.set-background-color-hard,
-input[type=checkbox]:checked~.panel-content,
-input[type=radio] {
-    background-color: var(--background-hard) !important;
-}
-
-.button-container,
-.note-actions-set,
-.set-background-color-soft,
-hr,
-input[type=checkbox] {
-    background-color: var(--background-soft) !important;
-}
-
 #replyform,
 .doc-navigation,
 .h-entry,
-.markdown-blocks,
-.profile,
-.section-title-details,
-.note-attachments-unit,
-.section-settings,
-.section-settings ul,
-.section-widget,
-.set-background-color-alpha,
-button,
-input,
-select,
-textarea {
-    background-color: var(--translucent) !important;
+.markdown-blocks {
+    background-color: var(--background-card) !important;
 }
 
 .set-background-color-gradient,
@@ -61,8 +13,12 @@ input[type=file] {
     background: var(--gradient) !important;
 }
 
+.note-info {
+    background: var(--tneidarg) !important;
+}
+
 .section-settings hr {
-    background: var(--background-soft) !important;
+    background: var(--border) !important;
 }
 
 .button-container:focus,
@@ -104,11 +60,6 @@ select {
     fill: var(--foreground);
 }
 
-.accessibility-menu,
-.set-border-accent {
-    border: 2px solid var(--accent);
-}
-
 .doc-navigation,
 .h-entry:not(.embed),
 .markdown-blocks,
@@ -120,7 +71,7 @@ button,
 input,
 select,
 textarea {
-    border: 2px solid var(--background-soft) !important;
+    border: 2px solid var(--border) !important;
 }
 
 #header,
@@ -137,9 +88,3 @@ textarea {
     box-shadow: var(--shadow);
 }
 
-.set-shadow-light {
-    -webkit-box-shadow: var(--shadow-light);
-    -moz-box-shadow: var(--shadow-light);
-    box-shadow: var(--shadow-light);
-}
-
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index da8d32b0a8..2d78b2eb64 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -152,6 +152,10 @@ embed header {
     padding: 6px 10px 6px 0
 }
 
+.note-info {
+    background: var(--gradient-backwards) !important;
+}
+
 .note-author {
     font-size: var(--default);
     display: -webkit-box;
@@ -188,6 +192,10 @@ embed header {
     vertical-align: middle
 }
 
+.note-actions-set {
+    opacity: 1 !important;
+}
+
 .note-actions .form-group {
     all: unset
 }
@@ -204,11 +212,14 @@ embed header {
     margin-left: var(--smaller);
     width: var(--default);
     height: var(--default);
+    background-color: var(--foreground);
+    opacity: 0.33;
 }
 
 .button-container:hover,
 .button-container:focus {
-    border: none
+    border: none;
+    opacity: 1;
 }
 
 .favourite-button-container {
@@ -286,6 +297,7 @@ embed header {
     -webkit-align-self: flex-start;
     -ms-flex-item-align: start;
     align-self: flex-start
+    background-color: var(--background-card) !important;
 }
 
 .note-attachments-unit:not(:only-child) {
diff --git a/public/assets/default_theme/css/pages/settings.css b/public/assets/default_theme/css/pages/settings.css
index 3707a98d68..ab57df7208 100644
--- a/public/assets/default_theme/css/pages/settings.css
+++ b/public/assets/default_theme/css/pages/settings.css
@@ -10,6 +10,11 @@
     margin-bottom: 0.6rem;
 }
 
+.section-settings,
+.section-settings ul {
+    background-color: var(--background-card) !important;
+}
+
 .section-settings ul {
     border-radius: 0.6rem;
     padding: 0.6rem;
diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css
index fc361ac38c..42b5342ca5 100644
--- a/public/assets/default_theme/css/widgets/buttons.css
+++ b/public/assets/default_theme/css/widgets/buttons.css
@@ -83,17 +83,13 @@ textarea {
     -webkit-border-radius: 0.6rem;
     -moz-border-radius: 0.6rem;
     border-radius: 0.6rem;
+    background: var(--gradient) !important;
 }
 select {
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
     cursor: pointer;
     background-repeat: no-repeat;
-    -webkit-background-size: 16px 16px;
-    -moz-background-size: 16px;
-    -o-background-size: 16px;
-    background-size: 16px;
-    background-position: center right 5px;
     -webkit-border-radius: 0.6rem;
     -moz-border-radius: 0.6rem;
     border-radius: 0.6rem;
@@ -152,4 +148,25 @@ input[type=file] {
 input[type=checkbox],
 input[type=radio] {
     border: unset !important;
-}
\ No newline at end of file
+}
+
+input[type=radio] {
+    background-color: var(--background-hard) !important;
+}
+
+input[type=checkbox] {
+    background-color: var(--border) !important;
+}
+
+button:focus,
+button:hover,
+input:focus,
+input:hover,
+select:focus,
+select:hover,
+textarea:focus,
+textarea:hover {
+    -webkit-box-shadow: var(--shadow-inset-accent) !important;
+    -moz-box-shadow: var(--shadow-inset-accent) !important;
+    box-shadow: var(--shadow-inset-accent) !important;
+}
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index e8b29e4a4e..760975b190 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -6,7 +6,8 @@
     font-family: 'Open Sans', sans-serif;
     margin-bottom: 0.6rem;
     border-radius: 0.6rem;
-    padding: 0.6rem
+    padding: 0.6rem;
+    background: var(--gradient) !important;
 }
 .profile *[class*="profile-info-"] {
     flex: 1;
@@ -41,7 +42,9 @@
     display: flex;
     flex-direction: column;
     border-radius: 0.6rem;
-    margin-bottom: 1.3rem
+    margin-bottom: 1.3rem;
+    background-color: var(--background-card) !important;
+    box-shadow: var(--shadow);
 }
 .section-widget hr {
     margin-bottom: 0.6rem
@@ -68,7 +71,8 @@
     font-size: 1.3rem;
     font-weight: 700;
     border-radius: 0.6rem;
-    padding: 6px 10px 6px 10px
+    padding: 6px 10px 6px 10px;
+    background: var(--gradient) !important;
 }
 .section-title-details[open] svg {
     transform: rotate(180deg);
diff --git a/public/assets/default_theme/images/background_dark.png b/public/assets/default_theme/images/background_dark.png
deleted file mode 100644
index 095b0a015b..0000000000
Binary files a/public/assets/default_theme/images/background_dark.png and /dev/null differ
diff --git a/public/assets/default_theme/images/background_light.png b/public/assets/default_theme/images/background_light.png
deleted file mode 100644
index e3767339d6..0000000000
Binary files a/public/assets/default_theme/images/background_light.png and /dev/null differ