Work on onagre theme

Amolith created 2 years ago

Change summary

dot_config/onagre/theme.scss.tmpl | 36 ++++++++++++++++++++++++++------
1 file changed, 29 insertions(+), 7 deletions(-)

Detailed changes

dot_config/onagre/theme.scss.tmpl

@@ -1,6 +1,13 @@
 .onagre {
-    background: #eff1f5;
+{{- if eq .theme_variant "dark" }}
+    color: #cad3f5;
+    border-color: #24273a;
+    background: #24273a;
+{{- else if eq .theme_variant "light" }}
     color: #4c4f69;
+    border-color: #eff1f5;
+    background: #eff1f5;
+{{- end }}
     --icon-theme: "Papirus-Light";
     --font-family: "{{ .font }}";
 {{- if eq .chezmoi.hostname "angmar" }}
@@ -9,7 +16,6 @@
     --icon-size: 24;
 {{- end }}
     border-radius: 8%;
-    border-color: #eff1f5;
     border-width: 4px;
     padding: 5px;
 {{- if eq .chezmoi.hostname "angmar" }}
@@ -57,8 +63,12 @@
             }
 
             .row-selected {
-                border-radius: 8%;
+{{- if eq .theme_variant "dark" }}
+                background: #1e2030;
+{{- else if eq .theme_variant "light" }}
                 background: #dbdce1;
+{{- end }}
+                border-radius: 8%;
 
                 .icon {
                     padding-top: 4px;
@@ -92,9 +102,13 @@
         }
 
         .search {
-            border-radius: 5%;
+{{- if eq .theme_variant "dark" }}
+            background: red;
+{{- else if eq .theme_variant "light" }}
             background: #dbdce1;
-            --height: 50px;
+{{- end }}
+            border-radius: 5%;
+            --height: fill-portion 1;
             padding: 4px;
             .input {
                 font-size: 20px;
@@ -102,11 +116,19 @@
         }
 
         .scrollable {
+{{- if eq .theme_variant "dark" }}
+            background: green;
+{{- else if eq .theme_variant "light" }}
+            background: ;#c0c0c0
+{{- end }}
             border-radius: 5%;
-            background: #c0c0c0;
             .scroller {
+{{- if eq .theme_variant "dark" }}
+            color: blue;
+{{- else if eq .theme_variant "light" }}
+            color: #a1a1a1;
+{{- end }}
                 border-radius: 5%;
-                color: #a1a1a1;
             }
         }
     }