Zen Internet themes repository

+ =

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... Check rule 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 ..... 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. (-google.com.css). example

11. [optional] Each comment of the same file should have a unique domain specific identified prefix (yt- ytm- gh- ...) which will help the browser to 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 coying over from the userContent.css (remove @-moz-document domain(" ") )

14. Once comitted to the repository, github actions will parse the css file and update/ generate the styles.js and then will be deployed to the github pages allowing the add-on to fetch from 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 anyways.

      /* 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;
      }
    

Thank you <3

Browse the repository

Visit my website