{"id":6418,"date":"2024-08-26T11:04:58","date_gmt":"2024-08-26T02:04:58","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=6418"},"modified":"2024-05-27T18:33:09","modified_gmt":"2024-05-27T09:33:09","slug":"post-6418","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/6418","title":{"rendered":"\u30b5\u30a4\u30c8\u3092\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5bfe\u5fdc\u3055\u305b\u308b\u300cDarkmode.js\u300d\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u5229\u7528\u65b9\u6cd5"},"content":{"rendered":"

\u30b5\u30a4\u30c8\u3092\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5bfe\u5fdc\u3055\u305b\u308b\u5834\u5408\u3001CSS\u3067\u8272\u3005\u6307\u5b9a\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3068\u601d\u3063\u3066\u3044\u305f\u304c\u300cDarkmode.js\u300d\u3068\u3044\u3046JavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u7528\u3044\u308b\u3053\u3068\u3067\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u308b\u3068\u306e\u3053\u3068\u3002\u3053\u308c\u3092\u8a66\u3057\u3066\u307f\u305f\u3044\u306e\u3067\u30b5\u30f3\u30d7\u30eb\u3068\u5b9f\u88c5\u65b9\u6cd5\u3092\u4ee5\u4e0b\u306b\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

Darkmode.js<\/h2>\n

\u516c\u5f0f\u30b5\u30a4\u30c8<\/h3>\n

https:\/\/darkmodejs.learn.uno\/<\/a><\/p>\n

GitHub<\/h3>\n

https:\/\/github.com\/sandoche\/Darkmode.js<\/a><\/p>\n

CDN<\/h3>\n

CDN\u3067\u4f7f\u3046\u5834\u5408\u306f\u4ee5\u4e0b\u3092\u8a18\u8ff0\u3059\u308b\u3002<\/p>\n

<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/darkmode-js@1.5.7\/lib\/darkmode-js.min.js\"><\/script>\r\n<\/pre>\n
 <\/p>\n
\u30b5\u30f3\u30d7\u30eb<\/h2>\n
https:\/\/taitan916.info\/sample\/Darkmode.js\/<\/a><\/p>\n
\u53f3\u4e0b\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u306b\u306a\u308b\u7b48\u3002<\/p>\n
 <\/p>\n
\u5b9f\u88c5\u65b9\u6cd5<\/h2>\n
\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h3>\n
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/darkmode-js@1.5.7\/lib\/darkmode-js.min.js\"><\/script>\r\n<script>\r\nconst options = {\r\n    bottom: '32px',\r\n    right: '32px',\r\n    left: 'unset',\r\n    time: '0.5s',\r\n    mixColor: '#fff',\r\n    backgroundColor: '#fff',\r\n    buttonColorDark: '#100f2c',\r\n    buttonColorLight: '#fff',\r\n    saveInCookies: false,\r\n    label: '',\r\n    autoMatchOsTheme: true\r\n}\r\nconst darkmode = new Darkmode(options);\r\ndarkmode.showWidget();\r\n<\/script><\/pre>\n
\u30da\u30fc\u30b8\u9077\u79fbor\u30ea\u30ed\u30fc\u30c9\u6642\u3082\u30e2\u30fc\u30c9\u72b6\u6cc1\u3092\u4fdd\u6301\u3059\u308b\u5834\u5408<\/h3>\n
\u4e00\u5ea6\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u306b\u5909\u66f4\u3057\u3066\u3082\u30da\u30fc\u30b8\u9077\u79fb\u3084\u30ea\u30ed\u30fc\u30c9\u3057\u305f\u969b\u3001\u901a\u5e38\u30e2\u30fc\u30c9\u3068\u3057\u3066\u8868\u793a\u3055\u308c\u308b\u304c\u3001\u3053\u308c\u3092\u4fdd\u6301\u3057\u305f\u3044\u5834\u5408\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5f62\u3067cookie\u306b\u4fdd\u5b58\u3055\u305b\u308b\u3068\u826f\u3055\u305d\u3046\u3002<\/p>\n
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/darkmode-js@1.5.7\/lib\/darkmode-js.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/js-cookie@3.0.1\/dist\/js.cookie.min.js\"><\/script>\r\n<script>\r\nconst options = {\r\n    bottom: `32px`,\r\n    right: `32px`,\r\n    left: `unset`,\r\n    time: `0.5s`,\r\n    mixColor: `#fff`,\r\n    backgroundColor: `#fff`,\r\n    buttonColorDark: `#100f2c`,\r\n    buttonColorLight: `#fff`,\r\n    saveInCookies: false,\r\n    label: ``,\r\n    autoMatchOsTheme: true\r\n}\r\nconst darkmode = new Darkmode(options);\r\ndarkmode.showWidget();\r\n\r\n\/\/cookie\u3092\u8aad\u307f\u53d6\u3063\u3066\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u306b\u5909\u66f4\r\nif( Number(Cookies.get('darkmode')) ){\r\n    document.querySelector(`.darkmode-toggle`).click();\r\n}\r\n\/\/\u30a2\u30a4\u30b3\u30f3\u30af\u30ea\u30c3\u30af\u6642\u306bcookie\u4fdd\u5b58\r\ndocument.querySelector(`.darkmode-toggle`).onclick = (event) => {\r\n    const cookie_value = ( darkmode.isActivated() ) ? 1 : 0;\r\n    Cookies.set('darkmode', cookie_value);\r\n};\r\n\r\n<\/script><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u30b5\u30a4\u30c8\u3092\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5bfe\u5fdc\u3055\u305b\u308b\u5834\u5408\u3001CSS\u3067\u8272\u3005\u6307\u5b9a\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3068\u601d\u3063\u3066\u3044\u305f ... <\/p>\n","protected":false},"author":1,"featured_media":1067,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[100],"class_list":["post-6418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-library"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t