重 源协议 引用了系统内置的 Yaru 主题如何修改样式

已于 2025-07-07 10:04:30 修改
阅读量280 收藏 3
点赞数 5
CC 4.0 BY-SA版权
分类专栏： # c++ubuntu开发 文章标签： css ubuntu 前端
于 2025-07-05 10:56:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xie__jin__cheng/article/details/149133947

1.概要

gtk.css文件内只有@import url(“resource:///com/ubuntu/themes/Yaru/3.0/gtk.css“)如何修改样式

2.内容

在 Ubuntu 系统中，若 /usr/share/themes/<主题名>/gtk-3.0/gtk.css 仅包含 @import url("resource:///com/ubuntu/themes/Yaru/3.0/gtk.css");，这表示当前主题通过 资源协议 引用了系统内置的 Yaru 主题。直接修改此文件可能因系统更新被覆盖，且可能影响全局主题。以下是安全修改系统样式的步骤：

方法 1：通过 用户级 CSS 覆盖（推荐）

GTK 支持通过用户目录下的 CSS 文件覆盖系统样式，无需修改系统文件。

  1. 创建覆盖文件：

    mkdir -p ~/.config/gtk-3.0
nano ~/.config/gtk-3.0/gtk.css

  2. 添加自定义样式：
    在文件中写入需要覆盖的 CSS 规则。例如：

    /* 修改标题栏字体大小（需根据实际类名调整） */
.titlebar {
  font-size: 14pt;
}

/* 修改窗口边框颜色 */
.window-frame {
  border: 2px solid #4A90D9;
}

  3. 重启应用：
    关闭并重新打开目标应用程序，样式将生效。

方法 2：创建 自定义主题副本

若需深度定制，可复制系统主题并修改：

  1. 复制原主题：

    cp -r /usr/share/themes/Yaru-dark ~/.themes/MyCustomTheme

    修改主题名称：
    编辑 ~/.themes/MyCustomTheme/gtk-3.0/gtk.css，替换 Yaru 为自定义名称（如 MyCustomTheme）。

  2. 应用自定义主题：

    • 使用 gnome-tweaks 工具： 
      sudo apt install gnome-tweaks
      打开 Tweaks > 外观，选择 MyCustomTheme。

方法 3：调试与定位样式类名

若不确定需要修改的 CSS 类名，可使用以下工具：

  1. GTK Inspector 工具：
    • 启动应用后，按 Alt + F2，输入 lg，回车打开 Looking Glass。
    • 在 Widgets 标签页中，选择目标窗口元素，右侧面板会显示其 CSS 类名。
  2. 测试样式片段：
    在 ~/.config/gtk-3.0/gtk.css 中临时添加测试代码，观察效果。

注意事项

  1. 资源路径限制：
    • resource:///com/ubuntu/themes/... 是系统内置资源，无法直接修改。
    • 覆盖样式时，需确保 CSS 选择器优先级高于系统主题。
  2. GTK-4 兼容性：
    • 若应用基于 GTK-4，需在 ~/.config/gtk-4.0/gtk.css 中修改样式。
  3. 备份原文件：
    • 修改系统文件前，建议备份： 
      sudo cp /usr/share/themes/Yaru-dark/gtk-3.0/gtk.css /path/to/backup/

通过上述方法，您可以在不修改系统文件的前提下安全定制 GTK 主题样式。

3.关联链接

qt 设置窗口风格

qt 设置 平台特定样式-优快云博客

QApplication::setStyle-优快云博客

setStyle(QStyleFactory::create(“Fusion“))和setStyle(“fusion“)；有啥共性和差别-优快云博客

如何设置标题栏的字体大小-优快云博客

通过 用户级 CSS 覆盖，修改系统样式-优快云博客

gsettings 命令强制设置标题栏字体-优快云博客

设备标题栏的按钮尺寸 Ubuntu GNOME桌面 gtk-3.0-优快云博客

Tweaks（设置系统样式） 如何打开 -优快云博客

GNOME桌面 刷新-优快云博客

Tweaks 设置字体 系统字体-优快云博客

GNOME 桌面环境中用于管理窗口管理器（Window Manager）配置的 GSettings schema（org.gnome.desktop.wm.preferences）-优快云博客

org.gnome.desktop.wm.preferences-优快云博客

Schema 文件-优快云博客

QT_QPA_STYLESHEET 指定 Qt 应用程序加载的 QSS（Qt Style Sheets） 文件路径-优快云博客

如何确认和设置Qt应用的装饰模式-优快云博客

gtk.css文件内只有@import url(“resource:///com/ubuntu/themes/Yaru/3.0/gtk.css“)如何修改样式-优快云博客

linux关于桌面的架构-优快云博客

GNOME 和GTK 是什么关系-优快云博客

ubuntu 有几种桌面系统可以选择，比如GNOME-优快云博客

Linux 操作系统（如 Ubuntu）之所以能支持多种桌面环境，核心原因正是其底层提供了标准化的图形接口和协议-优快云博客

显示服务器（如X11或Wayland）-优快云博客

gtk.css文件内只有@import url(“resource:///com/ubuntu/themes/Yaru/3.0/gtk.css“)如何修改样式-优快云博客

4.关联知识 

1.@import url(“resource:///com/ubuntu/themes/Yaru/3.0/gtk.css“)指向的gtk.css的具体位置在哪里

@import url("resource:///com/ubuntu/themes/Yaru/3.0/gtk.css") 中引用的 gtk.css 文件实际存储在 Yaru 主题的系统安装路径 中，具体位置为：

/usr/share/themes/Yaru/gtk-3.0/gtk.css

关键细节解析：

  1. resource:/// 协议：
    • 这是 GTK 的 GResource 系统使用的虚拟路径，用于访问打包到二进制文件中的资源（如 CSS、图片等）。
    • 文件实际存储在 /usr/share/themes/Yaru/gtk-3.0/gtk.gresource 中（一个二进制资源文件），但通过 resource:/// 协议映射为虚拟路径 /com/ubuntu/themes/Yaru/3.0/gtk.css。
  2. 直接文件路径：
    • 如果你想手动查看或编辑该文件，实际文件系统路径是： 
      /usr/share/themes/Yaru/gtk-3.0/gtk.css
    • 注意：修改系统文件需要 root 权限，且可能被主题更新覆盖。
  3. Yaru 主题结构：
    • Yaru 主题的 GTK 3.0 配置文件通常位于： 
      /usr/share/themes/Yaru/gtk-3.0/
    • 包含 gtk.css（主样式表）和 assets 文件夹（图标、进度条等资源）。
  4. 验证方法：
    • 运行以下命令确认文件是否存在： 
       
      ls /usr/share/themes/Yaru/gtk-3.0/gtk.css
       
    • 查看资源打包文件： 
       
      ls /usr/share/themes/Yaru/gtk-3.0/gtk.gresource
       
     
 

总结：
 

  • 虚拟路径：resource:///com/ubuntu/themes/Yaru/3.0/gtk.css 对应 GTK 的资源系统。
  • 实际路径：/usr/share/themes/Yaru/gtk-3.0/gtk.css（可直接访问）。
  • 设计目的：通过资源系统打包文件，确保主题完整性和性能，同时支持跨平台分发。

                

        

    

    
  



    



                



	

		

			

				
					
Yaru主题+图标.zip

				
			

			

				

					01-12
				

			

		

		

			
				
本文将深入探讨Yaru主题和图标的安装与使用，以及如何在CentOS 8系统上进行桌面美化。  首先，Yaru主题源自Ubuntu的默认主题，它以其简洁的线条、深色背景和鲜明的色彩对比赢得了用户的喜爱。YaruTheme.zip包含了...

			
		

	



                

            
              



	

		

			

				
					
yaru-plus：Yaru ++，优雅，现代的第三方图标主题，基于Ubuntu的Yaru

				
			

			

				

					02-06
				

			

		

		

			
				
yaru-plus：Yaru ++，优雅，现代的第三方图标主题，基于Ubuntu的Yaru

			
		

	



              


  
              

                


	

		

			

				
					
C语言gtk调用css样式

				
			

			

				

					qq_33329316的博客
				

				

					02-23
					
					1444
					
				

			

		

		

			
				
首先写好对应的xml 文件和css 样式
之后在.c 文件中连接
先获取cssprovider
    GtkCssProvider *css_provider = gtk_css_provider_new();

    if(gtk_css_provider_load_from_path(css_provider, "builder3.css", &error) == 0) {
        g_printerr("Error loading css file: %s\n", error-&g

			
		

	





	

		

			

				
					
gtk怎么设置样式

				
			

			

				

					qq_37398808的博客
				

				

					09-16
					
					318
					
				

			

		

		

			
				
property name="name">iamlabel</property> //widgetname只是一个属性而已。<object class="GtkLabel" id="l2">  //id作用于大的控件。gtk_style_context_add_provider：引入的css文件，仅仅作用于这个widget而已。gtk_style_context_add_provider_for_screen：作用于整个页面。id是builder用的,widgetname才是css用的。

			
		

	



		

			
		



	

		

			

				
					
gtkmm给组件添加css

				
			

			

				

					随手写下笔记和感悟
				

				

					04-15
					
					675
					
				

			

		

		

			
				
样式表我们写在文件中就行（似乎也可以从字符串加载，不过不推荐）。使用CSS分为两步，1:为组件设这css名称，2:加载样式表。不过实际中样式表可能出错，为了方便发现错误，我们需要处理。，正常状态为蓝色，悬停变红色，点击变绿色。需要自定义类来使用，比较复杂，暂时不用。只用把前缀换一下就OK了。这个类，将它作为类的成员。用只有一个按钮的界面为例，这里就能加载样式表类。4.10开始，已经将。

			
		

	





	

		

			

				
					
一、GTK3.0-CSS

				
			

			

				

					Creationyang的博客
				

				

					11-11
					
					979
					
				

			

		

		

			
				
1 CSS
  CSS用于控制网页的样式和布局。
1.1 CSS3 边框
  用CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序。
/* 1.创建css对象 */
GtkCssProvider * gtk_css_provider_new (void);
/* 2.1 从文件导入css数据到css对象 */
gboolean gtk_css_provider_load_from_path (GtkCssProvider  *css_provider,
                

			
		

	





	

		

			

				
					
GTK+C语言+CSS开发的小系统 socket局域网聊天+音乐播放器+贪吃蛇游戏 && C语言做界面

				
			

			

				

					sad1999的博客
				

				

					02-20
					
					3545
					
				

			

		

		

			
				
我用假期的时间做了一个GTK小系统，组合了之前我学习的GTK知识，并且加入了C语言的链表等工具，结合了C语言的知识，开发了这个小程序，用的环境是VS2015配置的GTK还有socket编程，以及添加了很少部分的CSS知识，首先先看几张截图，之后我会一个一个的讲解小系统的组成以及制作过程，供大家参考，本人水平有限，作品只给大家提供一个思路。 
 
然后用了一点点css的知识，主界面有鼠标停留滑动效果

			
		

	





	

		

			

				
					
Yaru-Aqua-light主题的GTK3样式探索

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"org.gtk.Gtk3theme.Yaru-Aqua-light 是一个与 Linux 桌面环境相关的主题资源。Gtk3 是指 GTK+3，这是一种用于创建图形用户界面的库，它广泛用于 Linux 系统中的多种应用程序。GTK+3 是 GTK+2 的后续...

			
		

	





	

		

			

				
					
yaru-remix：yaru-remix的新手方法

				
			

			

				

					02-06
				

			

		

		

			
				
Yaru-remix是主题的一个分支。  Yaru-remix包括：  GTK主题（gtk2，gtk3）  侏儒壳主题 Ubuntu-dock主题（指标）  Yaru-混音图标 Yaru混音游标 Yaru-remix壁纸 扩展 注意：Yaru-remix现在可与Snap-apps和Flatpak-...

			
		

	





	

		

			

				
					
Yaru主题与图标美化包提升CentOS 8桌面体验

				
			

			

				

					
				

			

		

		

			
				
Yaru是Ubuntu操作系统中默认使用的主题名称，而该压缩包中可能包含了用于定制Linux桌面环境的视觉元素，尤其是针对GNOME桌面环境的设计风格。  描述部分提供了文件的下载链接和提取码，链接指向百度网盘，用户可以...

			
		

	





	

		

			

				
					
GTK常用控件之笔记本控件( GtkNotebook )源代码

				
			

			

				

					01-26
				

			

		

		

			
				
GTK常用控件之笔记本控件( GtkNotebook )源代码，相关教程链接如下：
http://blog.csdn.net/tennysonsky/article/details/43153221

			
		

	





	

		

			

				
					
gtkmm4 应用程序使用 CSS 样式

				
			

			

				

					Computer_Tech的博客
				

				

					02-08
					
					1027
					
				

			

		

		

			
				
程序样式和代码逻辑分离开 使代码逻辑更可观。

			
		

	





	

		

			

				
					
一个gtk3的css使用的最简单的demo

				
			

			

				

					FlayHigherGT的博客
				

				

					11-22
					
					2741
					
				

			

		

		

			
				
首先装好gtk3的依赖，不管是fedora还是ubuntu装好之后执行：

pkg-config --cflags --libs "gtk+-3.0"

能正常显示gtk3的依赖情况说明gtk3已经装好，之后编译：

gcc css-demo.c `pkg-config --cflags --libs gtk+-3.0`

运行。。。


#include &lt;stdio.h&gt;
...

			
		

	





	

		

			

				
					
ubuntu 通过 用户级 CSS 覆盖，修改系统样式

					
最新发布

				
			

			

				

					xie__jin__cheng的博客
				

				

					07-07
					
					642
					
				

			

		

		

			
				
ubuntu 通过 用户级 CSS 覆盖，修改系统样式

			
		

	





	

		

			

				
					
GNOME 3 │ 为窗口添加边框

				
			

			

				

					k4nz
				

				

					04-14
					
					438
					
				

			

		

		

			
				
问题描述

在 GNOME 3 中（GNOME Shell 3.30.2），窗口是没有边框的。

当窗口背景色与桌面背景色相同时，无法区分二者，影响使用。比如，我们需要使用鼠标调整窗口边框，但是由于与背景色相同，导致我们很难无法找到窗口边框。

该笔记将记录：在 GNOME 3 中，如何设置窗口边框。

解决方案

修改 ~/.config/gtk-3.0/gtk.css 文件，添加如下配置：



decoration {
    border: 1px solid gray;
    backgrou.

			
		

	





	

		

			

				
					
gtk+-3.0使用链接css文件和使用方法

				
			

			

				

					weixin_44374594的博客
				

				

					06-03
					
					1124
					
				

			

		

		

			
				
// main.c
#include <gtk/gtk.h>

static void load_css (void)
{

    GtkCssProvider *provider;
    GdkDisplay *display;
    GdkScreen *screen;

    const gchar *css_style_file = "style.css";
    GFile *css_fp = g_file_new_for_path(css_style_file);
    

			
		

	





	

		

			

				
					
14-7 使用 css 调控样式

				
			

			

				

					gltzlike的博客
				

				

					08-29
					
					489
					
				

			

		

		

			
				
1. 修改前端样式

可以将 ui 文件与 css 文件进行关联，类似于 html 和 css 的关系。只不过需要注意的是，前端样式可以借助 glade 进行修改，但并没有将修改应用至程序窗口，仅仅提供了预览功能。样式修改后还需要修改后台代码应用至程序窗口。后台代码获取到 css 样式文件，并将其运用到窗口程序。

    前端 ui 文件与 css 文件进行关联的具体过程为：

    1）点击 glade 的项目设置，设定 ui 文件链接的 css 文件目录。



 ...

			
		

	





	

		

			

				
					
GTK3.0 使用CSS设置控件背景色

				
			

			

				

					轻飘飞扬
				

				

					01-05
					
					9255
					
				

			

		

		

			
				
********************************************************************************************************************我已参加2014“博客之星的”评选，觉得我的文章对您有帮助的，请投上您宝贵的一票，点击投票。**************************************

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值