From 81160b1915b19cd663352a6b6034b65d6d79b094 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 11:15:57 +0200
Subject: [PATCH 01/14] Rewrite sass variables to support themes
---
src/sass/general.scss | 16 +++++++-----
src/sass/include/_mixins.css | 8 +++---
src/sass/include/_variables.scss | 41 +++++++++++++++++++++++++++++
src/sass/index.scss | 44 +++++++++++++++++++++++++++-----
src/sass/inputs.scss | 28 ++++++++++----------
src/sass/navbar.scss | 10 +++++---
src/sass/profile/card.scss | 12 ++++-----
src/sass/profile/photo-rail.scss | 4 +--
src/sass/search.scss | 6 ++---
src/sass/timeline.scss | 36 +++++++++++++-------------
src/sass/tweet/_base.scss | 14 +++++-----
src/sass/tweet/card.scss | 12 ++++-----
src/sass/tweet/media.scss | 8 +++---
src/sass/tweet/poll.scss | 8 +++---
src/sass/tweet/quote.scss | 12 ++++-----
src/sass/tweet/thread.scss | 8 +++---
16 files changed, 173 insertions(+), 94 deletions(-)
diff --git a/src/sass/general.scss b/src/sass/general.scss
index a92c6e3..5098b43 100644
--- a/src/sass/general.scss
+++ b/src/sass/general.scss
@@ -7,15 +7,19 @@
}
.error-panel {
- @include center-panel($error_red);
+ @include center-panel(var(--error_red));
+}
+
+.search-bar {
+ // background: var(--darkest_grey);
}
.search-bar > form {
- @include center-panel($darkest-grey);
+ @include center-panel(var(--darkest_grey));
button {
- background: #303030;
- color: $fg_color;
+ background: var(--bg_elements);
+ color: var(--fg_color);
border: 0;
border-radius: 3px;
cursor: pointer;
@@ -27,8 +31,8 @@
input {
font-size: 16px;
width: 100%;
- background: $bg_elements;
- color: $fg_color;
+ background: var(--bg_elements);
+ color: var(--fg_color);
border: 0;
border-radius: 4px;
padding: 4px;
diff --git a/src/sass/include/_mixins.css b/src/sass/include/_mixins.css
index 01e42b7..ab01f05 100644
--- a/src/sass/include/_mixins.css
+++ b/src/sass/include/_mixins.css
@@ -19,11 +19,11 @@
&:hover {
.overlay-circle {
- border-color: $accent;
+ border-color: var(--accent);
}
.overlay-triangle {
- border-color: transparent transparent transparent $accent;
+ border-color: transparent transparent transparent var(--accent);
}
}
}
@@ -51,11 +51,11 @@
@mixin input-colors {
&:hover {
- border-color: $accent;
+ border-color: var(--accent);
}
&:active {
- border-color: $accent_light;
+ border-color: var(--accent_light);
}
}
diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss
index a0f7f0c..d5c71f7 100644
--- a/src/sass/include/_variables.scss
+++ b/src/sass/include/_variables.scss
@@ -3,10 +3,12 @@ $bg_color: #0F0F0F;
$fg_color: #F8F8F2;
$fg_faded: #F8F8F2CF;
$fg_dark: #9d9da0;
+$fg_nav: #000000;
$bg_panel: #161616;
$bg_elements: #121212;
$bg_overlays: #1F1F1F;
+$bg_hover: #1A1A1A;
$grey: #888889;
$dark_grey: #404040;
@@ -24,6 +26,7 @@ $more_replies_dots: #AD433B;
$error_red: #420A05;
$verified_blue: #1DA1F2;
+$icon_text: #F8F8F2;
$shadow: rgba(0,0,0,.6);
$shadow_dark: rgba(0,0,0,.2);
@@ -34,3 +37,41 @@ $font_1: Helvetica;
$font_2: Arial;
$font_3: sans-serif;
$font_4: fontello;
+
+//theme
+$variables: (
+ --bg_color: var(--bg_color),
+ --fg_color: var(--fg_color),
+ --fg_faded: var(--fg_faded),
+ --fg_dark: var(--fg_dark),
+ --fg_nav: var(--fg_nav),
+
+ --bg_panel: var(--bg_panel),
+ --bg_elements: var(--bg_elements),
+ --bg_overlays: var(--bg_overlays),
+ --bg_hover: var(--bg_hover),
+
+ --grey: var(--grey),
+ --dark_grey: var(--dark_grey),
+ --darker_grey: var(--darker_grey),
+ --darkest_grey: var(--darkest_grey),
+ --border_grey: var(--border_grey),
+
+ --accent: var(--accent),
+ --accent_light: var(--accent_light),
+ --accent_dark: var(--accent_dark),
+ --accent_border: var(--accent_border),
+
+ --play_button_red: var(--play_button_red),
+ --more_replies_dots: var(--more_replies_dots),
+ --error_red: var(--error_red),
+
+ --verified_blue: var(--verified_blue),
+ --icon_text: var(--icon_text)
+);
+
+/*** theme helper ***/
+
+@function var($variable) {
+ @return map-get($variables, $variable);
+}
diff --git a/src/sass/index.scss b/src/sass/index.scss
index ad157d9..44501f4 100644
--- a/src/sass/index.scss
+++ b/src/sass/index.scss
@@ -9,8 +9,38 @@
@import 'search';
body {
- background-color: $bg_color;
- color: $fg_color;
+ // colors
+ --bg_color: #{$bg_color};
+ --fg_color: #{$fg_color};
+ --fg_faded: #{$fg_faded};
+ --fg_dark: #{$fg_dark};
+ --fg_nav: #{$fg_nav};
+
+ --bg_panel: #{$bg_panel};
+ --bg_elements: #{$bg_elements};
+ --bg_overlays: #{$bg_overlays};
+ --bg_hover: #{$bg_hover};
+
+ --grey: #{$grey};
+ --dark_grey: #{$dark_grey};
+ --darker_grey: #{$darker_grey};
+ --darkest_grey: #{$darkest_grey};
+ --border_grey: #{$border_grey};
+
+ --accent: #{$accent};
+ --accent_light: #{$accent_light};
+ --accent_dark: #{$accent_dark};
+ --accent_border: #{$accent_border};
+
+ --play_button_red: #{$play_button_red};
+ --more_replies_dots: #{$more_replies_dots};
+ --error_red: #{$error_red};
+
+ --verified_blue: #{$verified_blue};
+ --icon_text: #{$icon_text};
+
+ background-color: var(--bg_color);
+ color: var(--fg_color);
font-family: $font_0, $font_1, $font_2, $font_3;
font-size: 14px;
line-height: 1.3;
@@ -36,7 +66,7 @@ p {
}
a {
- color: $accent;
+ color: var(--accent);
&:hover {
text-decoration: underline;
@@ -54,7 +84,7 @@ legend {
padding: .6em 0 .3em 0;
border: 0;
font-size: 16px;
- border-bottom: 1px solid $border_grey;
+ border-bottom: 1px solid var(--border_grey);
margin-bottom: 8px;
}
@@ -80,7 +110,7 @@ ul {
width: 100%;
margin: 0 auto;
margin-top: 10px;
- background-color: $bg_overlays;
+ background-color: var(--bg_overlays);
padding: 10px 15px;
align-self: start;
@@ -91,8 +121,8 @@ ul {
}
.verified-icon {
- color: $fg_color;
- background-color: $verified_blue;
+ color: var(--icon_text);
+ background-color: var(--verified_blue);
border-radius: 50%;
flex-shrink: 0;
margin: 2px 0 3px 3px;
diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss
index 0cea64b..0cf372d 100644
--- a/src/sass/inputs.scss
+++ b/src/sass/inputs.scss
@@ -3,9 +3,9 @@
button {
@include input-colors;
- background-color: $bg_elements;
- color: $fg_color;
- border: 1px solid $accent_border;
+ background-color: var(--bg_elements);
+ color: var(--fg_color);
+ border: 1px solid var(--accent_border);
padding: 3px 6px;
font-size: 14px;
cursor: pointer;
@@ -15,10 +15,10 @@ button {
input[type="text"],
input[type="date"] {
@include input-colors;
- background-color: $bg_elements;
+ background-color: var(--bg_elements);
padding: 1px 4px;
- color: $fg_color;
- border: 1px solid $accent_border;
+ color: var(--fg_color);
+ border: 1px solid var(--accent_border);
border-radius: 0;
font-size: 14px;
}
@@ -40,8 +40,8 @@ input::-webkit-calendar-picker-indicator {
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
- background-color: $accent;
- color: $fg_color;
+ background-color: var(--accent);
+ color: var(--fg_color);
outline: none;
}
@@ -64,7 +64,7 @@ input::-webkit-datetime-edit-year-field:focus {
}
.icon-button button {
- color: $accent;
+ color: var(--accent);
text-decoration: none;
background: none;
border: none;
@@ -73,7 +73,7 @@ input::-webkit-datetime-edit-year-field:focus {
padding-left: 4px;
&:hover {
- color: $accent_light;
+ color: var(--accent_light);
}
}
@@ -83,8 +83,8 @@ input::-webkit-datetime-edit-year-field:focus {
right: 0;
height: 17px;
width: 17px;
- background-color: $bg_elements;
- border: 1px solid $accent_border;
+ background-color: var(--bg_elements);
+ border: 1px solid var(--accent_border);
&:after {
content: "";
@@ -114,11 +114,11 @@ input::-webkit-datetime-edit-year-field:focus {
}
&:hover input ~ .checkbox {
- border-color: $accent;
+ border-color: var(--accent);
}
&:active input ~ .checkbox {
- border-color: $accent_light;
+ border-color: var(--accent_light);
}
.checkbox:after {
diff --git a/src/sass/navbar.scss b/src/sass/navbar.scss
index 45b2fa2..b8c1e17 100644
--- a/src/sass/navbar.scss
+++ b/src/sass/navbar.scss
@@ -4,12 +4,16 @@ nav {
display: flex;
align-items: center;
position: fixed;
- background-color: $bg_overlays;
+ background-color: var(--bg_overlays);
box-shadow: 0 0 4px $shadow;
padding: 0;
width: 100%;
height: 50px;
z-index: 1000;
+
+ a, .icon-button button {
+ color: var(--fg_nav);
+ }
}
.inner-nav {
@@ -26,7 +30,7 @@ nav {
font-weight: 600;
&:hover {
- color: $accent_light;
+ color: var(--accent_light);
text-decoration: unset;
}
}
@@ -54,7 +58,7 @@ nav {
padding-left: 4px;
&:hover {
- color: $accent_light;
+ color: var(--accent_light);
text-decoration: unset;
}
}
diff --git a/src/sass/profile/card.scss b/src/sass/profile/card.scss
index 2281911..fc89362 100644
--- a/src/sass/profile/card.scss
+++ b/src/sass/profile/card.scss
@@ -3,7 +3,7 @@
.profile-card {
flex-wrap: wrap;
- background: $bg_panel;
+ background: var(--bg_panel);
padding: 12px;
display: flex;
}
@@ -20,14 +20,14 @@
.profile-card-username {
@include breakable;
- color: $fg_color;
+ color: var(--fg_color);
font-size: 14px;
display: block;
}
.profile-card-fullname {
@include breakable;
- color: $fg_color;
+ color: var(--fg_color);
font-size: 16px;
font-weight: bold;
text-shadow: none;
@@ -45,8 +45,8 @@
width: calc(100% - 8px);
height: 100%;
margin: 0;
- border: 4px solid $darker_grey;
- background: $bg_color;
+ border: 4px solid var(--darker_grey);
+ background: var(--bg_color);
}
}
@@ -67,7 +67,7 @@
}
.profile-joindate, .profile-location, profile-website {
- color: $fg_faded;
+ color: var(--fg_faded);
margin: 2px 0;
width: 100%;
}
diff --git a/src/sass/profile/photo-rail.scss b/src/sass/profile/photo-rail.scss
index 503125c..1cc78d7 100644
--- a/src/sass/profile/photo-rail.scss
+++ b/src/sass/profile/photo-rail.scss
@@ -3,7 +3,7 @@
.photo-rail {
&-card {
float: left;
- background: $bg_panel;
+ background: var(--bg_panel);
border-radius: 0 0 4px 4px;
width: 100%;
margin: 5px 0;
@@ -18,7 +18,7 @@
display: none;
width: calc(100% - 24px);
float: unset;
- color: $accent;
+ color: var(--accent);
justify-content: space-between;
}
diff --git a/src/sass/search.scss b/src/sass/search.scss
index 40e70f3..0311fb0 100644
--- a/src/sass/search.scss
+++ b/src/sass/search.scss
@@ -29,9 +29,9 @@
> label {
display: inline;
- background-color: #121212;
- color: #F8F8F2;
- border: 1px solid #FF6C6091;
+ background-color: var(--bg_elements);
+ color: var(--fg_color);
+ border: 1px solid var(--accent_border);
padding: 1px 6px 2px 6px;
font-size: 14px;
cursor: pointer;
diff --git a/src/sass/timeline.scss b/src/sass/timeline.scss
index dcbbb92..9d0fd78 100644
--- a/src/sass/timeline.scss
+++ b/src/sass/timeline.scss
@@ -5,15 +5,15 @@
}
.timeline {
- background-color: $bg_panel;
+ background-color: var(--bg_panel);
> div:not(:first-child) {
- border-top: 1px solid $border_grey;
+ border-top: 1px solid var(--border_grey);
}
}
.timeline-header {
- background-color: $bg_panel;
+ background-color: var(--bg_panel);
text-align: center;
padding: 8px;
display: block;
@@ -31,7 +31,7 @@
flex-wrap: wrap;
list-style: none;
margin: 0 0 5px 0;
- background-color: $bg_panel;
+ background-color: var(--bg_panel);
padding: 0;
}
@@ -53,14 +53,14 @@
}
&.active {
- border-bottom-color: $accent;
- color: $accent;
+ border-bottom-color: var(--accent);
+ color: var(--accent);
}
}
&.active a {
- border-bottom-color: $accent;
- color: $accent;
+ border-bottom-color: var(--accent);
+ color: var(--accent);
}
&.wide {
@@ -69,7 +69,7 @@
}
.timeline-footer {
- background-color: $bg_panel;
+ background-color: var(--bg_panel);
padding: 6px 0;
}
@@ -81,48 +81,48 @@
}
h2 {
- color: $accent;
+ color: var(--accent);
font-size: 20px;
font-weight: 600;
}
}
.timeline-none {
- color: $accent;
+ color: var(--accent);
font-size: 20px;
font-weight: 600;
text-align: center;
}
.timeline-end {
- background-color: $bg_panel;
- color: $accent;
+ background-color: var(--bg_panel);
+ color: var(--accent);
font-size: 16px;
font-weight: 600;
text-align: center;
}
.show-more {
- background-color: $bg_panel;
+ background-color: var(--bg_panel);
text-align: center;
padding: .75em 0;
display: block !important;
a {
- background-color: $darkest_grey;
+ background-color: var(--darkest_grey);
display: inline-block;
height: 2em;
padding: 0 2em;
line-height: 2em;
&:hover {
- background-color: $darker_grey;
+ background-color: var(--darker_grey);
}
}
}
.top-ref {
- background-color: #0f0f0f;
+ background-color: var(--bg_color);
border-top: none !important;
.icon-down {
@@ -132,7 +132,7 @@
text-decoration: none;
&:hover {
- color: $accent_light;
+ color: var(--accent_light);
}
&::before {
diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss
index 46319e2..2a5ea17 100644
--- a/src/sass/tweet/_base.scss
+++ b/src/sass/tweet/_base.scss
@@ -52,7 +52,7 @@
max-width: 80%;
font-size: 14px;
font-weight: 700;
- color: $fg_color;
+ color: var(--fg_color);
}
.username {
@@ -71,7 +71,7 @@
.tweet-published {
margin: 0;
margin-top: 5px;
- color: $grey;
+ color: var(--grey);
pointer-events: all;
}
@@ -89,7 +89,7 @@
}
.replying-to {
- color: $fg_dark;
+ color: var(--fg_dark);
margin: -2px 0 4px;
a {
@@ -99,7 +99,7 @@
.retweet-header, .pinned, .tweet-stats {
align-content: center;
- color: $grey;
+ color: var(--grey);
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
@@ -134,9 +134,9 @@
width: 100%;
height: 100%;
padding: 12px;
- border: solid 1px $dark_grey;
+ border: solid 1px var(--dark_grey);
border-radius: 10px;
- background-color: $bg_color;
+ background-color: var(--bg_color);
}
.tweet-link {
@@ -147,6 +147,6 @@
position: absolute;
&:hover {
- background-color: #1a1a1a;
+ background-color: var(--bg_hover);
}
}
diff --git a/src/sass/tweet/card.scss b/src/sass/tweet/card.scss
index 11039f7..7ebd37e 100644
--- a/src/sass/tweet/card.scss
+++ b/src/sass/tweet/card.scss
@@ -10,15 +10,15 @@
border-radius: 10px;
border-width: 1px;
border-style: solid;
- border-color: $dark_grey;
- background-color: $bg_elements;
+ border-color: var(--dark_grey);
+ background-color: var(--bg_elements);
overflow: hidden;
color: inherit;
display: flex;
text-decoration: none !important;
&:hover {
- border-color: $grey;
+ border-color: var(--grey);
}
.attachments {
@@ -43,7 +43,7 @@
.card-destination {
@include ellipsis;
- color: $grey;
+ color: var(--grey);
display: block;
}
@@ -73,7 +73,7 @@
left: 0;
bottom: 0;
right: 0;
- background-color: $fg_color;
+ background-color: var(--fg_color);
img {
width: 100%;
@@ -107,7 +107,7 @@
.card-image {
position: unset;
border-style: solid;
- border-color: $dark_grey;
+ border-color: var(--dark_grey);
border-width: 0;
border-bottom-width: 1px;
}
diff --git a/src/sass/tweet/media.scss b/src/sass/tweet/media.scss
index 921f85d..61ca4b0 100644
--- a/src/sass/tweet/media.scss
+++ b/src/sass/tweet/media.scss
@@ -26,7 +26,7 @@
border-radius: 7px;
overflow: hidden;
flex-flow: column;
- background-color: $bg_color;
+ background-color: var(--bg_color);
align-items: center;
pointer-events: all;
@@ -81,13 +81,13 @@
.overlay-circle {
border-radius: 50%;
- background-color: $dark_grey;
+ background-color: var(--dark_grey);
width: 40px;
height: 40px;
align-items: center;
display: flex;
border-width: 5px;
- border-color: $play_button_red;
+ border-color: var(--play_button_red);
border-style: solid;
}
@@ -96,7 +96,7 @@
height: 0;
border-style: solid;
border-width: 12px 0 12px 17px;
- border-color: transparent transparent transparent $play_button_red;
+ border-color: transparent transparent transparent var(--play_button_red);
margin-left: 14px;
}
diff --git a/src/sass/tweet/poll.scss b/src/sass/tweet/poll.scss
index 2709ba5..57590c8 100644
--- a/src/sass/tweet/poll.scss
+++ b/src/sass/tweet/poll.scss
@@ -5,7 +5,7 @@
position: relative;
margin: 6px 0;
height: 26px;
- background: $bg_color;
+ background: var(--bg_color);
border-radius: 5px;
display: flex;
align-items: center;
@@ -14,7 +14,7 @@
.poll-choice-bar {
height: 100%;
position: absolute;
- background: $dark_grey;
+ background: var(--dark_grey);
}
.poll-choice-value {
@@ -33,10 +33,10 @@
}
.poll-info {
- color: $grey;
+ color: var(--grey);
pointer-events: all;
}
.leader .poll-choice-bar {
- background: $accent_dark;
+ background: var(--accent_dark);
}
diff --git a/src/sass/tweet/quote.scss b/src/sass/tweet/quote.scss
index 7c435bc..02e9b56 100644
--- a/src/sass/tweet/quote.scss
+++ b/src/sass/tweet/quote.scss
@@ -2,20 +2,20 @@
.quote {
margin-top: 10px;
- border: solid 1px $dark_grey;
+ border: solid 1px var(--dark_grey);
border-radius: 10px;
- background-color: $bg_elements;
+ background-color: var(--bg_elements);
overflow: auto;
padding: 6px;
position: relative;
pointer-events: all;
&:hover {
- border-color: $grey;
+ border-color: var(--grey);
}
&.unavailable:hover {
- border-color: $dark_grey;
+ border-color: var(--dark_grey);
}
}
@@ -85,7 +85,7 @@
}
.quote-sensitive {
- background: $darker_grey;
+ background: var(--darker_grey);
width: 102px;
height: 102px;
border-radius: 12px;
@@ -96,7 +96,7 @@
.quote-sensitive-icon {
font-size: 40px;
- color: $grey;
+ color: var(--grey);
}
@media(max-width: 600px) {
diff --git a/src/sass/tweet/thread.scss b/src/sass/tweet/thread.scss
index 5557684..5dd3cc2 100644
--- a/src/sass/tweet/thread.scss
+++ b/src/sass/tweet/thread.scss
@@ -11,7 +11,7 @@
.main-thread {
margin-bottom: 20px;
- background-color: $bg_panel;
+ background-color: var(--bg_panel);
}
.main-tweet, .replies {
@@ -24,14 +24,14 @@
}
.reply {
- background-color: $bg_panel;
+ background-color: var(--bg_panel);
margin-bottom: 10px;
}
.thread-line {
.timeline-item::before,
&.timeline-item::before {
- background: $accent_dark;
+ background: var(--accent_dark);
content: '';
position: relative;
min-width: 3px;
@@ -53,7 +53,7 @@
.more-replies::before {
content: '...';
background: unset;
- color: $more_replies_dots;
+ color: var(--more_replies_dots);
font-weight: bold;
font-size: 20px;
line-height: 0.25em;
From 9aa4ddb30b0a637046bc3e6524ed24c8e148cbdb Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 11:47:20 +0200
Subject: [PATCH 02/14] Fix navbar icon color
---
src/sass/include/_variables.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss
index d5c71f7..0b73223 100644
--- a/src/sass/include/_variables.scss
+++ b/src/sass/include/_variables.scss
@@ -3,7 +3,7 @@ $bg_color: #0F0F0F;
$fg_color: #F8F8F2;
$fg_faded: #F8F8F2CF;
$fg_dark: #9d9da0;
-$fg_nav: #000000;
+$fg_nav: #FF6C60;
$bg_panel: #161616;
$bg_elements: #121212;
From 5630a4da32e81575daafda24d6787acccc5cc125 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 11:48:08 +0200
Subject: [PATCH 03/14] Add theme option
---
src/prefs_impl.nim | 7 ++++++-
src/routes/preferences.nim | 8 ++++++--
src/views/general.nim | 2 ++
src/views/preferences.nim | 10 +++++++---
4 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/src/prefs_impl.nim b/src/prefs_impl.nim
index 96f8479..4978b70 100644
--- a/src/prefs_impl.nim
+++ b/src/prefs_impl.nim
@@ -51,6 +51,9 @@ const prefList*: OrderedTable[string, seq[Pref]] = {
],
"Display": @[
+ Pref(kind: select, name: "theme", label: "Theme",
+ defaultOption: "Dark"),
+
Pref(kind: checkbox, name: "hideTweetStats",
label: "Hide tweet stats (replies, retweets, likes)",
defaultState: false),
@@ -94,10 +97,12 @@ macro genUpdatePrefs*(): untyped =
of input:
result.add quote do: prefs.`ident` = xmltree.escape(strip(`value`))
of select:
+ let name = pref.name
let options = pref.options
let default = pref.defaultOption
result.add quote do:
- if `value` in `options`: prefs.`ident` = `value`
+ if `name` == "theme": prefs.`ident` = `value`
+ elif `value` in `options`: prefs.`ident` = `value`
else: prefs.`ident` = `default`
result.add quote do:
diff --git a/src/routes/preferences.nim b/src/routes/preferences.nim
index 47bd5c3..6bba29d 100644
--- a/src/routes/preferences.nim
+++ b/src/routes/preferences.nim
@@ -1,4 +1,4 @@
-import strutils, uri
+import strutils, uri, os
import jester
@@ -8,13 +8,17 @@ import ../views/[general, preferences]
export preferences
+proc findThemes*(dir: string): seq[string] =
+ for kind, path in walkDir(dir / "css" / "themes"):
+ result.add path.splitFile.name.capitalizeAscii
+
proc createPrefRouter*(cfg: Config) =
router preferences:
template savePrefs(): untyped =
setCookie("preferences", $prefs.id, daysForward(360), httpOnly=true, secure=cfg.useHttps)
get "/settings":
- let html = renderPreferences(cookiePrefs(), refPath())
+ let html = renderPreferences(cookiePrefs(), refPath(), findThemes(cfg.staticDir))
resp renderMain(html, request, cfg, "Preferences")
get "/settings/@i?":
diff --git a/src/views/general.nim b/src/views/general.nim
index af650e7..e0433aa 100644
--- a/src/views/general.nim
+++ b/src/views/general.nim
@@ -30,10 +30,12 @@ proc renderNavbar*(title, rss: string; req: Request): VNode =
proc renderMain*(body: VNode; req: Request; cfg: Config; titleText=""; desc="";
rss=""; `type`="article"; video=""; images: seq[string] = @[]): string =
let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg.hostname)
+ let theme = "/css/themes/" & toLowerAscii(prefs.theme) & ".css"
let node = buildHtml(html(lang="en")):
head:
link(rel="stylesheet", `type`="text/css", href="/css/style.css")
link(rel="stylesheet", `type`="text/css", href="/css/fontello.css")
+ link(rel="stylesheet", `type`="text/css", href=theme)
link(rel="apple-touch-icon", sizes="180x180", href="/apple-touch-icon.png")
link(rel="icon", type="image/png", sizes="32x32", href="/favicon-32x32.png")
diff --git a/src/views/preferences.nim b/src/views/preferences.nim
index c503cbc..7a415f6 100644
--- a/src/views/preferences.nim
+++ b/src/views/preferences.nim
@@ -1,4 +1,4 @@
-import tables, macros, strutils
+import tables, macros, strutils, os
import karax/[karaxdsl, vdom, vstyles]
import renderutils
@@ -22,12 +22,16 @@ macro renderPrefs*(): untyped =
case pref.kind
of checkbox: discard
- of select: stmt[0].add newLit(pref.options)
of input: stmt[0].add newLit(pref.placeholder)
+ of select:
+ if pref.name == "theme":
+ stmt[0].add ident("themes")
+ else:
+ stmt[0].add newLit(pref.options)
result[2].add stmt
-proc renderPreferences*(prefs: Prefs; path: string): VNode =
+proc renderPreferences*(prefs: Prefs; path: string; themes: seq[string]): VNode =
buildHtml(tdiv(class="overlay-panel")):
fieldset(class="preferences"):
form(`method`="post", action="/saveprefs"):
From 6481004940e4080d16dafc5556885a636ff95d8d Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 11:48:47 +0200
Subject: [PATCH 04/14] Add dark and light themes
---
public/css/themes/dark.css | 30 ++++++++++++++++++++++++++++++
public/css/themes/light.css | 30 ++++++++++++++++++++++++++++++
2 files changed, 60 insertions(+)
create mode 100644 public/css/themes/dark.css
create mode 100644 public/css/themes/light.css
diff --git a/public/css/themes/dark.css b/public/css/themes/dark.css
new file mode 100644
index 0000000..a15d181
--- /dev/null
+++ b/public/css/themes/dark.css
@@ -0,0 +1,30 @@
+body {
+ --bg_color: #0F0F0F;
+ --fg_color: #F8F8F2;
+ --fg_faded: #F8F8F2CF;
+ --fg_dark: #9d9da0;
+ --fg_nav: #FF6C60;
+
+ --bg_panel: #161616;
+ --bg_elements: #121212;
+ --bg_overlays: #1F1F1F;
+ --bg_hover: #1A1A1A;
+
+ --grey: #888889;
+ --dark_grey: #404040;
+ --darker_grey: #282828;
+ --darkest_grey: #222222;
+ --border_grey: #3E3E35;
+
+ --accent: #FF6C60;
+ --accent_light: #FFACA0;
+ --accent_dark: #8A3731;
+ --accent_border: #FF6C6091;
+
+ --play_button_red: #D8574D;
+ --more_replies_dots: #AD433B;
+ --error_red: #420A05;
+
+ --verified_blue: #1DA1F2;
+ --icon_text: #F8F8F2;
+}
diff --git a/public/css/themes/light.css b/public/css/themes/light.css
new file mode 100644
index 0000000..3171be5
--- /dev/null
+++ b/public/css/themes/light.css
@@ -0,0 +1,30 @@
+body {
+ --bg_color: #e6ecf0;
+ --fg_color: #0F0F0F;
+ --fg_faded: #161616;
+ --fg_dark: #191919;
+ --fg_nav: #000000;
+
+ --bg_panel: #ffffff;
+ --bg_elements: #fdfdfd;
+ --bg_overlays: #ffffff;
+ --bg_hover: #f5f8fa;
+
+ --grey: #657786;
+ --dark_grey: #d6d6d6;
+ --darker_grey: #cecece;
+ --darkest_grey: #e8e8e8;
+ --border_grey: #e6ecf0;
+
+ --accent: #657786;
+ --accent_light: #a0edff;
+ --accent_dark: #1DA1F2;
+ --accent_border: #1da1f296;
+
+ --play_button_red: #4db8d8;
+ --more_replies_dots: #0199f7;
+ --error_red: #ff7266;
+
+ --verified_blue: #1DA1F2;
+ --icon_text: #FFFFFF;
+}
From d4b86fd0f8345a705abc8bb4121c34083eb4b3cb Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:05:08 +0200
Subject: [PATCH 05/14] Style select element
---
src/sass/inputs.scss | 13 ++++++++++++-
src/views/renderutils.nim | 2 +-
2 files changed, 13 insertions(+), 2 deletions(-)
diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss
index 0cf372d..a06343f 100644
--- a/src/sass/inputs.scss
+++ b/src/sass/inputs.scss
@@ -13,7 +13,8 @@ button {
}
input[type="text"],
-input[type="date"] {
+input[type="date"],
+select {
@include input-colors;
background-color: var(--bg_elements);
padding: 1px 4px;
@@ -143,6 +144,16 @@ input::-webkit-datetime-edit-year-field:focus {
padding-right: 135px;
}
+ select {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: block;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ }
+
input[type="text"] {
position: absolute;
right: 0;
diff --git a/src/views/renderutils.nim b/src/views/renderutils.nim
index 7612acb..dc2194a 100644
--- a/src/views/renderutils.nim
+++ b/src/views/renderutils.nim
@@ -71,7 +71,7 @@ proc genInput*(pref, label, state, placeholder: string; class=""; autofocus=fals
verbatim &"<input name={pref} type=\"text\" placeholder=\"{p}\" value=\"{s}\" {a}/>"
proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
- buildHtml(tdiv(class="pref-group")):
+ buildHtml(tdiv(class="pref-group pref-input")):
label(`for`=pref): text label
select(name=pref):
for opt in options:
From 4a5d99974c964dc77700a9e58ab4d82d183fd7f1 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:16:21 +0200
Subject: [PATCH 06/14] Update readme
---
README.md | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 5819442..62e882b 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Inspired by the [invidio.us](https://github.com/omarroth/invidious) project.
- Prevents Twitter from tracking your IP or JavaScript fingerprint
- Unofficial API (no rate limits or developer account required)
- AGPLv3 licensed, no proprietary instances permitted
-- Dark theme
+- Themes
- Lightweight (for [@nim_lang](https://twitter.com/nim_lang), 36KB vs 580KB from twitter.com)
- Native RSS feeds
- Mobile support (responsive design)
@@ -21,7 +21,6 @@ Inspired by the [invidio.us](https://github.com/omarroth/invidious) project.
- More caching (waiting for [moigagoo/norm#19](https://github.com/moigagoo/norm/pull/19))
- Simple account system with customizable feed
- Json API endpoints
-- Themes
- Nitter logo
- Emoji support (WIP, uses native font for now)
From 4f746193a03187f9dda7551f38b656fde07f7fe7 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:32:23 +0200
Subject: [PATCH 07/14] Add simple migration for theme preference
---
src/prefs.nim | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/src/prefs.nim b/src/prefs.nim
index 0319f7f..7656f08 100644
--- a/src/prefs.nim
+++ b/src/prefs.nim
@@ -14,6 +14,10 @@ static:
if missing.len > 0:
raiseAssert("{$1} missing from the Prefs type" % missing.join(", "))
+template safeAddColumn(field: typedesc): untyped =
+ try: field.addColumn
+ except DbError: discard
+
dbFromTypes("prefs.db", "", "", "", [Prefs])
withDb:
@@ -21,6 +25,7 @@ withDb:
createTables()
except DbError:
discard
+ Prefs.theme.safeAddColumn
proc getDefaultPrefs(hostname: string): Prefs =
result = genDefaultPrefs()
From ac0e0b5e0de84d2920e364502b8152ad05e29219 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:32:37 +0200
Subject: [PATCH 08/14] Finalize theme support
---
public/css/themes/light.css | 28 ++++++++++++++--------------
src/routes/preferences.nim | 3 ++-
2 files changed, 16 insertions(+), 15 deletions(-)
diff --git a/public/css/themes/light.css b/public/css/themes/light.css
index 3171be5..53bc51e 100644
--- a/public/css/themes/light.css
+++ b/public/css/themes/light.css
@@ -1,29 +1,29 @@
body {
- --bg_color: #e6ecf0;
+ --bg_color: #E6ECF0;
--fg_color: #0F0F0F;
--fg_faded: #161616;
--fg_dark: #191919;
--fg_nav: #000000;
- --bg_panel: #ffffff;
- --bg_elements: #fdfdfd;
- --bg_overlays: #ffffff;
- --bg_hover: #f5f8fa;
+ --bg_panel: #FFFFFF;
+ --bg_elements: #FDFDFD;
+ --bg_overlays: #FFFFFF;
+ --bg_hover: #F5F8FA;
--grey: #657786;
- --dark_grey: #d6d6d6;
- --darker_grey: #cecece;
- --darkest_grey: #e8e8e8;
- --border_grey: #e6ecf0;
+ --dark_grey: #D6D6D6;
+ --darker_grey: #CECECE;
+ --darkest_grey: #E8E8E8;
+ --border_grey: #E6ECF0;
- --accent: #657786;
- --accent_light: #a0edff;
+ --accent: #313131;
+ --accent_light: #A0EDFF;
--accent_dark: #1DA1F2;
- --accent_border: #1da1f296;
+ --accent_border: #1DA1F296;
- --play_button_red: #4db8d8;
+ --play_button_red: #4DB8D8;
--more_replies_dots: #0199f7;
- --error_red: #ff7266;
+ --error_red: #FF7266;
--verified_blue: #1DA1F2;
--icon_text: #FFFFFF;
diff --git a/src/routes/preferences.nim b/src/routes/preferences.nim
index 6bba29d..d019942 100644
--- a/src/routes/preferences.nim
+++ b/src/routes/preferences.nim
@@ -1,4 +1,4 @@
-import strutils, uri, os
+import strutils, uri, os, algorithm
import jester
@@ -11,6 +11,7 @@ export preferences
proc findThemes*(dir: string): seq[string] =
for kind, path in walkDir(dir / "css" / "themes"):
result.add path.splitFile.name.capitalizeAscii
+ reverse(result)
proc createPrefRouter*(cfg: Config) =
router preferences:
From 1bba0096561d58e362efd593da9af906ee01cb23 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:46:46 +0200
Subject: [PATCH 09/14] Tweak light theme
---
public/css/themes/light.css | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/public/css/themes/light.css b/public/css/themes/light.css
index 53bc51e..ea144bb 100644
--- a/public/css/themes/light.css
+++ b/public/css/themes/light.css
@@ -3,7 +3,7 @@ body {
--fg_color: #0F0F0F;
--fg_faded: #161616;
--fg_dark: #191919;
- --fg_nav: #000000;
+ --fg_nav: #1DA1F2;
--bg_panel: #FFFFFF;
--bg_elements: #FDFDFD;
@@ -16,12 +16,12 @@ body {
--darkest_grey: #E8E8E8;
--border_grey: #E6ECF0;
- --accent: #313131;
+ --accent: #4E4E4E;
--accent_light: #A0EDFF;
--accent_dark: #1DA1F2;
--accent_border: #1DA1F296;
- --play_button_red: #4DB8D8;
+ --play_button_red: #d84d4d;
--more_replies_dots: #0199f7;
--error_red: #FF7266;
From aaf079a141379678ac115d315c64f2d361ebc414 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:46:52 +0200
Subject: [PATCH 10/14] Alphabetize theme order
---
src/routes/preferences.nim | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/routes/preferences.nim b/src/routes/preferences.nim
index d019942..233b94c 100644
--- a/src/routes/preferences.nim
+++ b/src/routes/preferences.nim
@@ -11,7 +11,7 @@ export preferences
proc findThemes*(dir: string): seq[string] =
for kind, path in walkDir(dir / "css" / "themes"):
result.add path.splitFile.name.capitalizeAscii
- reverse(result)
+ sort(result)
proc createPrefRouter*(cfg: Config) =
router preferences:
From a3ca693dbe3cbbf046f531aa7be8eb1faf518aeb Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:47:01 +0200
Subject: [PATCH 11/14] Require latest norm version
---
nitter.nimble | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/nitter.nimble b/nitter.nimble
index 287c62e..ed1e4a7 100644
--- a/nitter.nimble
+++ b/nitter.nimble
@@ -11,7 +11,7 @@ bin = @["nitter"]
# Dependencies
requires "nim >= 0.19.9"
-requires "norm >= 1.0.17"
+requires "norm#head"
requires "https://github.com/dom96/httpbeast#head"
requires "jester >= 0.4.3"
requires "regex >= 0.11.2"
From 64d2d39424ee4e7fc018d2bfe450d637e355bdf7 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 13:58:10 +0200
Subject: [PATCH 12/14] Tweak light theme to resemble Twitter more
---
public/css/themes/light.css | 29 ++++++++++++++++++-----------
src/sass/general.scss | 4 ----
src/sass/include/_mixins.css | 4 ++--
src/sass/include/_variables.scss | 11 ++++++++---
src/sass/index.scss | 9 ++++++++-
src/sass/profile/card.scss | 2 ++
src/sass/timeline.scss | 10 +++++-----
src/sass/tweet/_base.scss | 6 +++++-
src/sass/tweet/media.scss | 4 ++--
9 files changed, 50 insertions(+), 29 deletions(-)
diff --git a/public/css/themes/light.css b/public/css/themes/light.css
index ea144bb..1f22516 100644
--- a/public/css/themes/light.css
+++ b/public/css/themes/light.css
@@ -1,30 +1,37 @@
body {
--bg_color: #E6ECF0;
--fg_color: #0F0F0F;
- --fg_faded: #161616;
- --fg_dark: #191919;
- --fg_nav: #1DA1F2;
+ --fg_faded: #657786;
+ --fg_dark: var(--fg_faded);
+ --fg_nav: var(--accent);
--bg_panel: #FFFFFF;
--bg_elements: #FDFDFD;
--bg_overlays: #FFFFFF;
--bg_hover: #F5F8FA;
- --grey: #657786;
+ --grey: var(--fg_faded);
--dark_grey: #D6D6D6;
--darker_grey: #CECECE;
- --darkest_grey: #E8E8E8;
+ --darkest_grey: #ECECEC;
--border_grey: #E6ECF0;
- --accent: #4E4E4E;
+ --accent: #1DA1F2;
--accent_light: #A0EDFF;
- --accent_dark: #1DA1F2;
+ --accent_dark: var(--accent);
--accent_border: #1DA1F296;
- --play_button_red: #d84d4d;
- --more_replies_dots: #0199f7;
+ --play_button: #D84D4D;
+ --play_button_hover: #FF6C60;
+
+ --more_replies_dots: #0199F7;
--error_red: #FF7266;
- --verified_blue: #1DA1F2;
- --icon_text: #FFFFFF;
+ --verified_blue: var(--accent);
+ --icon_text: ##F8F8F2;
+
+ --tab: var(--accent);
+ --tab_selected: #000000;
+
+ --profile_stat: var(--fg_dark);
}
diff --git a/src/sass/general.scss b/src/sass/general.scss
index 5098b43..c4759b0 100644
--- a/src/sass/general.scss
+++ b/src/sass/general.scss
@@ -10,10 +10,6 @@
@include center-panel(var(--error_red));
}
-.search-bar {
- // background: var(--darkest_grey);
-}
-
.search-bar > form {
@include center-panel(var(--darkest_grey));
diff --git a/src/sass/include/_mixins.css b/src/sass/include/_mixins.css
index ab01f05..94e11ee 100644
--- a/src/sass/include/_mixins.css
+++ b/src/sass/include/_mixins.css
@@ -19,11 +19,11 @@
&:hover {
.overlay-circle {
- border-color: var(--accent);
+ border-color: var(--play_button_hover);
}
.overlay-triangle {
- border-color: transparent transparent transparent var(--accent);
+ border-color: transparent transparent transparent var(--play_button_hover);
}
}
}
diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss
index 0b73223..b0a6993 100644
--- a/src/sass/include/_variables.scss
+++ b/src/sass/include/_variables.scss
@@ -2,7 +2,7 @@
$bg_color: #0F0F0F;
$fg_color: #F8F8F2;
$fg_faded: #F8F8F2CF;
-$fg_dark: #9d9da0;
+$fg_dark: #FF6C60;
$fg_nav: #FF6C60;
$bg_panel: #161616;
@@ -21,12 +21,17 @@ $accent_light: #FFACA0;
$accent_dark: #8A3731;
$accent_border: #FF6C6091;
-$play_button_red: #D8574D;
+$play_button: #D8574D;
+$play_button_hover: #FF6C60;
+
$more_replies_dots: #AD433B;
$error_red: #420A05;
$verified_blue: #1DA1F2;
-$icon_text: #F8F8F2;
+$icon_text: $fg_color;
+
+$tab: $fg_color;
+$tab_selected: $accent;
$shadow: rgba(0,0,0,.6);
$shadow_dark: rgba(0,0,0,.2);
diff --git a/src/sass/index.scss b/src/sass/index.scss
index 44501f4..ba675a7 100644
--- a/src/sass/index.scss
+++ b/src/sass/index.scss
@@ -32,13 +32,20 @@ body {
--accent_dark: #{$accent_dark};
--accent_border: #{$accent_border};
- --play_button_red: #{$play_button_red};
+ --play_button: #{$play_button};
+ --play_button_hover: #{$play_button_hover};
+
--more_replies_dots: #{$more_replies_dots};
--error_red: #{$error_red};
--verified_blue: #{$verified_blue};
--icon_text: #{$icon_text};
+ --tab: #{$fg_color};
+ --tab_selected: #{$accent};
+
+ --profile_stat: #{$fg_color};
+
background-color: var(--bg_color);
color: var(--fg_color);
font-family: $font_0, $font_1, $font_2, $font_3;
diff --git a/src/sass/profile/card.scss b/src/sass/profile/card.scss
index fc89362..f775a0b 100644
--- a/src/sass/profile/card.scss
+++ b/src/sass/profile/card.scss
@@ -94,10 +94,12 @@
.profile-stat-header {
font-weight: bold;
+ color: var(--profile_stat);
}
.profile-stat-num {
display: block;
+ color: var(--profile_stat);
}
@media(max-width: 600px) {
diff --git a/src/sass/timeline.scss b/src/sass/timeline.scss
index 9d0fd78..02e4423 100644
--- a/src/sass/timeline.scss
+++ b/src/sass/timeline.scss
@@ -42,7 +42,7 @@
a {
border-bottom: .1rem solid transparent;
- color: inherit;
+ color: var(--tab);
display: block;
padding: 8px 0;
text-decoration: none;
@@ -53,14 +53,14 @@
}
&.active {
- border-bottom-color: var(--accent);
- color: var(--accent);
+ border-bottom-color: var(--tab_selected);
+ color: var(--tab_selected);
}
}
&.active a {
- border-bottom-color: var(--accent);
- color: var(--accent);
+ border-bottom-color: var(--tab_selected);
+ color: var(--tab_selected);
}
&.wide {
diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss
index 2a5ea17..add0d5b 100644
--- a/src/sass/tweet/_base.scss
+++ b/src/sass/tweet/_base.scss
@@ -68,6 +68,10 @@
margin-left: 4px;
}
+.tweet-date a, .username, .show-more a {
+ color: var(--fg_dark);
+}
+
.tweet-published {
margin: 0;
margin-top: 5px;
@@ -89,7 +93,7 @@
}
.replying-to {
- color: var(--fg_dark);
+ color: var(--fg_faded);
margin: -2px 0 4px;
a {
diff --git a/src/sass/tweet/media.scss b/src/sass/tweet/media.scss
index 61ca4b0..f29c717 100644
--- a/src/sass/tweet/media.scss
+++ b/src/sass/tweet/media.scss
@@ -87,7 +87,7 @@
align-items: center;
display: flex;
border-width: 5px;
- border-color: var(--play_button_red);
+ border-color: var(--play_button);
border-style: solid;
}
@@ -96,7 +96,7 @@
height: 0;
border-style: solid;
border-width: 12px 0 12px 17px;
- border-color: transparent transparent transparent var(--play_button_red);
+ border-color: transparent transparent transparent var(--play_button);
margin-left: 14px;
}
From b018dbdf27538b9190a60e6889bd5e565e37c813 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 13:58:28 +0200
Subject: [PATCH 13/14] Cleanup themes
---
public/css/themes/dark.css | 29 +-----------------------
src/sass/include/_variables.scss | 38 --------------------------------
2 files changed, 1 insertion(+), 66 deletions(-)
diff --git a/public/css/themes/dark.css b/public/css/themes/dark.css
index a15d181..a44b29c 100644
--- a/public/css/themes/dark.css
+++ b/public/css/themes/dark.css
@@ -1,30 +1,3 @@
body {
- --bg_color: #0F0F0F;
- --fg_color: #F8F8F2;
- --fg_faded: #F8F8F2CF;
- --fg_dark: #9d9da0;
- --fg_nav: #FF6C60;
-
- --bg_panel: #161616;
- --bg_elements: #121212;
- --bg_overlays: #1F1F1F;
- --bg_hover: #1A1A1A;
-
- --grey: #888889;
- --dark_grey: #404040;
- --darker_grey: #282828;
- --darkest_grey: #222222;
- --border_grey: #3E3E35;
-
- --accent: #FF6C60;
- --accent_light: #FFACA0;
- --accent_dark: #8A3731;
- --accent_border: #FF6C6091;
-
- --play_button_red: #D8574D;
- --more_replies_dots: #AD433B;
- --error_red: #420A05;
-
- --verified_blue: #1DA1F2;
- --icon_text: #F8F8F2;
+ /* uses default values */
}
diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss
index b0a6993..0f81235 100644
--- a/src/sass/include/_variables.scss
+++ b/src/sass/include/_variables.scss
@@ -42,41 +42,3 @@ $font_1: Helvetica;
$font_2: Arial;
$font_3: sans-serif;
$font_4: fontello;
-
-//theme
-$variables: (
- --bg_color: var(--bg_color),
- --fg_color: var(--fg_color),
- --fg_faded: var(--fg_faded),
- --fg_dark: var(--fg_dark),
- --fg_nav: var(--fg_nav),
-
- --bg_panel: var(--bg_panel),
- --bg_elements: var(--bg_elements),
- --bg_overlays: var(--bg_overlays),
- --bg_hover: var(--bg_hover),
-
- --grey: var(--grey),
- --dark_grey: var(--dark_grey),
- --darker_grey: var(--darker_grey),
- --darkest_grey: var(--darkest_grey),
- --border_grey: var(--border_grey),
-
- --accent: var(--accent),
- --accent_light: var(--accent_light),
- --accent_dark: var(--accent_dark),
- --accent_border: var(--accent_border),
-
- --play_button_red: var(--play_button_red),
- --more_replies_dots: var(--more_replies_dots),
- --error_red: var(--error_red),
-
- --verified_blue: var(--verified_blue),
- --icon_text: var(--icon_text)
-);
-
-/*** theme helper ***/
-
-@function var($variable) {
- @return map-get($variables, $variable);
-}
From 3e661bab8a6bfaccdb6bccc707d1dd32a15f26e2 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 14:06:47 +0200
Subject: [PATCH 14/14] Add defaultTheme config option
---
nitter.conf | 3 +++
src/config.nim | 4 +++-
src/prefs.nim | 15 ++++++++-------
src/routes/preferences.nim | 2 +-
src/routes/router_utils.nim | 2 +-
src/types.nim | 1 +
src/views/general.nim | 2 +-
7 files changed, 18 insertions(+), 11 deletions(-)
diff --git a/nitter.conf b/nitter.conf
index 857b9f0..e957e68 100644
--- a/nitter.conf
+++ b/nitter.conf
@@ -9,3 +9,6 @@ hostname = "nitter.net"
[Cache]
directory = "./tmp"
profileMinutes = 10 # how long to cache profiles
+
+[Config]
+defaultTheme = "Dark"
diff --git a/src/config.nim b/src/config.nim
index ea62b1c..359d872 100644
--- a/src/config.nim
+++ b/src/config.nim
@@ -21,5 +21,7 @@ proc getConfig*(path: string): Config =
hostname: cfg.get("Server", "hostname", "nitter.net"),
cacheDir: cfg.get("Cache", "directory", "/tmp/nitter"),
- profileCacheTime: cfg.get("Cache", "profileMinutes", 10)
+ profileCacheTime: cfg.get("Cache", "profileMinutes", 10),
+
+ defaultTheme: cfg.get("Config", "defaultTheme", "Dark")
)
diff --git a/src/prefs.nim b/src/prefs.nim
index 7656f08..8abba26 100644
--- a/src/prefs.nim
+++ b/src/prefs.nim
@@ -27,9 +27,10 @@ withDb:
discard
Prefs.theme.safeAddColumn
-proc getDefaultPrefs(hostname: string): Prefs =
+proc getDefaultPrefs(cfg: Config): Prefs =
result = genDefaultPrefs()
- result.replaceTwitter = hostname
+ result.replaceTwitter = cfg.hostname
+ result.theme = cfg.defaultTheme
proc cache*(prefs: var Prefs) =
withDb:
@@ -40,18 +41,18 @@ proc cache*(prefs: var Prefs) =
except AssertionError, KeyError:
prefs.insert()
-proc getPrefs*(id, hostname: string): Prefs =
+proc getPrefs*(id: string; cfg: Config): Prefs =
if id.len == 0:
- return getDefaultPrefs(hostname)
+ return getDefaultPrefs(cfg)
withDb:
try:
result.getOne("id = ?", id)
except KeyError:
- result = getDefaultPrefs(hostname)
+ result = getDefaultPrefs(cfg)
-proc resetPrefs*(prefs: var Prefs; hostname: string) =
- var defPrefs = getDefaultPrefs(hostname)
+proc resetPrefs*(prefs: var Prefs; cfg: Config) =
+ var defPrefs = getDefaultPrefs(cfg)
defPrefs.id = prefs.id
cache(defPrefs)
prefs = defPrefs
diff --git a/src/routes/preferences.nim b/src/routes/preferences.nim
index 233b94c..96cd51e 100644
--- a/src/routes/preferences.nim
+++ b/src/routes/preferences.nim
@@ -33,7 +33,7 @@ proc createPrefRouter*(cfg: Config) =
post "/resetprefs":
var prefs = cookiePrefs()
- resetPrefs(prefs, cfg.hostname)
+ resetPrefs(prefs, cfg)
savePrefs()
redirect($(parseUri("/settings") ? filterParams(request.params)))
diff --git a/src/routes/router_utils.nim b/src/routes/router_utils.nim
index 44ffba8..2aedd6c 100644
--- a/src/routes/router_utils.nim
+++ b/src/routes/router_utils.nim
@@ -2,7 +2,7 @@ import ../utils, ../prefs
export utils, prefs
template cookiePrefs*(): untyped {.dirty.} =
- getPrefs(request.cookies.getOrDefault("preferences"), cfg.hostname)
+ getPrefs(request.cookies.getOrDefault("preferences"), cfg)
template getPath*(): untyped {.dirty.} =
$(parseUri(request.path) ? filterParams(request.params))
diff --git a/src/types.nim b/src/types.nim
index d4965fd..c0d9492 100644
--- a/src/types.nim
+++ b/src/types.nim
@@ -177,6 +177,7 @@ type
hostname*: string
cacheDir*: string
profileCacheTime*: int
+ defaultTheme*: string
proc contains*(thread: Chain; tweet: Tweet): bool =
thread.content.anyIt(it.id == tweet.id)
diff --git a/src/views/general.nim b/src/views/general.nim
index e0433aa..49f911a 100644
--- a/src/views/general.nim
+++ b/src/views/general.nim
@@ -29,7 +29,7 @@ proc renderNavbar*(title, rss: string; req: Request): VNode =
proc renderMain*(body: VNode; req: Request; cfg: Config; titleText=""; desc="";
rss=""; `type`="article"; video=""; images: seq[string] = @[]): string =
- let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg.hostname)
+ let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg)
let theme = "/css/themes/" & toLowerAscii(prefs.theme) & ".css"
let node = buildHtml(html(lang="en")):
head: