feat(theme): contrast changes for light and dark themes (Joxit#361)

fuzmik · Mar 12, 2024 · cfbc6e7 · cfbc6e7
1 parent dc9bdcb
commit cfbc6e7
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -128,16 +128,17 @@ This featureswas added to version 2.4.0. See more about this in [#283](https://g
 
 | Environment variable | light theme value | dark theme value |
 | --- | --- | --- |
-| `THEME_PRIMARY_TEXT` | `#25313b` | `#8A9EBA` |
-| `THEME_NEUTRAL_TEXT` | `#777777` | `#36527A` |
+| `THEME_PRIMARY_TEXT` | `#25313b` | `#98a8bd` |
+| `THEME_NEUTRAL_TEXT` | `#777777` | `#6d7fab` |
 | `THEME_BACKGROUND` | `#ffffff` | `#22272e` |
-| `THEME_HOVER_BACKGROUND` | `#eeeeee` | `#30404D` |
-| `THEME_ACCENT_TEXT` | `#6680a1` | `#5684FF` |
+| `THEME_HOVER_BACKGROUND` | `#eeeeee` | `#343a4b` |
+| `THEME_ACCENT_TEXT` | `#5f7796` | `#5c88ff` |
 | `THEME_HEADER_TEXT` | `#ffffff` | `#ffffff` |
-| `THEME_HEADER_BACKGROUND` | `#25313b` | `#333A45` |
+| `THEME_HEADER_ACCENT_TEXT` | `#7b9ac2` | `#7ea1ff` |
+| `THEME_HEADER_BACKGROUND` | `#25313b` | `#333a45` |
 | `THEME_FOOTER_TEXT` | `#ffffff` | `#ffffff` |
-| `THEME_FOOTER_NEUTRAL_TEXT` | `#999999` | `#999999` |
-| `THEME_FOOTER_BACKGROUND` | `#555555` | `#555555` |
+| `THEME_FOOTER_NEUTRAL_TEXT` | `#adbacd` | `#98afcf` |
+| `THEME_FOOTER_BACKGROUND` | `#344251` | `#344251` |
 
 ## Recommended Docker Registry Usage
 

diff --git a/src/components/search-bar.riot b/src/components/search-bar.riot
@@ -2,8 +2,8 @@
   <material-input
     label="Search in page"
     text-color="var(--header-text)"
-    label-color="var(--neutral-text)"
-    color="var(--accent-text)"
+    label-color="var(--header-accent-text)"
+    color="var(--header-accent-text)"
   ></material-input>
   <script>
     import { router } from '@riotjs/route';

diff --git a/src/components/tag-history/tag-history.riot b/src/components/tag-history/tag-history.riot
@@ -287,5 +287,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       flex-direction: row;
       align-items: center;
     }
+    h2 .material-icons {
+      margin-left: .25em;
+    }
   </style>
 </tag-history>
diff --git a/src/index.html b/src/index.html
@@ -58,10 +58,11 @@
       theme-background="${THEME_BACKGROUND}"
       theme-hover-background="${THEME_HOVER_BACKGROUND}"
       theme-accent-text="${THEME_ACCENT_TEXT}"
+      theme-header-accent-text="${THEME_HEADER_ACCENT_TEXT}"
       theme-header-text="${THEME_HEADER_TEXT}"
       theme-header-background="${THEME_HEADER_BACKGROUND}"
       theme-footer-text="${THEME_FOOTER_TEXT}"
-      theme-footer-neutra-text="${THEME_FOOTER_NEUTRAL_TEXT}"
+      theme-footer-neutral-text="${THEME_FOOTER_NEUTRAL_TEXT}"
       theme-footer-background="${THEME_FOOTER_BACKGROUND}"
       tags-per-page="${TAGLIST_PAGE_SIZE}"
     >
@@ -70,7 +71,7 @@
     <!-- build:keep developement -->
     <docker-registry-ui
       registry-url=""
-      name="Developement Registry"
+      name="Development Registry"
       pull-url=""
       show-content-digest="true"
       is-image-remove-activated="true"
@@ -90,10 +91,11 @@
       theme-background=""
       theme-hover-background=""
       theme-accent-text=""
+      theme-header-accent-text=""
       theme-header-text=""
       theme-header-background=""
       theme-footer-text=""
-      theme-footer-neutra-text=""
+      theme-footer-neutral-text=""
       theme-footer-background=""
       tags-per-page=""
     >

diff --git a/src/scripts/theme.js b/src/scripts/theme.js
@@ -1,26 +1,28 @@
 const LIGHT_THEME = {
   'primary-text': '#25313b',
-  'neutral-text': '#777',
-  'background': '#fff',
-  'hover-background': '#eee',
-  'accent-text': '#6680a1',
-  'header-text': '#fff',
+  'neutral-text': '#777777',
+  'background': '#ffffff',
+  'hover-background': '#eeeeee',
+  'accent-text': '#5f7796',
+  'header-text': '#ffffff',
+  'header-accent-text': '#7b9ac2',
   'header-background': '#25313b',
-  'footer-text': '#fff',
-  'footer-neutral-text': '#999',
-  'footer-background': '#555',
+  'footer-text': '#ffffff',
+  'footer-neutral-text': '#adbacd',
+  'footer-background': '#344251',
 };
 const DARK_THEME = {
-  'primary-text': '#8A9EBA',
-  'neutral-text': '#36527A',
+  'primary-text': '#98a8bd',
+  'neutral-text': '#6d7fab',
   'background': '#22272e',
-  'hover-background': '#30404D',
-  'accent-text': '#5684FF',
-  'header-text': '#fff',
-  'header-background': '#333A45',
-  'footer-text': '#fff',
-  'footer-neutral-text': '#999',
-  'footer-background': '#555',
+  'hover-background': '#343a4b',
+  'accent-text': '#5c88ff',
+  'header-text': '#ffffff',
+  'header-accent-text': '#7ea1ff',
+  'header-background': '#333a45',
+  'footer-text': '#ffffff',
+  'footer-neutral-text': '#98afcf',
+  'footer-background': '#344251',
 };
 
 const LOCAL_STORAGE_THEME = 'registryUiTheme';