Awesome
Feedly theme for Tiny Tiny RSS
This is a theme for the popular self-hosted RSS reader Tiny Tiny RSS that provides a Feedly-inspired interface. Enjoy a clean, minimalist design that makes it easy to quickly scan and read your feeds.
For the best experience, please use a current browser.
Quick Start
- Download the theme or clone the dist branch
- Unzip and copy the extracted files to
[tt-rss-root]/themes.local
feedly*.css
and thefeedly
directory are needed to get all theme variantslocal-overrides.js
is optional, it provides polyfills for Safari and prepares utility views for mobile-friendly stylinglocal-overrides.css
is optional, but depends onlocal-overrides.js
to customize the utility views
- Go into your TT-RSS preferences and select the feedly theme.
- Install/activate recommended plugins
toggle_sidebar
for collapsing the feeds holder sidebar by clicking the left side of the screenclose_button
to allow closing article detail in split view, important for mobileshorten_expanded
to truncate long articles in combined view
Features
- A clean, minimalist design that's easy on the eyes
- Responsive layout that works great on mobile devices
- An additional cards view that's not available with the default theme
- Different color variants with light and dark modes to match your personal preferences
- High contrast variants for improved accessibility
- Customizable fonts and spacing by setting CSS variables via the Customize button
- Preferences theming and visual fixes
- Optional theming of the utility views (login, password recovery, share/subscribe bookmarklets, database update etc.)
- Support for various plugins
Configuration
There are different color variants available. If you choose the auto variants, your OS/browser will decide whether to use the light or dark color scheme.
You can configure the fonts and the UI spacing by using the Customize button in the TT-RSS settings and adding/adjusting this chunk of CSS code:
/* These are the default settings for feedly.css */
:root {
--base-spacing: 45px; /* works best with a value between 30px and 75px */
--font-size-post: 16px;
--fonts-ui: "Helvetica Neue", Arial, Helvetica, "Liberation Sans",
"Nimbus Sans L", FreeSans, sans-serif;
--fonts-content: var(--fonts-ui);
--fonts-heading: SansCn;
--fonts-mono: "Fira Code", Menlo, Monaco, Consolas, "Lucida Console",
"Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
"Courier New", monospace;
--reading-width: 45; /* use a unitless `em` value */
--card-max-column-count: 10;
--card-min-column-width: 300px;
}
For a more compact spacing, try using the following custom CSS:
:root {
--base-spacing: 30px;
--font-size-post: 14px;
}
Development
In order to generate the CSS files, you will need to have Node.js and NPM installed.
- Run
npm install
to install dependencies - Run
npm start
to watchsrc
and compile on changes - Run
npm run dist
to build, compress and copy all needed files todist
If you have a dist branch on your fork, the new content of thedist
directory will also be pushed to it
FAQ
Where are the CSS files? They used to be at the root level
CSS is now pushed to the dist branch. So now you can clone/download only the files that you need and don't need to check which files have to be copied for installation. Also, the main branch commit history stays clean so it's easier to track changes.
I don't want to copy the files every time – how do I stay up-to-date easily?
You can clone this repo and git checkout dist
in it. Then change to your TT-RSS installation's themes.local
directory and ln -s [path/to]/tt-rss-feedly-theme/* .
. To update, just git pull
in the theme's directory.
I followed the installation steps but I don't get all the new features
Please make sure that you don't have an old copy of this theme in the themes
directory of your TT-RSS installation. Third-party themes should go into the themes.local
directory, but files in the themes
directory will override any file with the same name in the themes.local
directory.
The theme looks broken
Please make sure to have the most recent version of TT-RSS installed (I test on TT-RSS git master). Also, make sure to use a supported browser in the most recent version. If it's still broken, you might have found a bug. Feel free to open an issue or create a PR.
Which browsers are supported?
This theme works best with Chromium-based browsers like Chrome, Brave, Edge, Vivaldi or Opera. Firefox and Safari are also supported but they're missing some minor features. On mobile devices, again, Chromium-based browsers on Android work best but Safari and other browsers on iOS should also work fine.
What about tablets?
Tablets are also supported, both iPads and Android. The theme detects touch devices and will show all controls that would only be revealed on hover when using a desktop/laptop with a mouse/trackpad.
Is there a way to quickly switch between light and night mode?
Yes, this theme is compatible with the toggle_night_mode plugin by ltGuillaume. If you selected either a regular or a night color variant, you can toggle back and forth by hitting a N
. If you want your OS/browser to control this, select an auto color variant.
Can I change the colors via custom CSS?
It's not possible via CSS variables because colors are processed at build time. You can checkout the main branch, edit _variables.less
and build your own version of the theme.
Why did you change the license?
I want this theme to have a proper, well-recognized license to make it clear and easy for others to use this code as source or part of their work. In contrast to the previously used WTFPL, the MIT license is very popular, permissive, short and clear. Please include the license with the copyright notice in any copy or fork.
Screenshots
This is a selection to give you an impression of what to expect.
Available color variants. Top: default night, default light, sepia night, sepia light
Bottom: high contrast, high contrast night, sepia contrast, sepia contrast night
Login in light mode, password recovery in dark mode on mobile
Combined view expanded with sepia color variant, mobile in night mode
Combined view, expand selected atricle only, grouped by feed, mobile in night mode
Split view, desktop in widescreen mode, mobile non-widescreen in night mode
Cards overview (enable grid, combined view, and expand selected article only) with high contrast variant
Cards detail (opens as a layer similar to Feedly) with sepia contrast color variant
Preferences on mobile: main, plugins, feeds, edit feed