Theming websites - overiding with css

css are styling elements of a html page, allmost all websites have fancy elements which are results of this.

websites are themed by defining custom css and making them override the original.

2 commons ways to do this,

• using plugins or addons
• defining in userContent.css

Using Plugins - stylish, stylus

• finding styles and applying on the fly with inline check

• user freedom to customize styles (depends on the creator), css in this repo allows user to choose 3 colors (foreground, background and outline) stylish plugin replaces syntax /*[[color]]*/ with appropirate label [more]

Defining in userContent.css (specific for firefox)

[guide] along with chrome/userChrome.css (not necessary for this particular purpose) create a file chrome/userContent.css

when variables are defined in userContent.css it effects globally

:root {
    --background: #000000;
    --foreground: #b7e0b6;
    --outline: #809c7f;
}

instead of explicitly choosing colors for each website styles, using variables like background: var(--background) !important; in all styles will use colors defined in userContent.css (uniform theme among different websites)

css in styles plugin along with appropriate namespace eg: @-moz-document domain("duckduckgo.com") can be copied to userContent.css directly so external plugin is no longer needed.

Screenshots

(images will redirect to userstyles.org)

Notes

• when using 'inspect element' try to find inherited parts so effects are throughout instead of defining in this element {..} unless that's what you're intended.

• good intro about css noob-friendly guide from mozilla