Zen Internet themes repository

+ =

Now also provides themes for Zero Browser

Custom CSS for websites to make the internet beautiful. Transparency being the main feature, these themes also include removal of distractions and further useful features for each website.

How to get transparency in Zen

Contributors

Contributing styles

Please make sure you go through all the provided instructions before submitting a new theme with a PR

1. You can use the example.com.css as a starter for most websites to grab the stylesheet format.

2. Make sure the file is named in the correct format [website domain].css (google.com.css and docs.google.com.css are 2 styles which are not merged unless you do #9.)

3. Please respect auto theming for day and night themes. If the website does not have a dark theme, account for Dark Reader.

4. Do not use wildcards such as applying transparency for all div elements since that is handled with force theming in the addon.

5. Every property should include !important to make sure it gets applied.

6. Do NOT leave commented out code. Now you can, but still DO NOT! But you can add descriptive comments... see #15.

7. Don't include www in the stylesheet file name.

8. Add proper comments for each section of a feature at the beginning with a clear but compact description.

9. For theming similar domains like app.arduino.cc, login.arduino.cc... i.e., similar urls with prefixes, you can add a "general style" with a leading + symbol when creating the stylesheet. ( +arduino.cc.css ) example

10. Similarly, for theming websites with a shared domain but with different suffixes (like google.com, google.lk...), you can add the - symbol to the start of the stylesheet file name so it will replace the provided domain of the file name's domain. (e..g, -google.com.css). example

11. [optional] Each comment of the same file should have a unique domain specific identified prefix (yt-, ytm-, gh-, etc) which will help the extension separately apply themes.

    /* yt-transparency */
    :root {
      --colorBgApp: transparent !important;
    }
    
    /* yt-no footer */
    footer.app-footer {
      display: none !important;
    }

12. Always make sure the first feature is transparency and also use the exact feature name without a difference allowing the global transparency toggle to work. Prefixes with - are acceptable.

13. Don't keep the Firefox selectors if you are copying from the userContent.css (i.e., remove @-moz-document domain(" ")).

14. Once committed to the repository, GitHub Actions will parse the CSS file and regenerate the styles.json file; then it will be deployed to GitHub pages, allowing the addon to fetch it.

15. [NEW!] Now you can add descriptive comments to the CSS file which will be skipped during parsing and generating the styles.json file. BUT, make sure to start those CSS comment text with the @ symbol as below examples. BUT, any comment inside a feature in the CSS selectors or in properties will be skipped anyway.

    /* yt-transparency */
    /* @this comment will be skipped */
    :root {
      --colorBgApp: transparent !important;
      /* @ this comment will be skipped, but leaving it will cause no harm */
      /* This will be skipped */
    }
    
    /* @ this comment will be skipped */
    /* yt-no footer */
    footer.app-footer, /* This will be skipped */
      footer {
      display: none !important;
    }

16. Website mapping. Use the css-mapping.json to map existing CSS styles to other websites. Also can be used for websites that works well with forcing.

17. You can add feature descriptions by separating the title and the rest of the text inside a feature comment by separating it with $. Check example.com.css for the samples.

    /* darkreader $ This is a example description */
    :root {
      --darkreader-background-ffffff: transparent !important;
    }

    This will show up like below while hovering the feature title.

Thank you <3

Browse the repository

Visit my website