內容簡介
Onyx Dark Mode Switcher 是一款輕量級的 WordPress 外掛，讓訪客能夠輕鬆切換亮色與暗色模式。安裝並啟用後，外掛會自動根據佈景主題的顏色生成相應的暗色調，無需編寫樣式表或配置佈景主題。
【主要功能】
• 一鍵切換：每頁都有浮動切換按鈕
• 系統感知：根據訪客的系統設置自動調整
• 定時開啟：可設定自動在特定時間啟用暗色模式
• 自訂按鈕：可將任何 CSS 選擇器設為切換按鈕
• 圖片控制：可替換或反轉圖片以適應暗色模式
• 顏色預設：提供 13 種顏色預設或自訂調色板
外掛標籤
開發者團隊
原文外掛簡介
A lightweight WordPress plugin that lets your visitors switch between light and dark mode in one click.
Install it, activate it, and you are done. Onyx reads the colors your theme actually renders and works out a matching dark palette on its own, so there is no stylesheet to write and no theme to configure. It works with any WordPress theme.
Dark mode is applied before the page paints, so visitors never see a flash of white before the page turns dark. Their choice is remembered on their next visit.
Everything below is optional. Onyx is useful the moment you activate it, and every setting is there for the day you want to fine tune it.
Ways to Turn Dark Mode On
Dark mode does not have to be a button your visitors go looking for. Choose whichever of these suit your audience, or use them together.
One click switch – a floating toggle button on every page
OS Aware Dark Mode – follows the visitor’s own system setting, from their very first visit
Scheduled Dark Mode – turns on automatically between two times, for example 20:00 to 06:00. Times follow each visitor’s own clock, not your server’s, and windows that run past midnight are handled properly
Dark Mode on Start – open the site in dark mode by default
Keyboard shortcut – visitors press Ctrl+Shift+D
Your own button – point Onyx at any CSS selector on your site and that element becomes the switch
Switch in the menu – add the toggle to any WordPress navigation menu, with its own size and margins
Whichever route a visitor takes, their choice is remembered on their next visit.
A Switch Button You Can Style
The floating button is meant to look like part of your design, not like a plugin.
12 light icons and 14 dark icons – suns, moons, sunrise and sunset, cloud and bulb variants
4 shapes – square, round, rounded square and an animating blob
8 screen positions, each with its own offset in pixels
Button size and icon size
Separate background and icon colors for light mode and dark mode
Adjustable drop shadow – horizontal, vertical, blur and color
Optional tooltip with your own wording
13 Color Presets, or Your Own
Pick a ready made dark palette or build one yourself. The Colors tab previews your choice live, before you save.
13 presets, from neutral charcoal through deep blue, violet, forest, amber and true black
A full custom palette – background, secondary background, text, links and link hover, inputs and placeholders, borders, and buttons including their hover state
Live preview that updates as you pick a preset or edit a color
Per selector color overrides – for the occasional element the automatic pass gets wrong, give it a CSS selector and set its background, text and border colors directly
Images, Video and SVG
The parts of a page that most often look wrong in dark mode are the ones that carry their own colors. Onyx gives each of them a control.
Replace images – serve a different image file in dark mode, one for one. Ideal for a dark version of your logo
Invert images – flip specific images so line art and diagrams stay readable
Invert SVGs – smart inversion for inline SVG icons and graphics
Image grayscale – soften photography in dark mode
Video grayscale – the same treatment for embedded video
Darken background images – dim CSS background images, with the level under your control
Decide Where Dark Mode Applies
Some pages should never go dark. A checkout, a photo gallery, a landing page built in brand colors.
Skip selectors – list HTML tags, classes or IDs that dark mode should leave alone
Apply button styles to classes – name the classes your theme uses for buttons so they recolor correctly
Disable per post type – switch dark mode off for single entries of any post type
Disable per page – tick one box in the Onyx Dark Mode panel in the editor sidebar and that entry always renders in its normal colors
Custom Code
For when you want the last word.
Custom CSS – loaded alongside the generated dark mode styles
Before and after toggle JavaScript – run your own code every time a visitor switches, on both sides of the toggle
Tools
Export every setting to a JSON file as a backup
Import that file on another site to set it up in one step
Reset everything back to the defaults it shipped with
Built to Stay Out of the Way
No flash of light content – the mode is resolved before the browser paints
Admin styles and scripts load only on the plugin’s own settings screen, never across your dashboard
No third party libraries, no tracking, no bloat
Translation ready