support color-scheme · umputun/remark42#1430

2022-07-22T02:51:20.000Z

- add new option for theme to the config in order to understand if site supports auto switch between light and dart theme - add `color-scheme: light dark` when the param is `true`, add `light` or `dark` when `false` and switch `coloe-scheme` value accordingly - remove this change https://github.com/umputun/remark42/pull/1429 ## Cases ### Auto ```ts var remark_config = { theme: 'auto' } ``` ```css color-scheme: light dark; ``` Add support for auto switch between themes ### Dark ```ts var remark_config = { theme: 'dark' } ``` ```css color-scheme: dark; ``` ### Light ```ts var remark_config = { theme: 'light' } ``` ```css color-scheme: light; ```

(3 留言) (0 反應) (0 負責人)Go (5,500 star) (432 fork)user submission

frontendgood-first-issuehelp wanted

描述

add new option for theme to the config in order to understand if site supports auto switch between light and dart theme
add color-scheme: light dark when the param is true, add light or dark when false and switch coloe-scheme value accordingly
remove this change https://github.com/umputun/remark42/pull/1429

Cases

Auto

var remark_config = {
  theme: 'auto'
}

color-scheme: light dark;

Add support for auto switch between themes

Dark

var remark_config = {
  theme: 'dark'
}

color-scheme: dark;

Light

var remark_config = {
  theme: 'light'
}

color-scheme: light;

貢獻者指南

技術棧: typescriptcss
領域: frontend
議題類型: feature
難度: 2
預計時間: half day
活動狀態: fresh
清晰度: clear
前置要求: TypeScriptCSS
新手友善度: 80
研究方向: The issue requires adding a `theme` option to the `remark config` object. The CSS property `color scheme` should be set dynamically based on the option: `light dark`, `light`, or `dark`. The change from PR #1429 (in the linked PR) needs to be reverted. Look at the frontend source code for where the config is read and where CSS is injected. Relevant files are likely in the frontend directory, such as an initialization script or a style setting module.