洛谷美化样式。
Argon Luogu Dev by songxingling1
Mirrored from https://github.com/d0j1a1701/argon-luogu/raw/refs/heads/develop/argon-luogu.user.styl
Details
Authorsongxingling1
LicenseMIT
Categorykkksc0114514
Created
Updated
Code size71 kB
Code checksume52d9cb5
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
氩洛谷预览版
适用于洛谷的美化样式。
A beautification style for Luogu.
特性列表：
- 内置亮/暗两种配色
- 支持自定义颜色
- 支持自定义字体
- 支持自定义背景图片
- 可开关的亚克力效果
- 与 extend-luogu 兼容
如何安装：
- 在此之前，你需要一个浏览器插件「Stylus」，该插件允许你为网页添加自定义样式表。（这个插件非常常见，如果你无法访问谷歌，只需直接搜索「Stylus 插件安装」并遵循说明使用开发者模式安装即可）
- 安装完成后，在这个网页上点击
Install安装样式表。
效果预览：
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name Argon Luogu Dev
@version 20250412.16.24
@namespace https://userstyles.world/style/18510/argon-luogu-dev
@description 洛谷美化样式。
@author d0j1a1701
@license MIT
@preprocessor stylus
@var checkbox dark-mode "深色模式" 1
@var text font-stack "全局字体" "'Inter','Noto Sans SC'"
@var text font-stack-codeblock "代码块字体" "'Fira Code', 'JetBrains Mono', 'Noto Sans SC'"
@var text main-background "自定义背景" "url(https://cdn.luogu.com.cn/upload/image_hosting/7ludxt0p.png)"
@var checkbox header-acrylic "顶栏亚克力效果" 1
@var checkbox nav-acrylic "侧栏亚克力效果" 1
@var checkbox card-acrylic "卡片亚克力效果" 1
@var checkbox footer-acrylic "底栏亚克力效果" 1
@var checkbox anymore-acrylic "其余亚克力效果" 1
@var checkbox remove-ad "去除洛谷广告" 0
@var checkbox animations "动画" 1
@var checkbox prose-bar "阅读进度条" 1
@var checkbox lock-account "纯享壁纸版锁定账户 " 0
==/UserStyle== */
@import url('https://fonts.googleapis.com/css2? family=Fira+Code:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Noto+Sans+SC:wght@100..900&display=swap');
@-moz-document regexp("^(https?://www.luogu.com(.cn)?/).*")
//! 字体导入 ---------
//! 自定义配置部分 ---------
// 调色板
if dark-mode
// 全局颜色
body_bg_color = #181c27 // 全局背景色
navbar_bg_color = #1f3144 // 菜单栏背景色
navbar_text_color = #d0d0d0 // 菜单栏文字色
subtitle_color = #d0d0d0 // 副标题颜色（面板外）
text_color = #c4c6c9 // 全局字体色
sec_text_color = #a7a9ad // 次级字体色（摘要、简介等位置）
time_text_color = rgba(126,241,147,0.62) //主页时间字体色
board_color = #252d38 // 面板背景色
post_text_color = #c4c6c9 // 面板字体色
post_heading_color = #c4c6c9 // 面板标题色（h1, h2, h3...）
post_link_color = #1589e9 // 超链接字体色
link_hover_color = #30a9de // 超链接悬浮字体色
link_hover_bg_color = transparent // 超链接悬浮背景色
line_color = #435266 // 分割线颜色
scrollbar_track_color = #181c27 // 滚动槽颜色
scrollbar_thumb_color = #687582 // 滚动条颜色
scrollbar_hover_color = #5e72e4 // 滚动条悬浮色
button_bg_color = transparent // 按钮背景色
button_hover_bg_color = #46647e // 按钮悬浮色
selection_bg_color = #9696c84d // 选中背景色
acrylic_bg_color = #000000 // 亚克力背景色
inlinecode_bg_color = #636e7b66 // 行内代码背景色
// 代码高亮配色：
codeblock_bg_color = #0d1117
hljs_base_color = #c9d1d9
hljs_keyword_color = #ff7b72
hljs_function_color = #d2a8ff
hljs_variable_color = #79c0ff
hljs_string_color = #a5d6ff
hljs_symbol_color = #ffa657
hljs_comment_color = #8b949e
hljs_tag_color = #7ee787
hljs_subst_color = #c9d1d9
hljs_section_color = #1f6feb
hljs_bullet_color = #f2cc60
hljs_emphasis_color = #c9d1d9
hljs_strong_color = #c9d1d9
hljs_addition_color = #aff5b4
hljs_addition_bg_color = #033a16
hljs_deletion_color = #ffdcd7
hljs_deletion_bg_color = #67060c
text_area_color = #eaecef
else
body_bg_color = #eee
navbar_bg_color = #eeeeee
navbar_text_color = #3c4858
subtitle_color = #fff
text_color = #3c4858
time_text_color = rgba(5, 67, 16, 0.79)
board_color = #fff
post_text_color = #2c3e50
sec_text_color = #718096
post_heading_color = #1a202c
post_link_color = #0366d6
link_hover_color = #30a9de
link_hover_bg_color = transparent
line_color = #eaecef
scrollbar_track_color = #eeeeee
scrollbar_thumb_color = #c4c6c9
scrollbar_hover_color = #a6a6a6
button_hover_bg_color = #f2f3f5
button_bg_color = transparent
selection_bg_color = #95bce3
acrylic_bg_color = #ffffff
text_area_color = #435266
// ! 配置部分结束 ---------
main-background = body_bg_color unless main-background
// d0j1a_1701 最爱的亚克力材质
// 基于伪元素的亚克力实现，不会造成层叠混乱
acrylic(arc-opacity=0.5,blur-radius=10px,no_shadow=false)
background none !important
&:before
acr-bgcolor = rgba(acrylic_bg_color, arc-opacity)
background acr-bgcolor !important
backdrop-filter blur(blur-radius) !important unless blur-radius == 0
box-shadow 0 1px 3px rgba(0, 0, 0, .01),
0 1px 8px rgba(0, 0, 0, 0.2) unless no_shadow !important
content ""
border-radius @border-radius if @border-radius
position absolute
pointer-events none
z-index -1
top 0
left 0
right 0
bottom 0
// https://stackoverflow.com/questions/44522299/css-only-acrylic-material-from-fluent-design-system
// 直接修改背景的亚克力实现，不需要修改 z-index，不会对 border-radius 造成影响，但可能造成层叠混乱
acrylic-bg(arc-opacity=0.5,blur-radius=10px,no_shadow=false)
acr-bgcolor = rgba(acrylic_bg_color, arc-opacity)
background acr-bgcolor !important
backdrop-filter blur(blur-radius) !important unless blur-radius == 0
box-shadow 0 1px 3px rgba(0, 0, 0, 0.01),
0 1px 8px rgba(0, 0, 0, 0.2) unless no_shadow !important
// 修改 Markdown 渲染内容样式
markdown-patch()
.marked
a
color post_link_color
code // 内联代码
background #fff0 !important
border none !important
background codeblock_bg_color !important
border-radius 5px
color hljs_base_color !important
box-shadow none !important
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_
color hljs_keyword_color if hljs_keyword_color
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_
color hljs_function_color if hljs_function_color
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable
color hljs_variable_color if hljs_variable_color
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string
color hljs_string_color if hljs_string_color
.hljs-built_in,
.hljs-symbol
color hljs_symbol_color if hljs_symbol_color
.hljs-code,
.hljs-comment,
.hljs-formula
color hljs_comment_color if hljs_comment_color
.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag
color hljs_tag_color if hljs_tag_color
.hljs-subst
color hljs_subst_color if hljs_subst_color
.hljs-section
color hljs_section_color if hljs_section_color
font-weight 700
.hljs-bullet
color hljs_bullet_color if hljs_bullet_color
.hljs-emphasis
color hljs_emphasis_color if hljs_emphasis_color
font-style italic
.hljs-strong
color hljs_strong_color if hljs_strong_color
font-weight 700
.hljs-addition
color hljs_addition_color if hljs_addition_color
background-color hljs_addition_bg_color if hljs_addition_bg_color
.hljs-deletion
color hljs_deletion_color if hljs_deletion_color
background-color hljs_deletion_bg_color if hljs_deletion_bg_color
pre
&[exlg-copy-code-block]
border-top-left-radius: 0 !important
border-top-right-radius: 0 !important
border-top: none !important
background codeblock_bg_color !important
border none
border-radius 5px
margin-bottom 10px
// 标签样式更改
h1, h2, h3, h4, h5, h6
font-weight 600 !important
color post_heading_color !important
hr.horizon
background-color line_color !important
// 代码块
pre:not([.mp-editor-container])
background codeblock_bg_color !important
border none
border-radius 5px
margin-bottom 10px
&[exlg-copy-code-block]
border-top-left-radius: 0 !important
border-top-right-radius: 0 !important
border-top: none !important
code
background codeblock_bg_color !important
border-radius 5px
color hljs_base_color !important
box-shadow none !important
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-temp...