[1] Dreamwidth Dark Mode

[lina_trinch]

❖ Low contrast ❖ Works with new & old site layout ❖ Easy installation & customization

code here!
github

installation ❖ Make sure to apply one of the "Tropospherical" site skin default styles under your display settings. ❖ Install the Stylus extension to your browser. [Chrome] [Firefox] [Opera] If you run into problems here, you can consult the wiki but feel free to ping me. ❖ Once installed, open the extension (on Chrome, you can click on the icon and click "Manage") and click on "Write New Style." Copy/Paste the code above into that code editor box. ❖ Make a title for it, click save, and make sure the box labelled "Enabled" is checked. troubleshooting ❖ Did nothing happen? Make sure the Stylus extension has full access to any site in your browser. ❖ Did nothing still happen? Look below the code editor box to the "Applies to" section. Make sure the dropdown is set to "URLs on the domain" and the domain is set to "dreamwidth.org." ❖ Find mistakes in the code? You can comment on this post or send in an issue on the github repository (if you're savvy like that). ❖ Did Dreamwidth have another code push? I'm probably already working on it but feel free to ping me about it until I do something. Any updates will be announced on plurk and via new releases on the github repo, so you can click on watch if you want (and if you're super duper savvy like that). ❖ Got suggestions to make it better? Tell me! This skin is mostly for accessibility so I'm all ears on the whole "making it better" thing. notes ❖ Custom styling on journal entries cannot be changed. Not without breaking other journal entries, anyway. ❖ Almost all icons have been replaced except for brands (Plurk, OpenID, etc) and some icons that just sort of went with the theme. ❖ All images have been dimmed and edited very slightly so as not to be suddenly jarring and overly bright upon view. customization ❖ You'll see a portion called the ":root" at the top of the code. Like many of my layouts, you can change something in this that will change it for the entire code. For example, if you want all links to be pink, change the hex code in "--link:" to something like "hotpink." Feel free to play with these to your hearts content. Here's what each of them does: Click here to see all of the variables! Colors --background: The main background color. --dimBackground: Slightly dimmer background color used in modals, headers, etc. --text: Color of most of the text. --input: Background color of all inputs (textareas, inputs, buttons, etc). --headers: Text color of most headers (h1, h2, etc), lighter than --text. --link: The main color for links. --visited: The color of links that have been visited, slightly darker than --link. --hover: The color of links when the cursor hovers over them, slightly lighter than --link. --lightAccent: Much lighter than --background, used on menus and some headers. --darkAccent: Much darker than --background, used on some breaks and borders. Font --headerFont: The font of the header title "DreamWidth." If you want something fancy, you can look for something on Google Fonts and replace the "@import" portion at the top of code with your new font's import before adding it to --headerFont. Icons All icons are from icons8. --userIcon: User image beside almost all usernames of normal accounts. Image is now a comet. --communityIcon: World image used beside all community names. Image is still a globe. --staffIcon: Swirl image used beside all staff usernames. Image is now a globe with latitude/longitude lines. --anonIcon: User image beside the option to reply to comments anonymously. Image resembles a thief with a little mask because he's sneakysneaky. --editIcon: Pencil image to edit comments/entries. Image is now pencil editing a webpage or book. --editTagIcon: Price tag image to edit tags on entries. Now a little price tag with a + symbol. --addMemoryIcon: Heart image to-... I actually don't know what this does. Archive's entries? Anyway, it's still a couple of hearts. --shareIcon: Mail image to send an entry post to someone. Still an image of an envelope. --trackIcon: Bell image to track entries/threads. Still a bell. --stopTrackIcon: Bell image with a slash to stop tracking entries/threads. Still a bell with a slash but also rotated to differentiate it better from --trackIcon. --addTagsIcon: Plus symbol on entries to quickly add tags. Still a + symbol. --deleteIcon: X image for deleting posts and other things. Still an X. --screenIcon: Unlit lightbulb image to hide comments from public view. Still an off lightbulb. --unscreenIcon: Lit lightbulb image to show screened comments to the public. Still a lit lightbulb. --freezeIcon: Pause image to freeze/stop the editing and replying to comments/threads. Still a pause image. --skin-accessIcon: Key image to access journals. Still a key image. Greys out when disabled. --skin-subscribeIcon: Open book with plus sign to subscribe to a journal. Changed to bookmark. Greys out when disabled. --skin-postIcon: Open book with pencil to create a post. Changed to open book. Greys out when disabled. --skin-pmIcon: User with envelope icon to DM someone. Changed to envelope. Greys out when disabled. --skin-searchIcon: Magnifying glass to search someone's journal. Still a magnifying glass. Greys out when disabled. --skin-upgradeIcon: Shopping cart icon to buy someone paid time. Still a shopping cart. Greys out when disabled. --coloredListDot: Swirl images beside items on the menu below the header. Still a swirl but blue. --bwListDot: Same as above but turns into a black/white image on hover (on the old dw site style). --arrowDown: In journal preferences, an arrow to hide properties beneath a header. --arrowRight: Same as above but this arrow indicates that content can be shown. closing ❖ That should be everything. If you have any problems or questions, please hit me up. Thanks, folks. Now here's a shameless plug!

Comments

[lina_trinch]

Awesome! I'm glad to hear it's help to you. ♥