{"id":22220331,"url":"https://github.com/yvescoding/docz-theme-magic-scroll","last_synced_at":"2025-03-25T07:41:09.672Z","repository":{"id":57214401,"uuid":"186986902","full_name":"YvesCoding/docz-theme-magic-scroll","owner":"YvesCoding","description":"The magic-scroll theme of docz","archived":false,"fork":false,"pushed_at":"2019-06-02T11:34:35.000Z","size":450,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-07T09:37:13.194Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YvesCoding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-16T08:36:04.000Z","updated_at":"2019-06-02T11:34:37.000Z","dependencies_parsed_at":"2022-08-26T13:41:37.648Z","dependency_job_id":null,"html_url":"https://github.com/YvesCoding/docz-theme-magic-scroll","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/YvesCoding%2Fdocz-theme-magic-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YvesCoding%2Fdocz-theme-magic-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YvesCoding%2Fdocz-theme-magic-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YvesCoding%2Fdocz-theme-magic-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YvesCoding","download_url":"https://codeload.github.com/YvesCoding/docz-theme-magic-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245422921,"owners_count":20612725,"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-12-02T23:08:13.895Z","updated_at":"2025-03-25T07:41:09.636Z","avatar_url":"https://github.com/YvesCoding.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# docz-theme-default\n\nDefault theme for [docz](https://docz.site)\n\n![](https://cdn-std.dprcdn.net/files/acc_649651/xZt5zr)\n\n## Dark Mode\n\nTo change your project to use a darker version of default theme, just set your `doczrc.js` like that:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    mode: 'dark',\n  },\n}\n```\n\n## Changing your logo\n\nUse your own logo by changing the `logo` property:\n\n```js\n// doczrc.js\nexport default {\n  themeConfig: {\n    logo: {\n      src: '/path/of/my/logo',\n      width: 150,\n    },\n  },\n}\n```\n\n## Changing playground theme\n\nIf you want to customize `\u003cPlayground\u003e` theme, you just need to import the css of your [codemirror theme](https://codemirror.net/theme/) and change the `codemirrorTheme` to use your theme. One of ways to import a new css without pain, is add new link on `htmlContext`:\n\n```js\n// doczrc.js\nexport default {\n  htmlContext: {\n    head: {\n      links: [\n        {\n          rel: 'stylesheet',\n          href: 'https://codemirror.net/theme/dracula.css',\n        },\n      ],\n    },\n  },\n  themeConfig: {\n    codemirrorTheme: 'dracula',\n  },\n}\n```\n\n## Default `themeConfig`\n\nAs explained on [Customizing](https://www.docz.site/introduction/customizing) section of docz website, you can customize the theme that you're using by changing `themeConfig` property on your `doczrc.js`. So, each theme has your own specific configuration and for this theme, is that the default config and what you can change:\n\n```js\nconst config = {\n  /**\n   * Mode\n   */\n  mode: 'light', // you can use: 'dark' or 'light'\n  /**\n   * Show/hide Playground editor by default\n   */\n  showPlaygroundEditor: true,\n  /**\n   * Set the numbers of max lines before scroll editor\n   */\n  linesToScrollEditor: 14\n  /**\n   * Customize codemirror theme\n   */\n  codemirrorTheme: 'docz-light',\n  /**\n   * Logo\n   */\n  logo: {\n    src: null,\n    width: null,\n  },\n  /**\n   * Radius\n   */\n  radii: '4px',\n  /**\n   * Colors (depends on select mode)\n   */\n  colors: {\n    white: '#FFFFFF',\n    grayExtraLight: '#EEF1F5',\n    grayLight: '#CED4DE',\n    gray: '#7D899C',\n    grayDark: '#2D3747',\n    grayExtraDark: '#1D2330',\n    dark: '#13161F',\n    blue: '#0B5FFF',\n    skyBlue: '#1FB6FF',\n    /** properties bellow depends on mode select */\n    primary: colors.blue,\n    text: colors.grayDark,\n    link: colors.blue,\n    footerText: colors.grayDark,\n    sidebarBg: colors.grayExtraLight,\n    sidebarText: colors.dark,\n    sidebarHighlight: null,\n    sidebarBorder: colors.grayLight,\n    background: colors.white,\n    border: colors.grayLight,\n    theadColor: colors.gray,\n    theadBg: colors.grayExtraLight,\n    tableColor: colors.dark,\n    codeBg: lighten(0.02, colors.grayExtraLight),\n    codeColor: colors.gray,\n    preBg: colors.grayExtraLight,\n    blockquoteBg: colors.grayExtraLight,\n    blockquoteBorder: colors.grayLight,\n    blockquoteColor: colors.gray,\n  },\n  /**\n   * Styles\n   */\n  styles: {\n    body: css`\n      font-family: ${get('fonts.ui')};\n      font-size: 16px;\n      line-height: 1.6;\n    `,\n    h1: css`\n      margin: 40px 0 20px;\n      font-family: ${get('fonts.display')};\n      font-size: 48px;\n      font-weight: 500;\n      letter-spacing: -0.02em;\n    `,\n    h2: css`\n      margin: 30px 0 20px;\n      line-height: 1.4em;\n      font-family: ${get('fonts.display')};\n      font-weight: 500;\n      font-size: 28px;\n      letter-spacing: -0.02em;\n    `,\n    h3: css`\n      margin: 25px 0 10px;\n      font-size: 20px;\n      font-weight: 400;\n    `,\n    h4: css`\n      margin: 25px 0 10px;\n      font-size: 16px;\n      font-weight: 400;\n    `,\n    h5: css`\n      margin: 20px 0 10px;\n      font-size: 16px;\n      font-weight: 400;\n    `,\n    h6: css`\n      margin: 20px 0 10px;\n      font-size: 16px;\n      font-weight: 400;\n      text-transform: uppercase;\n    `,\n    ol: css`\n      padding: 0;\n      margin: 10px 0 10px;\n    `,\n    ul: css`\n      padding: 0;\n      margin: 10px 0 10px;\n    `,\n    playground: css`\n      padding: 40px;\n    `,\n    code: css`\n      margin: 0 3px;\n      border-radius: 3px;\n      font-family: ${get('fonts.mono')};\n      padding: 2px 5px;\n      font-size: 0.8em;\n      border: '1px solid rgba(0, 0, 0, 0.02)';\n    `,\n    pre: css`\n      font-family: ${get('fonts.mono')};\n      font-size: 14px;\n      line-height: 1.8;\n    `,\n    paragraph: css`\n      margin: 10px 0 20px 0;\n    `,\n    table: css`\n      overflow-y: hidden;\n      width: 100%;\n      font-family: ${get('fonts.mono')};\n      font-size: 14px;\n      overflow-x: initial;\n      display: block;\n    `,\n    blockquote: css`\n      margin: 25px 0;\n      padding: 20px;\n      font-style: italic;\n      font-size: 16px;\n    `,\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyvescoding%2Fdocz-theme-magic-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyvescoding%2Fdocz-theme-magic-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyvescoding%2Fdocz-theme-magic-scroll/lists"}