{"id":26179057,"url":"https://github.com/atomjoy/css","last_synced_at":"2026-04-24T19:33:51.419Z","repository":{"id":279401845,"uuid":"938692187","full_name":"atomjoy/css","owner":"atomjoy","description":"Css dark mode theme.","archived":false,"fork":false,"pushed_at":"2025-03-03T14:04:53.000Z","size":105,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T21:48:44.236Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/atomjoy/css","language":"CSS","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/atomjoy.png","metadata":{"files":{"readme":"README.md","changelog":"ChangeColor.vue","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-25T10:56:58.000Z","updated_at":"2025-03-03T14:05:30.000Z","dependencies_parsed_at":"2025-02-25T11:49:59.164Z","dependency_job_id":null,"html_url":"https://github.com/atomjoy/css","commit_stats":null,"previous_names":["atomjoy/css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/atomjoy/css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomjoy","download_url":"https://codeload.github.com/atomjoy/css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32238630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2025-03-11T21:48:48.225Z","updated_at":"2026-04-24T19:33:51.403Z","avatar_url":"https://github.com/atomjoy.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Css dark mode theme\nCss styles ...\n\n## Import\n\n```css\n@import url('@/assets/css/root.css');\n```\n\n## Black white theme \n\n```\n@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900\u0026display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800\u0026display=swap');\n@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800\u0026display=swap');\n\n:root {\n\t/* White */\n\t--w-accent-1: #0075ff;\n\t--w-accent-2: #0045cc;\n\t--w-accent-3: #0075ff11;\n\t--w-bg-1: #ffffff;\n\t--w-bg-2: #fbfbfb;\n\t--w-bg-3: #f3f3f3;\n\t--w-text-1: #0a0a0a;\n\t--w-text-2: #909090;\n\t--w-text-3: #b0b0b0;\n\t--w-border: #e5e5e5; /* #cccecd */\n\t--w-holder: #969696;\n\t--b-disabled: #999999;\n\t--w-scroll-bg: #f5f5f5;\n\t--w-scroll-th: #dcdcdc;\n\t--w-label: #707070;\n\t--w-input: #fcfcfc;\n\t--w-icon: #cccccc;\n\t--w-red: #cd3310;\n\t--w-green: #258c60;\n\t--w-selection: #ffffff;\n\t--w-selection-bg: #0e7aff;\n\t--w-alert: #ff303c;\n\n\t/* Black */\n\t--b-accent-1: #0075ff;\n\t--b-accent-2: #0045cc;\n\t--w-accent-3: #0075ff11;\n\t--b-bg-1: #1c1c1c;\n\t--b-bg-2: #1f1f1f;\n\t--b-bg-3: #f7f7f7;\n\t--b-text-1: #e8e8e8;\n\t--b-text-2: #7e7e7e;\n\t--b-text-3: #797979;\n\t--b-border: #2c2c2c;\n\t--b-holder: #969696;\n\t--b-disabled: #999999;\n\t--b-scroll-bg: #242424;\n\t--b-scroll-th: #3a3a3a;\n\t--b-label: #606060;\n\t--b-input: #1f1f1f;\n\t--b-icon: #4c4c4c;\n\t--b-red: #cd3310;\n\t--b-green: #258c60;\n\t--b-selection: #ffffff;\n\t--b-selection-bg: #0e7aff;\n\t--b-alert: #ff303c;\n}\n\n:root {\n\tcolor-scheme: light;\n\t--bg-1: var(--w-bg-1);\n\t--bg-2: var(--w-bg-2);\n\t--bg-3: var(--w-bg-3);\n\t--text-1: var(--w-text-1);\n\t--text-2: var(--w-text-2);\n\t--text-3: var(--w-text-3);\n\t--icon-1: var(--w-icon);\n\t--icon-2: var(--w-icon);\n\t--icon-3: var(--w-icon);\n\t--accent: var(--w-accent-1);\n\t--accent-hover: var(--w-accent-2);\n\t--disabled: var(--w-disabled);\n\t--border: var(--w-border);\n\t--divider: var(--w-border);\n\t--placeholder: var(--w-holder);\n\t--selection-color: var(--w-selection);\n\t--selection-bg: var(--w-selection-bg);\n\t--scrollbar-bg: var(--w-scroll-bg);\n\t--scrollbar-thumb: var(--w-scroll-th);\n\t--scrollbar-width: 8px;\n\t--logo: url('/default/logo/logo-light.png');\n\t--input-font-family: var(--font-family);\n\t--input-radius: 10px;\n\t--input-font-size: 16px;\n\t--input-icon: var(--w-icon);\n\t--input-holder: var(--w-holder);\n\t--input-label: var(--w-label);\n\t--input-border: var(--w-border);\n\t--input-shadow: var(--w-accent-3);\n\t--input-bg: var(--w-input);\n\t--column: var(--w-label);\n\t--button-bg: var(--w-accent-1);\n\t--button-color: var(--w-text-1);\n\t--button-border: var(--w-accent-2);\n\t--button-radius: 10px;\n\t--alert: var(--w-alert);\n}\n\n/* color mode from browser settings */\n@media (prefers-color-scheme: dark) {\n\t:root {\n\t\tcolor-scheme: dark;\n\t\t--bg-1: var(--b-bg-1);\n\t\t--bg-2: var(--b-bg-2);\n\t\t--bg-3: var(--b-bg-3);\n\t\t--text-1: var(--b-text-1);\n\t\t--text-2: var(--b-text-2);\n\t\t--text-3: var(--b-text-3);\n\t\t--icon-1: var(--b-icon);\n\t\t--icon-2: var(--b-icon);\n\t\t--icon-3: var(--b-icon);\n\t\t--accent: var(--b-accent-1);\n\t\t--accent-hover: var(--b-accent-2);\n\t\t--disabled: var(--b-disabled);\n\t\t--border: var(--b-border);\n\t\t--divider: var(--b-border);\n\t\t--placeholder: var(--b-holder);\n\t\t--selection-color: var(--b-selection);\n\t\t--selection-bg: var(--b-selection-bg);\n\t\t--scrollbar-bg: var(--b-scroll-bg);\n\t\t--scrollbar-thumb: var(--b-scroll-th);\n\t\t--scrollbar-width: 8px;\n\t\t--logo: url('/default/logo/logo-dark.png');\n\t\t--input-font-family: var(--font-family);\n\t\t--input-radius: 10px;\n\t\t--input-font-size: 16px;\n\t\t--input-icon: var(--b-icon);\n\t\t--input-holder: var(--b-holder);\n\t\t--input-label: var(--b-label);\n\t\t--input-border: var(--b-border);\n\t\t--input-shadow: var(--b-accent-3);\n\t\t--input-bg: var(--b-input);\n\t\t--column: var(--b-label);\n\t\t--button-bg: var(--b-accent-1);\n\t\t--button-color: var(--b-text-1);\n\t\t--button-border: var(--b-accent-2);\n\t\t--button-radius: 10px;\n\t\t--alert: var(--b-alert);\n\t}\n}\n\n/* color mode from \u003chtml color-scheme=\"light\"\u003e */\n[color-scheme='light'] {\n\tcolor-scheme: light;\n\t--bg-1: var(--w-bg-1);\n\t--bg-2: var(--w-bg-2);\n\t--bg-3: var(--w-bg-3);\n\t--text-1: var(--w-text-1);\n\t--text-2: var(--w-text-2);\n\t--text-3: var(--w-text-3);\n\t--icon-1: var(--w-icon);\n\t--icon-2: var(--w-icon);\n\t--icon-3: var(--w-icon);\n\t--accent: var(--w-accent-1);\n\t--accent-hover: var(--w-accent-2);\n\t--disabled: var(--w-disabled);\n\t--border: var(--w-border);\n\t--divider: var(--w-border);\n\t--placeholder: var(--w-holder);\n\t--selection-color: var(--w-selection);\n\t--selection-bg: var(--w-selection-bg);\n\t--scrollbar-bg: var(--w-scroll-bg);\n\t--scrollbar-thumb: var(--w-scroll-th);\n\t--scrollbar-width: 8px;\n\t--logo: url('/default/logo/logo-light.png');\n\t--input-font-family: var(--font-family);\n\t--input-radius: 10px;\n\t--input-font-size: 16px;\n\t--input-icon: var(--w-icon);\n\t--input-holder: var(--w-holder);\n\t--input-label: var(--w-label);\n\t--input-border: var(--w-border);\n\t--input-shadow: var(--w-accent-3);\n\t--input-bg: var(--w-input);\n\t--column: var(--w-label);\n\t--button-bg: var(--w-accent-1);\n\t--button-color: var(--w-text-1);\n\t--button-border: var(--w-accent-2);\n\t--button-radius: 10px;\n\t--alert: var(--w-alert);\n}\n\n/* color mode from \u003chtml color-scheme=\"dark\"\u003e */\n[color-scheme='dark'] {\n\tcolor-scheme: dark;\n\t--bg-1: var(--b-bg-1);\n\t--bg-2: var(--b-bg-2);\n\t--bg-3: var(--b-bg-3);\n\t--text-1: var(--b-text-1);\n\t--text-2: var(--b-text-2);\n\t--text-3: var(--b-text-3);\n\t--icon-1: var(--b-icon);\n\t--icon-2: var(--b-icon);\n\t--icon-3: var(--b-icon);\n\t--accent: var(--b-accent-1);\n\t--accent-hover: var(--b-accent-2);\n\t--disabled: var(--b-disabled);\n\t--border: var(--b-border);\n\t--divider: var(--b-border);\n\t--placeholder: var(--b-holder);\n\t--selection-color: var(--b-selection);\n\t--selection-bg: var(--b-selection-bg);\n\t--scrollbar-bg: var(--b-scroll-bg);\n\t--scrollbar-thumb: var(--b-scroll-th);\n\t--scrollbar-width: 8px;\n\t--logo: url('/default/logo/logo-dark.png');\n\t--input-font-family: var(--font-family);\n\t--input-radius: 10px;\n\t--input-font-size: 16px;\n\t--input-icon: var(--b-icon);\n\t--input-holder: var(--b-holder);\n\t--input-label: var(--b-label);\n\t--input-border: var(--b-border);\n\t--input-shadow: var(--b-accent-3);\n\t--input-bg: var(--b-input);\n\t--column: var(--b-label);\n\t--button-bg: var(--b-accent-1);\n\t--button-color: var(--b-text-1);\n\t--button-border: var(--b-accent-2);\n\t--button-radius: 10px;\n\t--alert: var(--b-alert);\n}\n\n/* page */\n:root {\n\t--font-family: 'Poppins', Arial, Helvetica, sans-serif;\n\t--font-family-code: 'JetBrains Mono', 'Fira Code', monospace;\n\t--font-size: 16px;\n\t--border-radius: 6px;\n\t--button-border-radius: 10px;\n\t--gap: 20px;\n\n\t/* alert error */\n\t--alert-error: #fe093a;\n\t--alert-error-bg: linear-gradient(to right, #fe093a15, #fe093a06);\n\n\t/* alert ok */\n\t--alert-info: #00b13f;\n\t--alert-info-bg: linear-gradient(to right, #00b13f15, #00b13f06);\n}\n\n* {\n\toutline: 0px none transparent;\n\tbox-sizing: border-box;\n\ttext-decoration: none;\n}\n\n::before,\n::after {\n\tbox-sizing: border-box;\n\tcontent: none;\n}\n\n::placeholder {\n\tcolor: var(--placeholder-1);\n\topacity: 1;\n}\n\n::selection {\n\tbackground: var(--selection-bg);\n\tcolor: var(--selection-color);\n}\n\n#app {\n\toverflow: hidden;\n\tpadding: 0px;\n\tmargin: 0px;\n}\n\nhtml,\nbody {\n\tmargin: 0px;\n\tpadding: 0px;\n\tmin-height: 100vh;\n\tfont-size: var(--font-size);\n\tfont-family: var(--font-family);\n\tbackground: var(--bg-1);\n\ttransition: all 0.5s;\n}\n\nhtml {\n\toverflow-y: scroll;\n}\n\niframe {\n\tcolor-scheme: light !important;\n}\n\np {\n\tfont-family: var(--font-family);\n}\n\nimg,\nsvg {\n\tdisplay: inline-block;\n\tmax-width: 100%;\n}\n\n/* panel scrollbar */\n.scrollbar-thin {\n\tscrollbar-width: thin;\n\tscrollbar-color: var(--w-accent-1) var(--scrollbar-bg);\n}\n\n.scrollbar-thin::-webkit-scrollbar {\n\twidth: var(--scrollbar-width);\n\tbackground: var(--w-accent-1);\n}\n\n.scrollbar-thin::-webkit-scrollbar-thumb {\n\tbackground: var(--scrollbar-bg);\n}\n\n/* navbar scrollbar */\n.scrollbar-navbar {\n\tscrollbar-width: thin;\n\tscrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);\n}\n\n.scrollbar-navbar::-webkit-scrollbar {\n\twidth: var(--scrollbar-width);\n\tbackground: var(--scrollbar-thumb);\n}\n\n.scrollbar-navbar::-webkit-scrollbar-thumb {\n\tbackground: var(--scrollbar-bg);\n}\n\n/* page sections */\n.section {\n\tfloat: left;\n\twidth: 100%;\n\tmin-height: 100vh;\n\tposition: relative;\n}\n\n.section-center {\n\tmargin: 0px auto;\n\theight: auto;\n\twidth: 90%;\n\tmax-width: 1120px;\n}\n\n/* logo */\nimg.logo {\n\tcontent: var(--logo);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomjoy%2Fcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomjoy%2Fcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomjoy%2Fcss/lists"}