{"id":13820291,"url":"https://github.com/Pocket-titan/DarkMode","last_synced_at":"2025-05-16T07:33:48.580Z","repository":{"id":37274691,"uuid":"301163836","full_name":"Pocket-titan/DarkMode","owner":"Pocket-titan","description":"Dark mode for Pluto 🎉","archived":false,"fork":false,"pushed_at":"2021-02-03T12:55:02.000Z","size":27,"stargazers_count":80,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T03:44:56.488Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Julia","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pocket-titan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-04T15:37:42.000Z","updated_at":"2024-09-27T08:40:08.000Z","dependencies_parsed_at":"2022-09-06T13:21:19.424Z","dependency_job_id":null,"html_url":"https://github.com/Pocket-titan/DarkMode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pocket-titan%2FDarkMode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pocket-titan%2FDarkMode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pocket-titan%2FDarkMode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pocket-titan%2FDarkMode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pocket-titan","download_url":"https://codeload.github.com/Pocket-titan/DarkMode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254488720,"owners_count":22079485,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T08:01:00.968Z","updated_at":"2025-05-16T07:33:46.714Z","avatar_url":"https://github.com/Pocket-titan.png","language":"Julia","funding_links":[],"categories":["Programming Languages"],"sub_categories":["Julia"],"readme":"# DarkMode\nDark mode for Pluto 🎉\n\nNOTE: This is a work in progress, feel free to make a PR if you see any badly visible colors which I missed! You can experiment by using your browser console (`Ctrl+Shift+I` or `Cmd+Alt+I`), selecting elements \u0026 manually adding style rules, which you can put into a `html\"\u003cstyle\u003e $css_rules_go_here \u003c/style\u003e\"` to always enable them in your notebook. Please make a PR if you find any! The colors themselves don't really matter, just make sure it's legible. This way we can sort of crowdsource the workload :)\n\n### Update: this gif is outdated, see code below!\n![How to use](https://user-images.githubusercontent.com/4435990/95021467-76416380-0671-11eb-88a5-8c3bfd23a530.gif)\n\nAdd this cell to your Pluto notebook:\n```julia\nbegin\n    import Pkg\n    Pkg.add(PackageSpec(url=\"https://github.com/Pocket-titan/DarkMode\"))\n    import DarkMode\n    DarkMode.enable()\n    # OR DarkMode.Toolbox(theme=\"default\")\nend\n```\nor install the package from the julia commandline using `] add https://github.com/Pocket-titan/DarkMode`, and then import it in Pluto using `import DarkMode`.\n\n`DarkMode.enable` optionally takes a `theme` argument (which is the name of a codemirror theme), and a `cm_config` `Dict` allowing you to provide custom CodeMirror options. Like this:\n```julia\nDarkMode.enable(theme=\"monokai\", cm_config=Dict(\"tabSize\" =\u003e 2))\n```\nSee the function signature in the Pluto docs (type `?DarkMode.enable` or click on the `enable` call) for more info.\nFor a list of all available CodeMirror themes, see [here](https://codemirror.net/theme/). For a list of all CodeMirror options, see [here](https://codemirror.net/doc/manual.html#config).\n\nNOTE: if you remove the `DarkMode.enable()` call, you have to refresh your page in order to go back to the light theme.\n\n---\n### CSS Dark Mode\n\nA CSS Mode is provided on top of `DarkMode.enable()`. \n\nYou can enable CSS mode typing `DarkMode.CSSDarkMode(\"zenburn\")` (where \"zenburn\" is a theme, from the same theme list). Optionally, you can pass a keyword argument to darken Pluto, like this: `DarkMode.CSSDarkMode(\"zenburn\", darkenPluto=true)`.\n\n### Pluto Opt-Ins\n\n`DarkMode.Toolbox()` provides a set of opt-in utilities, if you want them.\n\n- `PresentationMode()` is the familiar to many presentation mode. Use it to add the arrows bottom right\n- `Ligatures()` optionally activates ligatures.\n- `WidthOverDocs()` activates a bigger width for the editor, while hiding LiveDocs\n\nPass a boolean argument if you want the feature enabled the next time you open your notebook.\n\nYou can also pass defaults to the `DarkMode.Toolbox()` using keyword arguments.\n\nSignature is the following: \n```\nDarkMode.Toolbox(ligatures=false,\n\t\tpresentation=false,\n\t\ttheme=\"lucario\",\n\t\tdarkenPluto=false,\n\t\twidth=\"normal\")\n```\n\n(use `width = \"wide\"` to enable `WideOverDocs()`)\n\n#### Quickstart for CSS Dark Mode \u0026 Opt-Ins is the following:\n\n```\nbegin\n    import Pkg\n    Pkg.add(url=\"https://github.com/pankgeorg/DarkMode\")\n    import DarkMode\n    DarkMode.Toolbox(theme=\"lucario\")\nend\n```\n\n### Limitations/Caveats\n\n1. Some themes may not play well with live docs code (some classes are missing, but you can test using the arrows on the dropdown!)\n2. CSSDarkMode's default is *not* to darken the whole UI but only `code` blocks! Pass `darkenPluto=true` to get a really dark Pluto!\n3. Please use each Opt-in once in each notebook!\n4. Wide mode hides docs (what will probably change in the future)\n\n### Next steps\n\n- Make this a toolbar?\n- Integrate parts in Pluto?\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPocket-titan%2FDarkMode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPocket-titan%2FDarkMode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPocket-titan%2FDarkMode/lists"}