Dark theme updates

[wbagdon]

Dark theme is looking great with the new flat theme and icons!

Obviously this is still a work in progress, but I just wanted to point out some bugs/quirks as I see them during the development.
As of 1e3a53c037:

• Rows are white again, background needs to be reset to bg-main

body.ttrss_main .hl {
    background-color: var(–bg-main);
}

• Links and hovered links could stand to be brighter:
  • #81CFE0 and #ADD8E6 suggested based on http://colorsafe.co/
• Splitter would look better in bg-panel color:

body.flat.ttrss_main.ttrss_index #feeds-holder_splitter {
   border-color: var(--bg-panel);
   background: var(--bg-panel);
}

body.flat.ttrss_main.ttrss_index #feeds-holder {
   box-shadow: none;
}

.flat .dijitSplitterV .dijitSplitterThumb {
   background: repeating-linear-gradient(to right, #ccc, #ccc 1px, #333 1px, #333 2px);
   width: 3px;
}

.flat .dijitSplitterV {
   width: 7px;
}

• Edit feed dropdowns have black backgrounds which is hard to read (not sure if you plan on leaving this white or converting the whole pop-up to dark
• Edit feed favicon upload button doesn’t look like a button

Again, I’m aware this is a customizable theme, so take or leave anything I say, just a suggestion.

[fox]

i’m trying to rebuild base theme with dark colors and rebase night.css on that, here’s how it looks like atm:

if this works out, significantly less hacks would be needed in night.css and it should also work in preferences and for dialogs

[fox]

this is definitely not complete yet but should be way better than before:

https://git.tt-rss.org/fox/tt-rss/commit/b78671356031f2f7d4c3340d2d955a306729f766

suggestions welcome

also: way less hacks

[wbagdon]

Nice!

The top buttons and attachment button could use some consistency

The “Choose file” button as well:

The edit feed checkboxes are tough to understand what’s going on since the background is the same as the disabled check box:

Changing the backgrounds to #222 seems to clear it up and looks clean/flat:

[wbagdon]

I also think it makes sense to make the splitter have the same bg color as the panels (the thumb should be enough to show it can dragged)

.flat .dijitSplitterV .dijitSplitterThumb {
    background: repeating-linear-gradient(to right, #ccc, #ccc 1px, #222 1px, #222 2px);
    width: 3px;
}

.flat .dijitSplitterV {
    width: 7px;
    background-color: #222;
}

body.flat.ttrss_main.ttrss_index #feeds-holder {
    box-shadow: none;
}

[disconn3ct]

Is there a simple way to disable the image darkening?

[wbagdon]

@disconn3ct add this to the custom css in your prefs:

body.flat.ttrss_main .post .content img:not(:hover) {
    opacity: 1;
    filter: none;
}

[fox]

thanks for the feedback on this, @wbagdon

[disconn3ct]

@wbagdon

body.flat.ttrss_main .post .content img:not(:hover) { opacity: 1; filter: none; }

Thanks! That got me on the right track. Inspecting it looks like the image was under .cdm. I updated to this and it’s great (in case anyone else wants the change)

body.flat.ttrss_main .post .content img:not(:hover),
body.flat.ttrss_main .cdm .content-inner img:not(:hover),
body.flat.ttrss_main .post .content video:not(:hover),
body.flat.ttrss_main .cdm .content-inner video:not(:hover) {
    opacity: 1;
    filter: none;
}

[pcause1]

fox: new dark themere is looking good. any thought to upgrading the android app dark theme as well?

[fox]

what would you want upgraded?

[wbagdon]

Would it be possible to go back to using variables to define colors in CSS?
Or is there some easy way for me to be able to modify one variable to change colors.
I prefer the old blue to the new orange, and I’m trying to just augment your theme rather than creating a completely separate one.

Also the new CodeFlask CSS editor does not show any cursor or selection in the night theme.

[fox]

@wbagdon

Would it be possible to go back to using variables to define colors in CSS?

there are variables, you just have to use less to adjust them properly

@wbagdon

I prefer the old blue to the new orange, and I’m trying to just augment your theme rather than creating a completely separate one.

oh, you’ll also need to rebuild dijit dark theme then, that’ll need some npm cancer like grunt and stylus

if there’s more people who want it, i can make two dark themes - blue and amber, i have all this crap installed already anyway

although i’m not sure how would night mode switch work then

@wbagdon

Also the new CodeFlask CSS editor does not show any cursor or selection in the night theme.

yeah, i’m aware of this; there’s no stock dark theme for it i think. maybe i could filter invert it.
this needs fixing sure

e: https://git.tt-rss.org/fox/tt-rss/commit/6c9509ebae43a10b54c838ed7b027e4288a4c3b5 eh

[fox]

update re: codeflask

so much shit is hardcoded in there and it’s in general so flaky, i don’t think it’s worth keeping it
reverting

[wbagdon]

@fox

update re: codeflask

so much shit is hardcoded in there and it’s in general so flaky, i don’t think it’s worth keeping it
reverting

Maybe use ace-editor? https://ace.c9.io/

although i’m not sure how would night mode switch work then

Would you want an “accent color picker” implemented in the prefs?
I could take this on if you think it would be a worthwhile addition.

[fox]

@wbagdon

Would you want an “accent color picker” implemented in the prefs?

what like custom accents? i don’t really see how that could work, unfortunately.

@wbagdon

Maybe use ace-editor? https://ace.c9.io/

i’ll take a look but in all honesty css editor is such a minor thing, dragging even more third party stuff for it doesn’t seem worth it. codeflask is really tiny, that’s why i initially added it.

e: https://git.tt-rss.org/fox/dijit-flat-ttrss just take a look at this pile of code

[wbagdon]

Re: css editor, completely agree.

Re: Custom accents, my idea was to go back to using CSS custom properties with fallback values and override via user preference:

Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN

Obviously this won’t work for IE users, not sure if that’s the reason you abandoned it in the first place.
If that’s the case, then yes there probably is no easy way to do this other than generating the CSS on the fly to override all the instances of accent colors which is probably a horrible idea.

[fox]

@wbagdon

my idea was to go back to using CSS custom properties with fallback values and override via user preference:

take a look at the dijit theme, it’s used for the entire UI, and its entirely hardcoded with predefined colors

i’ve stopped using css variables in night.css because i converted it to LESS and it can use default.less variables directly when it is being rebuilt, which means way less theme-specific overrides

i.e. it’s a lot easier to change @color-panel-bg in theme once than adding multiple stanzas for it

also, phpstorm builds css files for me transparently when i edit less files

e: also, i don’t think css variables support stuff like lighten()

[pcause1]

I am using the dark theme updated this morning and the latest firefox nightly on Win10. My view is set to “Unread” and when I click the check marks next to the feed title to mark the feed read, the items are marked read but still visible. since i am in a “Unread” view they should no longer be visible, correct? This was the previous behavior.

I do have “hide feeds with no unread articles checked”. I am in combined feed display.

EDIT: Just tried in Chrome and same behavior

[fox]

@pcause1

since i am in a “Unread” view they should no longer be visible, correct? This was the previous behavior.

this was never a thing

not until you reload the feed