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.
- Download the theme or clone the dist branch
- Unzip and copy the extracted files to
[tt-rss-root]/themes.localfeedly*.cssand thefeedlydirectory are needed to get all theme variantslocal-overrides.jsis optional, it provides polyfills for Safari and prepares utility views for mobile-friendly stylinglocal-overrides.cssis optional, but depends onlocal-overrides.jsto customize the utility views
- Go into your TT-RSS preferences and select the feedly theme.
- Install/activate recommended plugins
toggle_sidebarfor collapsing the feeds holder sidebar by clicking the left side of the screenclose_buttonto allow closing article detail in split view, important for mobileshorten_expandedto truncate long articles in combined view
- 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
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;
}In order to generate the CSS files, you will need to have Node.js and NPM installed.
- Run
npm installto install dependencies - Run
npm startto watchsrcand compile on changes - Run
npm run distto build, compress and copy all needed files todist
If you have a dist branch on your fork, the new content of thedistdirectory will also be pushed to it
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent